Introduction_To_React.pdf

Transcript

1. Introduction To React
2. Randy Vianda Putra, live in Bandung - Software Engineer @Docotel - Frontend Engineer @WorkLifeBeyond - Instructor @Cilsy Hello! modulloe@gmail.com github.com/randyviandaputra @randyvp
3. Agenda - What is React - Who’s using React - Concept of React - Why React - Fundamental React - Build first app using React
4. Let’s Start
5. What is React ? ?
6. What is React ? A Javascript Library for building UI (User Interfaces), not a framework like Backbone, Angular etc, the V in MVC
7. Who’s using React ? ?
8. Who’s using React ?
9. Concept of React ? ?
10. Concept of React ? Component Virtual DOM JSX One Way DataFlow
11. Component ? ?
12. Build Component, not template
14. Virtual DOM ? ?
16. JSX ? ?
18. Controller View
20. https:/ /babeljs.io
21. One Way DataFlow ? ?
23. Why React ? ?
24. “ LEARN ONCE, WRITE ANYWHERE 24
25. “ VIRTUAL DOM IS CRAZY FAST! Makes re-rendering on every change fast 25
26. “ Component Based Is the future of web development 26
27. “ React dev tools React Chrome extension make debugging so much easier 27
28. “ Easy to read and understand views 28
29. “ Facebook are maintaining this project 29
30. https:/ /github.com/adam-golab/react-developer-roadmap
31. Install React $ npm install -g create-react-app $ create-react-app todoapp-devtalk
32. Fundamentals React ?
33. Component Stateless (function) Statefull (class) Represent a piece of UI
35. Props - Passed down to component from parent component and represents data for the component - accessed via this.props
36. State - Represents internal state of the component - Accessed via this.state - When a component's state data changes, the rendered markup will be updated by re-invoking render() method
37. Let’s Live Coding
38. Source Code https:/ /github.com/randyviandaputra/todoapp-devtalk
39. 39 Thanks Any questions?