ReactJS - A quick introduction to Awesomeness

Quick walkthrough for ReactJS with pillars, basics and advantages

Transcript

1. ReactJS A quick introduction to Awesomeness Copyright © Ronny Haase, 2017
2. Why should I care? • Component based • Declarative • Fast - Client, Server, Universal • Simple • Free choice of ecosystem around (can also be considered a drawback) Frontend engineering done right
3. Why should I care? Because these guys do care a lot: Airbnb, Atlassian, eBay, Dropbox, EyeEM, Facebook, Flipboard, Google, Khan Academy, Mozilla, Netflix, PayPal, Pinterest, Rangle.io, Salesforce, Slack, Spotify, Tilt, Twitch, Twitter, Uber, WalMart, Yahoo, Zalando https://github.com/facebook/react/wiki/sites-using-react
4. The Pillars
5. <Component />s
6. Components “Declarative React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.”
7. “Component-Based Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.” Components
8. Components Two Types: Presentational Container Components are simply functions! (internally “classes” are functions in JavaScript as well)
9. Presentational Components Only markup, TodoItem <div className=”TodoItem”> <label className=”TodoItem-Title”>{props.title}</label> <div className=”BtnGroup”> <button className=”Btn” onClick={props.editItem}>Edit</button> <button className=”Btn” onClick={props.removeItem}>Remove</button> </div> </div>
10. Presentational Components <TodoItemWrapper> <TodoItemTitle>{props.title}</TodoItemTitle> <ButtonGroup> <Button onClick={props.editItem}>Edit</Button> <Button onClick={props.removeItem}>Remove</Button> </ButtonGroup> <TodoItemWrapper>
11. Presentational Components const TodoItem = (props) => <TodoItemWrapper> <TodoItemTitle>{props.title}</TodoItemTitle> <ButtonGroup> <Button onClick={props.editItem}>Edit</Button> <Button onClick={props.removeItem}>Remove</Button> </ButtonGroup> </TodoItemWrapper>
12. Components • Build as granular, encapsulated and generic components as possible ◦ Better Performance ◦ Easier Debugging ◦ Easier Testing ◦ More readable and declarative ◦ Reusable
13. Container Components • Components that have state (we learn about state later) • Handles it’s state and passes it down as props to presentational components // Component const NameOutput = ({ enteredName }) => <h1>Hi! My name is {enteredName}</h1> // Container class EnterName extends Component { render() { return <div> <input onChange={(ev) => this.setState({ name: ev.target.value })} /> <NameOutput enteredName={this.state.name} </div> } }
14. JSX JavaScript XML • No requirement • Makes React declarative • It’s XML (like HTML is) with full JavaScript power (you could do anything within curly braces)
15. Elements Elements are instances of Components
16. Lifecycle Methods Hooks on certain state changes: (Constructor), Mount, Unmount, Should Update?, Will Update, etc.
17. Explicit Uni-Directional Data Flow
18. Data Types
19. The Two Data Types in React Applications In React there are only two types of data: • State • Props
20. Props • Read-only (!) • Passed from the top • Can be passed on down ◦ Prefer specific or no passing down ◦ Only pass on all props when necessary • Are a reflection of your component tree ◦ You only get relevant data ◦ And only pass on the data relevant for your children
21. State • If a component requires data that can change, or needs to store data you put them into its State • Immutable, plain Objects • Pass on down as props • Eventually Props can be the source (do not assign by reference!) this.state = this.props.whatever this.state = { ...this.props.whatever }
22. Data Flow
24. Looks familiar? Yep, It’s a mess! Your backend already did the MVC part, why repeat it on front-end?! Just take the data and put them into your view!
25. Action = Click, request, new data Dispatcher = Container Component, or e.g. Redux Dispatcher Store = Container State, or e.g. Redux Store View = Presentational Components
26. FLUX
27. React is the V in MVC React is the V in MVC
28. VDOM
29. The Browser DOM is slow.
30. VDOM • React keeps it’s own DOM (subtree) representation(s) and a copy of the actual DOM in memory • On Change (Props or State) ◦ It diffs the DOMs in memory (fast!) ◦ Parses tree and only rerenders elements where necessary in memory (faster!) ◦ Mutates DOM all at once (even faster!) Only one DOM mutation instead of multiple, each may requiring a browser repaint ◦ Reconciliation
31. Does this concept sound familiar?
35. Bonuses
36. Flawless Server-Side & Universal Rendering Even faster!
37. Client-side (SPA) import { render } from ‘react-dom’; const el = document.getElementById(‘mount’); render(<MyComponent />, el);
38. Server-side import { renderToString as render } from ‘react-dom/server’; render(<MyComponent />);
39. Universal import { renderToString as render } from ‘react-dom/server’; return ` <div id=”mount”> ${render(<MyComponent />)} </div> `; If you call the code from 2 slides before on client-side now, React will recognize the server-side rendered component and only attach the missing parts powered by VDOM (very, very, very performant!)
40. Links • Hacker Way: Rethinking Web App Development at Facebook Official React announcement • Learning Functional Programming with JavaScript by Anjana Vakil Very basic but great introduction to Functional Programming • Functional Programming Series by Eric Elliott Great for diving deeper into Functional Programming • How we built Twitter Lite Great example for a light, mobile-first, progressive web app, built with React
41. Questions?
42. Let’s do some coding!
43. API https://nodod-rsmmjhqasm.now.sh/todos GET / - Get list of all tasks POST / - Create task GET /:id - Get specific task PUT /:id - Update specific task DELETE /:id - Delete specific task Schema: TodoItem { “title”: “Task title”, “completed”: false, “created_at”: “1498566756549”, “updated_at”: “1498566794201” } Run your own: https://github.com/ronnyhaase/nodod