SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
React Components,
Flux, and Isomorphism
Federico Torre
React Components
component = view + controller
• Forget MVC, think components.
• Component = view/html + controller/js
• JSX (sugar syntax that gets compiled to JS)
React Components
React Components
• Very modular .:. reusable
• State based .:. predictable
• Independent .:. testable
• High-performance, thanks to virtual DOM
Listing Card
Photo Gallery
React Components
• Based on state (props and state)
• Uni-directional (re-renders every change*)
• Composable (components in components)
• Reusable (thanks to props)
React Components
React Components
Component Data
• State — contained within a component; used to
track changes within a component
• Props — passed in from parent; think of these as
arguments, or inputs to a component; do not
change
Summarizing Components
• Very modular .:. reusable
• State based .:. predictable
• Independent .:. testable
• High-performance, thanks to virtual DOM
Can pass data down to children via props, but …

what about coordinating parallel components….?
Listing Card
Photo Gallery
Flux
flux = actions + stores
Why Flux?
• Component’s source of truth
• Ties components together
• Flux = Actions + Stores 101 Main St, $3500
102 Main St, $3800
Showing 2 favorites
DataStore
{favorites: [
{title: ‘101 main st’,
price: ‘3500’},
{title: ‘101 main st’,
price: ‘3500’}
]}
Flux
Available app-wide. We use Fluxxor.
• Actions — things to do; api calls for example
• Stores — one source of truth; all app data
• and constants (aka dispatcher)
Using Flux
Flux: Actions
Actions dispatch events
with payloads to stores.
Api calls will usually be
called in actions.
Flux: Stores
Application-wide data
management (aka models)
Components pull data in to
their own state from stores.
Store methods manipulate
store state &emit changes.
Flux: Constants
Literally, just constants.
Using Flux
Using Flux
User clicks
Component
calls action
Action
dispatches
event
Store
receives
event with
payload
Store
updates data,
emits change
Component
re-renders
with new
state
Isomorphism
one code base for client and server rendering
Isomorphism
Client side rendering
• Javascript app running
in browser
• Slow initial load :/
• New pages are quick
— just fetch json data
Server side rendering
• Generate page on
server
• Quick initial page load
• SEO works
• HTTP request for each
new page :/
Why not have both?
We use react-router for client-side & server-side routing.
Isomorphism
On the server, pass
everything to the react
app.
React.renderToString()
— view/html only; no
js/ui.
Isomorphism
react-router routes (key to the whole app)
Router.run() uses this to identify which components to render based on url
Isomorphism
Isomorphism
On the client load, run Router.run() again with the same data.
This time, React.render() — injects view/html + js/ui.
Federico Torre
ftorre104@gmail.com
832-606-0294

Weitere ähnliche Inhalte

Was ist angesagt?

Introduce Flux & react in practices (KKBOX)
Introduce Flux & react in practices (KKBOX)Introduce Flux & react in practices (KKBOX)
Introduce Flux & react in practices (KKBOX)Hsuan Fu Lien
 
A Brief Introduction to React.js
A Brief Introduction to React.jsA Brief Introduction to React.js
A Brief Introduction to React.jsDoug Neiner
 
React-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsANKUSH CHAVAN
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Previewvaluebound
 
Scaling React and Redux at IOOF
Scaling React and Redux at IOOFScaling React and Redux at IOOF
Scaling React and Redux at IOOFVivian Farrell
 
Academy PRO: React JS
Academy PRO: React JSAcademy PRO: React JS
Academy PRO: React JSBinary Studio
 
Learning React - I
Learning React - ILearning React - I
Learning React - IMitch Chen
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about ReactBinh Quan Duc
 
Starting with Reactjs
Starting with ReactjsStarting with Reactjs
Starting with ReactjsThinh VoXuan
 
Breaking the Server-Client Divide with Node.js and React
Breaking the Server-Client Divide with Node.js and ReactBreaking the Server-Client Divide with Node.js and React
Breaking the Server-Client Divide with Node.js and ReactDejan Glozic
 

Was ist angesagt? (20)

Reactjs
Reactjs Reactjs
Reactjs
 
Introduce Flux & react in practices (KKBOX)
Introduce Flux & react in practices (KKBOX)Introduce Flux & react in practices (KKBOX)
Introduce Flux & react in practices (KKBOX)
 
Redux Universal
Redux UniversalRedux Universal
Redux Universal
 
React js
React jsReact js
React js
 
A Brief Introduction to React.js
A Brief Introduction to React.jsA Brief Introduction to React.js
A Brief Introduction to React.js
 
React.js
React.jsReact.js
React.js
 
React-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle Methods
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
 
Using redux
Using reduxUsing redux
Using redux
 
Scaling React and Redux at IOOF
Scaling React and Redux at IOOFScaling React and Redux at IOOF
Scaling React and Redux at IOOF
 
React js
React jsReact js
React js
 
Academy PRO: React JS
Academy PRO: React JSAcademy PRO: React JS
Academy PRO: React JS
 
React js
React jsReact js
React js
 
Learning React - I
Learning React - ILearning React - I
Learning React - I
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about React
 
React js
React jsReact js
React js
 
Starting with Reactjs
Starting with ReactjsStarting with Reactjs
Starting with Reactjs
 
Breaking the Server-Client Divide with Node.js and React
Breaking the Server-Client Divide with Node.js and ReactBreaking the Server-Client Divide with Node.js and React
Breaking the Server-Client Divide with Node.js and React
 
reactJS
reactJSreactJS
reactJS
 

Andere mochten auch

React Router: React Meetup XXL
React Router: React Meetup XXLReact Router: React Meetup XXL
React Router: React Meetup XXLRob Gietema
 
Building Open-Source React Components
Building Open-Source React ComponentsBuilding Open-Source React Components
Building Open-Source React ComponentsZack Argyle
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentationThanh Tuong
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesomeAndrew Hull
 
Flux with RxSwift
Flux with RxSwiftFlux with RxSwift
Flux with RxSwiftYuji Hato
 

Andere mochten auch (6)

React Router: React Meetup XXL
React Router: React Meetup XXLReact Router: React Meetup XXL
React Router: React Meetup XXL
 
Building Open-Source React Components
Building Open-Source React ComponentsBuilding Open-Source React Components
Building Open-Source React Components
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
 
React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
 
Flux with RxSwift
Flux with RxSwiftFlux with RxSwift
Flux with RxSwift
 

Ähnlich wie Introduction to React, Flux, and Isomorphic Apps

Getting started with react & redux
Getting started with react & reduxGetting started with react & redux
Getting started with react & reduxGirish Talekar
 
Spfx with react redux
Spfx with react reduxSpfx with react redux
Spfx with react reduxRajesh Kumar
 
React state management with Redux and MobX
React state management with Redux and MobXReact state management with Redux and MobX
React state management with Redux and MobXDarko Kukovec
 
Building Modern Web Applications using React and Redux
 Building Modern Web Applications using React and Redux Building Modern Web Applications using React and Redux
Building Modern Web Applications using React and ReduxMaxime Najim
 
State Models for React with Redux
State Models for React with ReduxState Models for React with Redux
State Models for React with ReduxStephan Schmidt
 
downloads_introduction to redux.pptx
downloads_introduction to redux.pptxdownloads_introduction to redux.pptx
downloads_introduction to redux.pptxNavneetKumar111924
 
An Overview of the React Ecosystem
An Overview of the React EcosystemAn Overview of the React Ecosystem
An Overview of the React EcosystemFITC
 
React gsg presentation with ryan jung & elias malik
React   gsg presentation with ryan jung & elias malikReact   gsg presentation with ryan jung & elias malik
React gsg presentation with ryan jung & elias malikLama K Banna
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsJennifer Estrada
 
React, Flux and more (p1)
React, Flux and more (p1)React, Flux and more (p1)
React, Flux and more (p1)tuanpa206
 
Reacting to the Isomorphic Buzz
Reacting to the Isomorphic BuzzReacting to the Isomorphic Buzz
Reacting to the Isomorphic BuzzBruce Coddington
 
An Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemAn Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemRami Sayar
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsJeff Durta
 
React + Redux + TypeScript === ♥
React + Redux + TypeScript === ♥React + Redux + TypeScript === ♥
React + Redux + TypeScript === ♥Remo Jansen
 
React + Flux = Joy
React + Flux = JoyReact + Flux = Joy
React + Flux = JoyJohn Need
 
React && React Native workshop
React && React Native workshopReact && React Native workshop
React && React Native workshopStacy Goh
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingBinary Studio
 
Making react part of something greater
Making react part of something greaterMaking react part of something greater
Making react part of something greaterDarko Kukovec
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...MskDotNet Community
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angularGil Fink
 

Ähnlich wie Introduction to React, Flux, and Isomorphic Apps (20)

Getting started with react & redux
Getting started with react & reduxGetting started with react & redux
Getting started with react & redux
 
Spfx with react redux
Spfx with react reduxSpfx with react redux
Spfx with react redux
 
React state management with Redux and MobX
React state management with Redux and MobXReact state management with Redux and MobX
React state management with Redux and MobX
 
Building Modern Web Applications using React and Redux
 Building Modern Web Applications using React and Redux Building Modern Web Applications using React and Redux
Building Modern Web Applications using React and Redux
 
State Models for React with Redux
State Models for React with ReduxState Models for React with Redux
State Models for React with Redux
 
downloads_introduction to redux.pptx
downloads_introduction to redux.pptxdownloads_introduction to redux.pptx
downloads_introduction to redux.pptx
 
An Overview of the React Ecosystem
An Overview of the React EcosystemAn Overview of the React Ecosystem
An Overview of the React Ecosystem
 
React gsg presentation with ryan jung & elias malik
React   gsg presentation with ryan jung & elias malikReact   gsg presentation with ryan jung & elias malik
React gsg presentation with ryan jung & elias malik
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
 
React, Flux and more (p1)
React, Flux and more (p1)React, Flux and more (p1)
React, Flux and more (p1)
 
Reacting to the Isomorphic Buzz
Reacting to the Isomorphic BuzzReacting to the Isomorphic Buzz
Reacting to the Isomorphic Buzz
 
An Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemAn Intense Overview of the React Ecosystem
An Intense Overview of the React Ecosystem
 
Adding a modern twist to legacy web applications
Adding a modern twist to legacy web applicationsAdding a modern twist to legacy web applications
Adding a modern twist to legacy web applications
 
React + Redux + TypeScript === ♥
React + Redux + TypeScript === ♥React + Redux + TypeScript === ♥
React + Redux + TypeScript === ♥
 
React + Flux = Joy
React + Flux = JoyReact + Flux = Joy
React + Flux = Joy
 
React && React Native workshop
React && React Native workshopReact && React Native workshop
React && React Native workshop
 
Academy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & ToolingAcademy PRO: React JS. Redux & Tooling
Academy PRO: React JS. Redux & Tooling
 
Making react part of something greater
Making react part of something greaterMaking react part of something greater
Making react part of something greater
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...Дмитрий Тежельников  «Разработка вэб-решений с использованием Asp.NET.Core и ...
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 

Kürzlich hochgeladen

Test Automation with Gen AI_Final_Presentation
Test Automation with Gen AI_Final_PresentationTest Automation with Gen AI_Final_Presentation
Test Automation with Gen AI_Final_PresentationUiPathCommunity
 
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)Internet 2.0 Conference
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Discussing Potential of Submarine Cables Causing Internet Blackout in Ghana
Discussing Potential of Submarine Cables Causing Internet Blackout in GhanaDiscussing Potential of Submarine Cables Causing Internet Blackout in Ghana
Discussing Potential of Submarine Cables Causing Internet Blackout in GhanaDesmond Israel
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...Anju21552
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 

Kürzlich hochgeladen (13)

Test Automation with Gen AI_Final_Presentation
Test Automation with Gen AI_Final_PresentationTest Automation with Gen AI_Final_Presentation
Test Automation with Gen AI_Final_Presentation
 
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
Internet 2.0 Conference (Event Information Deck | Dec'24 - Mar'25)
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Discussing Potential of Submarine Cables Causing Internet Blackout in Ghana
Discussing Potential of Submarine Cables Causing Internet Blackout in GhanaDiscussing Potential of Submarine Cables Causing Internet Blackout in Ghana
Discussing Potential of Submarine Cables Causing Internet Blackout in Ghana
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
Aligning Testing Objectives with Overall Project Goals for Successful Outcome...
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 

Introduction to React, Flux, and Isomorphic Apps