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

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

Reverse keywork javascript•class className•for forHtml


5


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

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

Reactlize from htmlStarting with ReactJS

7


8


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


12

• Config .babelrc

• Change run script in package.json


13

• Add html to index.html

• Add script to index.js


14

• Add script to index.js

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


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


18


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/

https://jsfiddle.net/voxuanthinh/umx2y5yx/2/


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


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

starting with reactjs

Technology