Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony Cat 2016)
Starting with Reactjs
-
Upload
thinh-voxuan -
Category
Technology
-
view
544 -
download
0
Transcript of 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