Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction_To_React.pdf

73eeac32b9932a63ed361f1ff5c5e92a?s=47 Randy Vianda Putra
April 27, 2019
77

 Introduction_To_React.pdf

73eeac32b9932a63ed361f1ff5c5e92a?s=128

Randy Vianda Putra

April 27, 2019
Tweet

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?