Introduction to React.js

The slides for my introduction to React.js talk!

Transcript

1. Introduction to React.js Max Stoiber @mxstbr Open Source Developer, Thinkmill
4. React
5. The V in MVC
7. The V in MVC
8. The Vanilla in MVC
9. Why does React exist?
10. Instagram
11. Rendering on the server?
12. Rendering on the client!
13. Dynamic Interfaces
14. Dynamic Interfaces ≈ Better UX
15. Dynamic Interfaces are hard
16. React makes Dynamic Interfaces easy
17. How does React work?
18. React creates components
19. Render those components on the web, on native, in VR,…
20. Write once, run anywhere?
21. ⚠ Write once, run anywhere? ⚠
22. Learn once, write anywhere!
23. Let’s talk about components
24. Header SearchResults
25. SearchResults Logo SearchBar TabNav AppsToggle Btn
26. SearchResults Input SearchIcon Tab Tab Tab Tab Tab Toggle Tgl Tgl
27. Components in React
28. React.createElement()
29. React.createElement('div') // will render this w/ ReactDOM <div></div>
30. React.createElement('h1') // will render this w/ ReactDOM <h1></h1>
31. React.createElement('input') // will render this w/ ReactDOM <input></input>
32. React.createElement('input', { type: 'radio' }) // will render this w/ ReactDOM <input type="radio"></input>
33. React.createElement('h1') // will render this w/ ReactDOM <h1></h1>
34. React.createElement('h1', { className: 'heading' }) // will render this w/ ReactDOM <h1 class="heading"></h1>
35. React.createElement('h1', { className: 'heading' }, 'Hello World') // will render this w/ ReactDOM <h1 class="heading">Hello World</h1>
36. React.createElement('div', null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div> <h1 class="heading">Hello World</h1> </div>
37. React.createElement('div', { className: 'wrapper' }, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
38. const Wrapper = function (props) { return React.createElement('div', { className: 'wrapper' }) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> </div>
39. const Wrapper = function (props) { return React.createElement('div', { className: 'wrapper' }, props.children) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div> Component!
40. Rendering the whole DOM is slow
41. React Elements are representation of the DOM
42. React.createElement('h1', { className: 'heading' }, 'Hello World') // will return something like { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }
43. React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will return something like { type: Wrapper, props: null, children: [{ type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }] }
44. Every tick calculate the changes
45. Every tick calculate the changes (that's quick, because objects)
46. // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }
47. // After { type: 'h1', props: { className: 'heading' }, children: ['This is new'] }
48. // After { type: 'h1', props: { className: 'heading' }, children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }
49. // After { type: 'h1', props: { className: 'heading' }, children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] } // What changed?
50. // After { type: 'h1', props: { className: 'heading' }, children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] } // What changed?
51. Only render changes to the DOM!
52. JSX
53. const Wrapper = function (props) { return React.createElement('div', { className: 'wrapper' }, props.children) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
54. const Wrapper = function (props) { return React.createElement('div', { className: 'wrapper' }, props.children) } React.createElement(Wrapper, null, <h1 className="heading">Hello World</h1> ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
55. const Wrapper = function (props) { return <div className="wrapper">{ props.children }</div> } React.createElement(Wrapper, null, <h1 className="heading">Hello World</h1> ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
56. const Wrapper = function (props) { return <div className="wrapper">{ props.children }</div> } <Wrapper> <h1 className="heading">Hello World</h1> </Wrapper> // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
57. const Wrapper = function (props) { return React.createElement('div', { className: 'wrapper' }) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
58. const Wrapper = function (props) { return <div className="wrapper">{ props.children }</div> } <Wrapper> <h1 className="heading">Hello World</h1> </Wrapper> // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
60. mxs.is/mstsreact
61. Thank you! Max Stoiber @mxstbr Come talk to me!