starting with reactjs

Starting with ReactJS

Thinh VoXuan Sprint 2016

• Fullstack developer @ GEEKUp• Love Javascript

Thinh VoXuanStarting with ReactJS

2

• A Facebook & Instagram collaboration.

• Initial release from 2013• 37.776 Star in GitHub• A JAVASCRIPT LIBRARY FOR BUILDING

USER INTERFACES

Short SummaryStarting with ReactJS

3

Create new componentStarting with ReactJS

4

Game with: https://facebook.github.io/react/index.html

Reverse keywork javascript•class className•for forHtml

Create new componentStarting with ReactJS

5

Create new componentStarting with ReactJS

6Playground: https://jsfiddle.net/voxuanthinh/w7g5zjLn/1/

Reactlize from htmlStarting with ReactJS

7

Reactlize from htmlStarting with ReactJS

8

Reactlize from htmlStarting with ReactJS

9

Virtual DOMStarting with ReactJS

10

• npm install --save react react-dom• npm install --save-dev babel-core babel-loader

babel-preset-reacthtml-webpack-plugin webpack webpack-dev-server

• Create folder structure as

Setup first projectStarting with ReactJS

11

• Config webpack

Setup first projectStarting with ReactJS

12

• Config .babelrc

• Change run script in package.json

Setup first projectStarting with ReactJS

13

• Add html to index.html

• Add script to index.js

Setup first projectStarting with ReactJS

14

• Add script to index.js

• Then run npm run start. Check your browser with address localhost:8080

Setup first projectStarting with ReactJS

15

• What is Babel?• What is Webpack ?

Setup first project - QuestionStarting with ReactJS

16

props•Pass from Parent•Updating from parent Component•Could pass from Parent to Child component

props vs stateStarting 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

props vs stateStarting with ReactJS

18

props vs stateStarting with ReactJS

19

LifeCycle of ComponentStarting with ReactJS

20

JQuery•A Library•Imperative ways

•What problem with jQuery style?

Imperative vs DeclarativeStarting with ReactJS

21

ReactJS•A Library•Declarative ways

Container vs PresentationStarting with ReactJS

22Play ground: https://jsfiddle.net/voxuanthinh/umx2y5yx/2/

Container vs PresentationStarting with ReactJS

23Playground: https://jsfiddle.net/reactjs/n47gckhr/

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 PresentationStarting with ReactJS

24

React real exampleStarting with ReactJS

25

React Ecosystem:•React•Node.JS•Routing with react-router•Flux architecture•Inline styles

React More….Starting with ReactJS

26

• 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

ReferencesStarting with ReactJS

27

Question & AnswersStarting with ReactJS

28

Thank youStarting with ReactJS

29