SlideShare a Scribd company logo
Best Practice
React.js
SEA.YANG @ Jun 2016
data => view
Keynote Speakers
Tom Occhino Nick SchrockPete Hunt
React is much more than a JS library
React is an ecosystem
A fundamental advance for
web and mobile development
— Nick Schrock, React.js Conf 2016
Best Practice
React
ES6
Redux (Flux)
Immutable-JS
React-redux
GraphQL
Relay
Normalizr
Babel
React-router
……
Facebook is investing in javascript
React.js
Jun 2013 Mar 2015
Facebook
Inner Project
Public
Release v15.1.0
May 2016
May 2015
Initial Version
for iOS v0.26.2
May 2016Sep 2015
Initial Version
for Android
Evolution
Native
Oct 2015
v0.14.0
v0.13.0
ES6 support
Windows and Tizen are coming (Microsoft & Samsung)
Instagram
React Features
• Declarative APIs
• Immutable Data
• Virtual DOM
• JSX
• Component-Based
• Server Rendering (isomorphic)
• Learn Once, Write Anywhere
Imperative vs Declarative
How What
Imperative vs Declarative
• Go to kitchen
• Open fridge
• Remove chicken from fridge
• ***
• Bring food to table
• I want a dinner with chicken
Dinner
Imperative vs Declarative
React Component
HTML in javascript
CSS in javascript
Inline Style
Immutability
Shared mutable state is
the root of all evil
- Pete Hunt, React.js Conf 2015
7 Types in Javascript
Type Immutable
null Yes
undefined Yes
Boolean Yes
Number Yes
String Yes
Symbol Yes
Object No
7 Types in Javascript
shouldComponentUpdate
• PureRenderMixin
• Shallow Compare
Solutions
• Deep Clone
• Immutability Helpers
• Immutable.js
Immutable.js
Immutable.js
Redux
Dan Abramov
A predictable state container for javascript apps.
Redux
• Flux May 2014
• Re-frame Dec 2014
• Relay Feb 2015
• Redux May 2015
• Om/next July 2015
Current Solutions
Principle
• Single source for whole application
• State is Immutable (read-only)
• Changes are made with Pure Functions
(previousState, action) => newState
Pure Function
• Simplicity
• Fewer bugs
• Code re-use
• Easier to test
• High performance
https://en.wikipedia.org/wiki/Pure_function
e.g.
• sin(x)
• e => e * 2
Basic Concept
• Action
• Reducer
• Store
Redux Flow
React
Components
Store
Action
Creators
Reducers
e.g. onClick
dispatch(action) (previousState, action)
(newState)(state)
Strict unidirectional data flow
React + Redux
Action Creator
Reducer
GraphQL
A query language and execution engine
tied to any backend service.
GraphQL
GraphQL challenges REST
REST Issues
• Custom endpoint
• Over-fetching
• Multi versions for client
GraphQL Query
Query Response
Relay
Relay
Using GraphQL in React
A javascript framework for
building data-driven React Application
Relay Flow
React
Components
Relay
Store
Action
Server
GraphQl
Response Props
GraphQl
Write
GraphQl Query
Update
+ +
Is the future?
Thanks
Perfection is achieved
not when there is nothing more to add,
but when there is nothing left to take away.
- Tom Occhino

More Related Content

What's hot

React hooks
React hooksReact hooks
React hooks
Sadhna Rana
 
React state
React  stateReact  state
React state
Ducat
 
React new features and intro to Hooks
React new features and intro to HooksReact new features and intro to Hooks
React new features and intro to Hooks
Soluto
 
React Context API
React Context APIReact Context API
React Context API
NodeXperts
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
Ritesh Mehrotra
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
namespaceit
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Samundra khatri
 
React js use contexts and useContext hook
React js use contexts and useContext hookReact js use contexts and useContext hook
React js use contexts and useContext hook
Piyush Jamwal
 
React js
React jsReact js
React js
Rajesh Kolla
 
Redux workshop
Redux workshopRedux workshop
Redux workshop
Imran Sayed
 
Intro to React
Intro to ReactIntro to React
Intro to React
Justin Reock
 
How to go about testing in React?
How to go about testing in React? How to go about testing in React?
How to go about testing in React?
Lisa Gagarina
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation洪 鹏发
 
ReactJS
ReactJSReactJS
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
Nikolaus Graf
 
Important React Hooks
Important React HooksImportant React Hooks
Important React Hooks
Knoldus Inc.
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Maulik Shah
 
React and redux
React and reduxReact and redux
React and redux
Mystic Coders, LLC
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
Bojan Golubović
 

What's hot (20)

React hooks
React hooksReact hooks
React hooks
 
React state
React  stateReact  state
React state
 
React new features and intro to Hooks
React new features and intro to HooksReact new features and intro to Hooks
React new features and intro to Hooks
 
React Context API
React Context APIReact Context API
React Context API
 
Its time to React.js
Its time to React.jsIts time to React.js
Its time to React.js
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
React js use contexts and useContext hook
React js use contexts and useContext hookReact js use contexts and useContext hook
React js use contexts and useContext hook
 
React js
React jsReact js
React js
 
Redux workshop
Redux workshopRedux workshop
Redux workshop
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
How to go about testing in React?
How to go about testing in React? How to go about testing in React?
How to go about testing in React?
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 
ReactJS
ReactJSReactJS
ReactJS
 
React js
React jsReact js
React js
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
Important React Hooks
Important React HooksImportant React Hooks
Important React Hooks
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
React and redux
React and reduxReact and redux
React and redux
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 

Similar to Best Practice-React

React && React Native workshop
React && React Native workshopReact && React Native workshop
React && React Native workshop
Stacy Goh
 
React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
Chenguang ZHANG
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
MskDotNet Community
 
React Native
React NativeReact Native
React Native
Huqiu Liao
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
GreeceJS
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
 
An evening with React Native
An evening with React NativeAn evening with React Native
An evening with React Native
Mike Melusky
 
React introduction
React introductionReact introduction
React introduction
Kashyap Parmar
 
React.js and Redux overview
React.js and Redux overviewReact.js and Redux overview
React.js and Redux overview
Alex Bachuk
 
Introduction to React native
Introduction to React nativeIntroduction to React native
Introduction to React native
Dhaval Barot
 
Intro to React Native
Intro to React NativeIntro to React Native
Intro to React Native
ForSharing
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
20171108 PDN HOL React Basics
20171108 PDN HOL React Basics20171108 PDN HOL React Basics
20171108 PDN HOL React Basics
Rich Ross
 
An Angular developer moving to React
An Angular developer moving to ReactAn Angular developer moving to React
An Angular developer moving to React
Souvik Basu
 
Reactive java programming for the impatient
Reactive java programming for the impatientReactive java programming for the impatient
Reactive java programming for the impatient
Grant Steinfeld
 
React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
Geoff Harcourt
 
A React Journey
A React JourneyA React Journey
A React Journey
LinkMe Srl
 
React for .net developers
React for .net developersReact for .net developers
React for .net developers
macsdickinson
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
500Tech
 

Similar to Best Practice-React (20)

React && React Native workshop
React && React Native workshopReact && React Native workshop
React && React Native workshop
 
React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
 
React Native
React NativeReact Native
React Native
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
 
An evening with React Native
An evening with React NativeAn evening with React Native
An evening with React Native
 
React introduction
React introductionReact introduction
React introduction
 
React.js and Redux overview
React.js and Redux overviewReact.js and Redux overview
React.js and Redux overview
 
Introduction to React native
Introduction to React nativeIntroduction to React native
Introduction to React native
 
Intro to React Native
Intro to React NativeIntro to React Native
Intro to React Native
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
 
20171108 PDN HOL React Basics
20171108 PDN HOL React Basics20171108 PDN HOL React Basics
20171108 PDN HOL React Basics
 
An Angular developer moving to React
An Angular developer moving to ReactAn Angular developer moving to React
An Angular developer moving to React
 
Reactive java programming for the impatient
Reactive java programming for the impatientReactive java programming for the impatient
Reactive java programming for the impatient
 
React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
 
A React Journey
A React JourneyA React Journey
A React Journey
 
React for .net developers
React for .net developersReact for .net developers
React for .net developers
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
 

Best Practice-React