Discover React
5 likes1,361 views
React is a JavaScript library for building user interfaces developed by Facebook. It uses a component-based approach to build modular and reusable UI components that manage their own state. Components receive data and callbacks through properties and local state is updated through setState(). The virtual DOM provides efficient re-rendering when state changes by comparing the new representation with the previous one. Everything in React is a component, components receive and manage data through properties and local state, and the declarative nature simplifies complexity.
Discover React
- 2. Questions?
- 3. react Hello
- 4. react a library to build user interfaces by Facebook
- 5. 2013 may
- 7. 2013 open source may 2011 production
- 8. facebook
- 12. battle tested
- 15. Brace yourself
- 16. Brace yourself
- 18. html + js
- 19. Mixing concerns == html + js
- 21. js coupled to html inevitably
- 22. highly cohesive maybe? js coupled to html inevitably
- 27. open mind keep an assumptions will be challenged
- 28. YAWODS? Why should I learn
- 29. YAWODS? Why should I learn yet another way of doing stuff
- 33. explicit over implicit always seek predictability declarative over imperative keep complexity accidental low
- 34. react pillars
- 41. todo app
- 45. let’s talk about jsx expressions - events - styles jsx looks like an abomination
- 47. How do we pass data to components?
- 48. Two kinds of data props & state
- 49. this.props
- 51. immutable can’t touch it makes tracking down bugs easier very easy to reason about props passed from parent this.props to read stateless component
- 52. How data flows
- 53. How data flows props passed from parent pass callbacks to setup a simple communication mechanism
- 54. this.state
- 55. mutable State created inside comp this.state to read stateful component this.setstate to write
- 56. How data flows
- 57. How data flows
- 58. How data flows state can become props state is private by default data flows down callbacks flow up
- 59. props immutable passed from parent stateless comp. state mutable created inside comp. stateful comp. this.props to read this.state to read this.setState() to write why?
- 61. is evil mutable state source of complexity is evil because
- 62. ok cool but… data changes? what happens when
- 63. React
- 70. is evil mutable state source of complexity is evil remember?
- 72. every time setState() re-render everything
- 74. every time setState() re-render simpler everything mental model re-render…
- 75. every time setState() re-render simpler everything mental model Wat?re-render…
- 76. virtual dom to the rescue
- 77. VDOM facts
- 78. render return virtual dom… VDOM facts
- 79. render return virtual dom… …an in-memory, lightweight representation of the DOM VDOM facts
- 80. render return virtual dom… …an in-memory, lightweight representation of the DOM react is write-only to the DOM VDOM facts
- 81. render()
- 83. state describe introduction to reactjs
- 84. for every change of state describe introduction to reactjs
- 85. for every change of state describe the whole user interface introduction to reactjs
- 86. data
- 87. render(data)
- 90. 1. everything is a component Recap 3. think in state, DOM will follow 4. virtual dom is awesome 2. how data flows
- 91. flux Wait there’s more isomorphic app immutable-js relay-graphql css in js baobab react-native
- 92. time coding react playground discover react @apericoder clone and play! discover react @Bologna JS