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

13. None

14. Virtual DOM ? ?

15. None

16. JSX ? ?

17. None

18. Controller View

19. None

20. https:/ /babeljs.io

21. One Way DataFlow ? ?

22. None

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

34. None

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?