sip-of-reactjs

Check bit.ly/sip-of-reactjs

Transcript

1. Sip of React.JS Prathamesh Sonpatki @_cha1tanya
3. Agenda http://bit.ly/sip-of-reactjs
4. Open Library Search Project
5. React
6. Build UI
7. V in MVC
8. Simple
9. Declarative
10. if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader();
11. if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader(); if encodingCompleted <header>Encoding Completed</header> else <div>Loading…</div>
12. Unconventional ideas
13. Hello World
14. "The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application" Justin Meyer, author of CanJS
15. Components
16. Component is fn()
17. Reusable
18. Composable
19. Separation of concerns
20. Let’s look closely
21. ಠ_ಠ
22. JSX
24. JSX is like a healthy vegetable that tastes like decadent chocolate cake. You feel guilty, but it’s good. Eric Elliot
25. Give it 5 minutes https://signalvnoise.com/posts/3124- give-it-five-minutes
26. One book at a time
27. No templates
28. Any sufficiently complicated templating language contains an ad hoc, informally-specified, bug-ridden, slow implementation of a turing complete programming language. - Jasim A Basheer
29. List of books
30. React === JavaScript #=> true
31. Managing Data
32. Data changing over time is root of evil Pete Hunt
33. Props
34. Immutable
35. One way data flow
36. Parent to Child
37. Child to Parent ????
38. propTypes
39. State
40. State is internal
41. getInitialState()
42. Responding to state changes
43. setState()
44. Refresh
45. Re-Rendering the component
46. Re-Rendering the component tree
47. Will it be too slow?
48. Virtual DOM
49. Diff
50. Minimal set of changes
51. Batch updates
52. Nothing is new!
53. Component Lifecycle hooks
54. componentWillMount componentDidMount componentWillReceiveProps componentWillUnmount componentDidUnmount
55. Some patterns
56. Avoid state as much as possible
57. props > state
58. Dumb components
59. Learning Curve
60. Just JavaScript
61. Just JavaScript & JSX
62. Just JavaScript
63. Easy to sneak into existing projects
64. Let me know your experience!
65. Thanks! @_cha1tanya @BigBinary