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

Introduction_To_React.pdf

Randy Vianda Putra
April 27, 2019
0
290

 Introduction_To_React.pdf

Randy Vianda Putra

April 27, 2019
Tweet

More Decks by Randy Vianda Putra

See All by Randy Vianda Putra
Step by Step Guide to Becoming Frontend Developer
randyviandaputra
0
220
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
240
Berkarir Sebagai Frontend Developer
randyviandaputra
1
450
Introduction to Full Stack JS
randyviandaputra
1
200
Intro to React 360
randyviandaputra
0
340
Micro_Frontend.pdf
randyviandaputra
2
410
react_native_training.pdf
randyviandaputra
0
280

Featured

See All Featured
Docker and Python
trallard
44
3.3k
A better future with KSS
kneath
238
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
BBQ
matthewcrist
86
9.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
186
10k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k

Transcript

  1. Introduction To React

  2. Randy Vianda Putra, live in Bandung - Software Engineer @Docotel

    - Frontend Engineer @WorkLifeBeyond - Instructor @Cilsy Hello! [email protected] 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?