SlideShare a Scribd company logo
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
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/

More Related Content

PDF
The Beauty of BAD code
PDF
Rise of Container (RoC)
PDF
SCK :: Scrum is NOT Enough
PDF
Unhappiness Developer
PDF
Software Development Trends 2017 at IMC
PDF
Design pattern with Java 8
PDF
Working with branch
PDF
Introduction to NoSQL
The Beauty of BAD code
Rise of Container (RoC)
SCK :: Scrum is NOT Enough
Unhappiness Developer
Software Development Trends 2017 at IMC
Design pattern with Java 8
Working with branch
Introduction to NoSQL

Similar to React in the right way (13)

PDF
Meetup :: Update Elastic Stack 5.0
PDF
Cloud Native App
PDF
Next.js web development.pdfNext.js web development.pdfNext.js web development...
PDF
Sck Mobile Application Security
PDF
Web Programming for education class - all slides
PDF
Continuous Delivery with fastlane
PDF
การสร้างเอกสาร Rdfs ของ University Taxonomy และ การ Query โดยใช้ Sesame
PDF
Next.js web development.pdfNext.js web development.pdfNext.js web development...
PPT
Web Developer study Guideline for Starter
PDF
เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น
PDF
รู้สิ่งใดไม่สู้...รู้งี้....
PDF
BUGDAY 2014 :: ทำดีดี
PDF
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
Meetup :: Update Elastic Stack 5.0
Cloud Native App
Next.js web development.pdfNext.js web development.pdfNext.js web development...
Sck Mobile Application Security
Web Programming for education class - all slides
Continuous Delivery with fastlane
การสร้างเอกสาร Rdfs ของ University Taxonomy และ การ Query โดยใช้ Sesame
Next.js web development.pdfNext.js web development.pdfNext.js web development...
Web Developer study Guideline for Starter
เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น
รู้สิ่งใดไม่สู้...รู้งี้....
BUGDAY 2014 :: ทำดีดี
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
Ad

More from Somkiat Puisungnoen (20)

PDF
Next of Java 2022
PDF
Sck spring-reactive
PDF
Part 2 :: Spring Boot testing
PDF
vTalk#1 Microservices with Spring Boot
PDF
Lesson learned from React native and Flutter
PDF
Angular :: basic tuning performance
PDF
Shared code between projects
PDF
Distributed Tracing
PDF
Manage data of service
PDF
RobotFramework Meetup at Thailand #2
PDF
Visual testing
PDF
Wordpress for Newbie
PDF
Sck Agile in Real World
PDF
Clean you code
PDF
SCK Firestore at CNX
PDF
Git as NoSQL
PDF
PDF
Automation test for Android
PDF
Secure Test-Driven Development
Next of Java 2022
Sck spring-reactive
Part 2 :: Spring Boot testing
vTalk#1 Microservices with Spring Boot
Lesson learned from React native and Flutter
Angular :: basic tuning performance
Shared code between projects
Distributed Tracing
Manage data of service
RobotFramework Meetup at Thailand #2
Visual testing
Wordpress for Newbie
Sck Agile in Real World
Clean you code
SCK Firestore at CNX
Git as NoSQL
Automation test for Android
Secure Test-Driven Development
Ad

React in the right way