Introduction to React.js

Transcript

1. Introduction to React.js Max Stoiber @mxstbr Open Source Developer, Thinkmill

2. None
3. None

4. React

5. The V in MVC

6. None

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>
59. None

60. mxs.is/mstsreact

61. Thank you! Max Stoiber @mxstbr Come talk to me!