บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
React in the RIGHT way
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Why React ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Solve one problem
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Build large app with data
that change over time
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
How to start ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Let’s start by yourself
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn JS, JSX
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Virtual DOM
Component-driven development
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Virtual DOM
React
Component
Virtual
DOM
Computed
batch DOM
Real
DOM
Auto update 60 fps
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
JSX (JavaScript eXpression)
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Rendering
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Components
Profile
Projects
Project 1
Project 2
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Components
App component
Profile Projects
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Components
App component
Profile Projects
Pass data ?
Pass data ?Pass data ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Components
App component
Profile Projects
Props
PropsProps
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Profile component
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Project Item component
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Projects component
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
App component
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn ECMAScript 6
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Dependency manager
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Welcome to React world
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
https://github.com/facebookincubator/create-react-app
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
$npm install -g create-react-app
$create-react-app my-app
$cd my-app/
$npm start
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
https://github.com/zeit/next.js/
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Routing
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Routing
React Router
https://github.com/rackt/react-router
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Need Routing ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Flux
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Flux
Redux
https://github.com/reactjs/redux
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Need Redux ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Server rendering
https://github.com/reactjs/redux/blob/master/docs/recipes/ServerRendering.md
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Server rendering
Universal
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Server rendering
Universal
Isomorphic
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Need Server rendering ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Slow rendering ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Improve SEO ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
More …
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
React Relay GraphQLRedux
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Data framework
Relay
API gateway
GraphQL
Flux
Event framework
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Finally …
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
How to testing ?
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Static code analysis
Istanbul
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Static code analysis
Test framework
Enzyme
Istanbul
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Static code analysis
System test
Enzyme
Test framework
Istanbul
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Code without tests
is broken by design
— Jacob Kaplan-Moss —
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Finally again !!!
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
React Ecosystem
React Web (Virtual DOM) React Native
React (JSX, Components, JS Styles)
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
React Ecosystem
React Web (Virtual DOM) React Native
React (JSX, Components, JS Styles)
Flux/Redux Relay
GraphQL
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Resources
https://github.com/petehunt/react-howto
https://facebook.github.io/react/

React in the right way