2018 02-22 React, Redux & Building Applications that Scale | React
1 like45 views
The document discusses issues with traditional front-end development, highlighting the challenges of imperative programming and the limited scalability of the MVC model. It introduces React as a solution, emphasizing its component-based architecture that facilitates a one-way reactive data flow and efficient UI re-rendering. Additionally, it provides an overview of props and state, as well as the component lifecycle in React, concluding with practical examples for hands-on implementation.
2018 02-22 React, Redux & Building Applications that Scale | React
- 1. React, Redux and Building Applications that Scale BY KRISTOF VAN MIEGEM Co-Founder Codifly
- 3. Agenda • Issues with Traditional Front End Development • React to the Rescue • React Components • Hands-On
- 4. Issues with traditional front-end development About imperative programming, MVC and the DOM
- 5. Assignment is bad! function transformUser(user) { user.name = `${user.firstName} ${user.name}`; return user; } const mackey = { firstName: ‘John’, name:‘Mackey’ }; const user1 = transformUser(mackey); const user2 = transformUser(mackey); user1.name !== user2.name
- 6. f(x) = f(x) Pure Functions
- 7. MVC Model The data Controller Processes Events View Display Events Notify Update User ActionUpdate
- 9. The Limited Scalability of MVC Model View Model View Model View Model View
- 10. The DOM is an Inconvenient and Slow API <body> <h1> <p> <h2> <p> text text text text
- 11. Summary • Imperative Programmming is Cumbersome and Error-Prone • The Scalability of MVC is Limited • The DOM is an Inconvenient and Slow API Issues with traditional front-end development
- 12. React to the Rescue Structuring JavaScript Apps Done Well
- 14. “How do you structure front end JavaScript Applications?” React
- 15. React Components Cohesive units bundling both the look-and-feel and logic of the UI: • Declaratively define how the UI should look like at any point in time • Contain logic for event handling
- 16. React Components
- 18. “Whenever the state changes, rerender the entire user interface.” One-Way Reactive Data Flow State DOM New State New DOM
- 19. Initial Render (1) Call render() recursively (2) Generate markup (3) Inject markup in the DOM (4) Attach events
- 20. Reconciliation 1 2 3 4 6 75 1 2 3 4 6 78 -5 +8
- 21. React Components Bundling look-and-feel and behaviour
- 22. Props vs State: Commonalities • … are JavaScript data structures • … changes trigger a rerender • … are deterministic
- 23. render(props, state) = render(props, state) Render as a Pure Function
- 24. Props vs State: Differences Props State … are received from the parent component … is created within the component … form a component’s “configuration” … is private and managed internally … are read via this.props … is read via this.state … are immutable … is mutable: this.setState()
- 26. Rich Ecosystem • styled-components • redux • mobx • react-dnd • react-dropzone • react-modal • react-i18next • react-router • … Visual primitives for the component age. Predictable state container for JS apps Simple, scalable state management Drag and Drop for React Simple HTML5 drag-drop zone with React Accessible modal dialog component Internationalization for React done right A complete routing library for React …
- 27. Let’s script! Getting our hands dirty with React state and props
- 28. A First Component <ClickButton text=‘Hello text prop' onClick={alert.bind(null, ‘Hey!’)} />;
- 29. JSX: It’s just JavaScript <ClickButton text=‘Hello text prop’ onClick={alert.bind(null, ‘Hey!’)} />; React.createElement(ClickButton, { text: ‘Hello text prop', onClick: alert.bind(null, ‘Hey!') });
- 30. Slide title https://lpnpz04lxl.codesandbox.io/ Let’s script! • Go to https://codesandbox.io/s/new • Create two files: ClickButton.js and Counter.js • Clicking the button increments the counter