How to React And not shoot yourself in the foot

React is awesome... But like any awesome tool, it should be used with caution. Let's explain how React works and why/how its should be used.

Transcript

1. How to React Pierre GOUDJO And not shoot yourself in the foot
8. const element = ( <h1 className="greeting"> Hello, world! </h1> ); JSX: not a string, not a HTML tag either
9. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); Babel Magic 🧙🪄✨
10. ———————————————index.html——————————————————— <div id=“root"></div> ———————————————index.jsx———————————————————— const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById(‘root')); Rendering an element into the DOM
11. function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000); Rendering an element multiple times into the DOM
14. source: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html
15. class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, document.getElementById('hello-example') ); A simple React component with JSX
16. class HelloMessage extends React.Component { render() { return React.createElement( "div", null, "Hello ", this.props.name ); } } ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example')); This is the real code executed by the browser
17. class HelloMessage extends React.Component { render() { return React.createElement( "div", null, "Hello ", this.props.name ); } } ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example')); Look like the component is a “function”
18. function HelloMessage(props) { return <h1>Hello, {props.name}</h1>; } ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example')); Obvious here
19. f: props → element A React component
21. function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); Let’s make this in a truly reusable component
22. function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(tick, 1000); Clock is now an isolated component but doesn’t manage the time to be displayed
23. ReactDOM.render( <Clock />, document.getElementById('root') ); Ideally, that’s what we want…
24. State to the rescue
25. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } State use instead of props
26. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { } componentWillUnmount() { } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } Lifecycle methods
27. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } Update the date at fi xed interval
28. const Clock = (props) => { const [date, setDate] = useState(new Date()) useEffect( () =>{ const timerId = setInterval( () => setDate(new Date()), 1000 ); return () =>{ clearInterval(timerId) } }, ) return ( <div> <h1>Hello, world!</h1> <h2>It is {date.toLocaleTimeString()}.</h2> </div> ) } Same thing with a functional component
29. f: state → props → element A React component
30. State introduces complexity
32. Don’t use React
33. Resist building a SPA (using React or else)
40. Build tiny/focused components
42. Go SPA only if you have to
45. Limit React to the view part of your app
46. Avoid state as much as possible in React components
47. Manage the state of your application outside of the React components
51. QUESTIONS?
52. THE END