This document provides an introduction and overview of ReactJS. It discusses that React is a JavaScript library developed by Facebook and Instagram for building user interfaces. It introduces key React concepts like components, props, state, lifecycles, and differences between imperative and declarative programming. It also covers setting up a basic React project using tools like Webpack and Babel and references additional React resources.

1. Starting with ReactJS
Thinh VoXuan
Sprint 2016

2. • Fullstack developer @ GEEKUp
• Love Javascript
Thinh VoXuan
Starting with ReactJS
2

3. • A Facebook & Instagram collaboration.
• Initial release from 2013
• 37.776 Star in GitHub
• A JAVASCRIPT LIBRARY FOR BUILDING
USER INTERFACES
Short Summary
Starting with ReactJS
3

4. Create new component
Starting with ReactJS
4
Game with: https://facebook.github.io/react/index.html

5. Reverse keywork javascript
•class  className
•for  forHtml
Create new component
Starting with ReactJS
5

6. Create new component
Starting with ReactJS
6
Playground: https://jsfiddle.net/voxuanthinh/w7g5zjLn/1/

7. Reactlize from html
Starting with ReactJS
7

8. Reactlize from html
Starting with ReactJS
8

9. Reactlize from html
Starting with ReactJS
9

10. Virtual DOM
Starting with ReactJS
10

11. • npm install --save react react-dom
• npm install --save-dev babel-core babel-loader babel-
preset-react
html-webpack-plugin webpack webpack-dev-server
• Create folder structure as
Setup first project
Starting with ReactJS
11

12. • Config webpack
Setup first project
Starting with ReactJS
12

13. • Config .babelrc
• Change run script in package.json
Setup first project
Starting with ReactJS
13

14. • Add html to index.html
• Add script to index.js
Setup first project
Starting with ReactJS
14

15. • Add script to index.js
• Then run npm run start. Check your browser with
address localhost:8080
Setup first project
Starting with ReactJS
15

16. • What is Babel?
• What is Webpack ?
Setup first project - Question
Starting with ReactJS
16

17. props
•Pass from Parent
•Updating from parent
Component
•Could pass from Parent to
Child component
props vs state
Starting with ReactJS
17
state
•Initial value from Parent
•self-update via
this.setState()
•Is private property of
component.
props & state
•Input data for render() function of a Component
•Trigger render update

18. props vs state
Starting with ReactJS
18

19. props vs state
Starting with ReactJS
19

20. LifeCycle of Component
Starting with ReactJS
20

21. JQuery
•A Library
•Imperative ways
•What problem with jQuery
style?
Imperative vs Declarative
Starting with ReactJS
21
ReactJS
•A Library
•Declarative ways

22. Container vs Presentation
Starting with ReactJS
22Play ground: https://jsfiddle.net/voxuanthinh/umx2y5yx/2/

23. Container vs Presentation
Starting with ReactJS
23Playground: https://jsfiddle.net/reactjs/n47gckhr/

24. A container does data fetching and then
renders its corresponding sub-component.
That’s it.
Reference:
•https://medium.com/@learnreact/container-components-
c0e67432e005
•https://facebook.github.io/react/docs/thinking-in-react.html
Container vs Presentation
Starting with ReactJS
24

25. React real example
Starting with ReactJS
25

26. React Ecosystem:
•React
•Node.JS
•Routing with react-router
•Flux architecture
•Inline styles
React More….
Starting with ReactJS
26

27. • https://facebook.github.io/
• http://www.reactjsprogram.com/
• http://6.470.scripts.mit.edu/2014/slides/React-MIT.pdf
• https://github.com/uberVU/react-
guide/blob/master/props-vs-state.md
• https://medium.com/@learnreact/container-components-
c0e67432e005
• http://www.slideshare.net/krasimirtsonev3/reactjs-the-
good-the-bad-and-the-ugly
References
Starting with ReactJS
27

28. Question & Answers
Starting with ReactJS
28

29. Thank you
Starting with ReactJS
29