Submit Search
Upload
The Productive Developer's Guide to React
•
3 likes
•
4,298 views
AI-enhanced title
Maurice De Beijer [MVP]
Follow
Slides from the Reactive-Amsterdam meetup on January 17th 2017.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 27
Download now
Download to read offline
Recommended
The productive developer guide to React
The productive developer guide to React
Maurice De Beijer [MVP]
Building UWP apps with React-Native
Building UWP apps with React-Native
Maurice De Beijer [MVP]
Tech Talk on ReactJS
Tech Talk on ReactJS
Atlogys Technical Consulting
How to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular Framework
RapidValue
Introduction to React Native
Introduction to React Native
dvcrn
Say Hello to React day2 presentation
Say Hello to React day2 presentation
Smile Gupta
Microservices for the Masses with Spring Boot, JHipster, and JWT - J-Spring 2017
Microservices for the Masses with Spring Boot, JHipster, and JWT - J-Spring 2017
Matt Raible
Reactjs workshop
Reactjs workshop
Ahmed rebai
Recommended
The productive developer guide to React
The productive developer guide to React
Maurice De Beijer [MVP]
Building UWP apps with React-Native
Building UWP apps with React-Native
Maurice De Beijer [MVP]
Tech Talk on ReactJS
Tech Talk on ReactJS
Atlogys Technical Consulting
How to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular Framework
RapidValue
Introduction to React Native
Introduction to React Native
dvcrn
Say Hello to React day2 presentation
Say Hello to React day2 presentation
Smile Gupta
Microservices for the Masses with Spring Boot, JHipster, and JWT - J-Spring 2017
Microservices for the Masses with Spring Boot, JHipster, and JWT - J-Spring 2017
Matt Raible
Reactjs workshop
Reactjs workshop
Ahmed rebai
Microservices for the Masses with Spring Boot, JHipster, and JWT - Devoxx UK...
Microservices for the Masses with Spring Boot, JHipster, and JWT - Devoxx UK...
Matt Raible
learn what React JS is & why we should use React JS .
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
Grails Spring Boot
Grails Spring Boot
TO THE NEW | Technology
React js Online Training
React js Online Training
Learntek1
React JS
React JS
Software Infrastructure
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv Startup Club
Internal workshop react-js-mruiz
Internal workshop react-js-mruiz
Miguel Ruiz Rodriguez
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
Vue.js Use Cases
Vue.js Use Cases
GlobalLogic Ukraine
Angular based enterprise level frontend architecture
Angular based enterprise level frontend architecture
Himanshu Tamrakar
Reactjs
Reactjs
Neha Sharma
Say hello to react js - Day 1
Say hello to react js - Day 1
Smile Gupta
Meteor.js for DOers
Meteor.js for DOers
ShavonnahTiera
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
stan229
ReactJs
ReactJs
Sahana Banerjee
Java microservicesspringbootcasestudy2
Java microservicesspringbootcasestudy2
Subramanyam Vemala
Micro Frontends
Micro Frontends
Spyros Ioakeimidis
React js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
Web worker in your angular application
Web worker in your angular application
Suresh Patidar
Intro To React Native
Intro To React Native
FITC
Intro to react native
Intro to react native
ModusJesus
More Related Content
What's hot
Microservices for the Masses with Spring Boot, JHipster, and JWT - Devoxx UK...
Microservices for the Masses with Spring Boot, JHipster, and JWT - Devoxx UK...
Matt Raible
learn what React JS is & why we should use React JS .
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
Grails Spring Boot
Grails Spring Boot
TO THE NEW | Technology
React js Online Training
React js Online Training
Learntek1
React JS
React JS
Software Infrastructure
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv Startup Club
Internal workshop react-js-mruiz
Internal workshop react-js-mruiz
Miguel Ruiz Rodriguez
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
Vue.js Use Cases
Vue.js Use Cases
GlobalLogic Ukraine
Angular based enterprise level frontend architecture
Angular based enterprise level frontend architecture
Himanshu Tamrakar
Reactjs
Reactjs
Neha Sharma
Say hello to react js - Day 1
Say hello to react js - Day 1
Smile Gupta
Meteor.js for DOers
Meteor.js for DOers
ShavonnahTiera
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
stan229
ReactJs
ReactJs
Sahana Banerjee
Java microservicesspringbootcasestudy2
Java microservicesspringbootcasestudy2
Subramanyam Vemala
Micro Frontends
Micro Frontends
Spyros Ioakeimidis
React js - The Core Concepts
React js - The Core Concepts
Divyang Bhambhani
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
Web worker in your angular application
Web worker in your angular application
Suresh Patidar
What's hot
(20)
Microservices for the Masses with Spring Boot, JHipster, and JWT - Devoxx UK...
Microservices for the Masses with Spring Boot, JHipster, and JWT - Devoxx UK...
learn what React JS is & why we should use React JS .
learn what React JS is & why we should use React JS .
Grails Spring Boot
Grails Spring Boot
React js Online Training
React js Online Training
React JS
React JS
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Lviv MD Day 2015 Іван Лаврів "Mobile development with React Native"
Internal workshop react-js-mruiz
Internal workshop react-js-mruiz
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
Vue.js Use Cases
Vue.js Use Cases
Angular based enterprise level frontend architecture
Angular based enterprise level frontend architecture
Reactjs
Reactjs
Say hello to react js - Day 1
Say hello to react js - Day 1
Meteor.js for DOers
Meteor.js for DOers
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
ReactJs
ReactJs
Java microservicesspringbootcasestudy2
Java microservicesspringbootcasestudy2
Micro Frontends
Micro Frontends
React js - The Core Concepts
React js - The Core Concepts
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Web worker in your angular application
Web worker in your angular application
Viewers also liked
Intro To React Native
Intro To React Native
FITC
Intro to react native
Intro to react native
ModusJesus
React Native
React Native
Craig Jolicoeur
Baromètre IDAOS Lab "Digital & Social" 3ème édition 2015
Baromètre IDAOS Lab "Digital & Social" 3ème édition 2015
Franck Perrier
Slide online
Slide online
ilfattoquotidiano.it
How to Earn the Attention of Today's Buyer
How to Earn the Attention of Today's Buyer
HubSpot
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
HubSpot
What is Inbound Recruiting?
What is Inbound Recruiting?
HubSpot
Add the Women Back: Wikipedia Edit-a-Thon
Add the Women Back: Wikipedia Edit-a-Thon
HubSpot
Isolated React Js components
Isolated React Js components
Abe García
深入淺出RoR
深入淺出RoR
Eric Lee
React native. Bridge From Web To Mobile. Intro
React native. Bridge From Web To Mobile. Intro
Igor Izraylevych
React Native Intro
React Native Intro
Julia Vi
Introduction to React Native
Introduction to React Native
Sambhu Lakshmanan
React Native + Redux
React Native + Redux
Ch Rick
Introduzione al Regolamento Generale sulla Protezione dei Dati dell’ Unione E...
Introduzione al Regolamento Generale sulla Protezione dei Dati dell’ Unione E...
Maurizio Taglioretti
Navigation in React Native
Navigation in React Native
Sambhu Lakshmanan
Styling React Native Applications
Styling React Native Applications
Jan Maršíček
Sintesis informativa 28 de marzo 2017
Sintesis informativa 28 de marzo 2017
megaradioexpress
1.2.3 Система напольных шкафов RAM block
1.2.3 Система напольных шкафов RAM block
Igor Golovin
Viewers also liked
(20)
Intro To React Native
Intro To React Native
Intro to react native
Intro to react native
React Native
React Native
Baromètre IDAOS Lab "Digital & Social" 3ème édition 2015
Baromètre IDAOS Lab "Digital & Social" 3ème édition 2015
Slide online
Slide online
How to Earn the Attention of Today's Buyer
How to Earn the Attention of Today's Buyer
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
Why People Block Ads (And What It Means for Marketers and Advertisers) [New R...
What is Inbound Recruiting?
What is Inbound Recruiting?
Add the Women Back: Wikipedia Edit-a-Thon
Add the Women Back: Wikipedia Edit-a-Thon
Isolated React Js components
Isolated React Js components
深入淺出RoR
深入淺出RoR
React native. Bridge From Web To Mobile. Intro
React native. Bridge From Web To Mobile. Intro
React Native Intro
React Native Intro
Introduction to React Native
Introduction to React Native
React Native + Redux
React Native + Redux
Introduzione al Regolamento Generale sulla Protezione dei Dati dell’ Unione E...
Introduzione al Regolamento Generale sulla Protezione dei Dati dell’ Unione E...
Navigation in React Native
Navigation in React Native
Styling React Native Applications
Styling React Native Applications
Sintesis informativa 28 de marzo 2017
Sintesis informativa 28 de marzo 2017
1.2.3 Система напольных шкафов RAM block
1.2.3 Система напольных шкафов RAM block
Similar to The Productive Developer's Guide to React
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Maurice De Beijer [MVP]
From zero to hero with the reactive extensions for java script
From zero to hero with the reactive extensions for java script
Maurice De Beijer [MVP]
React & The Art of Managing Complexity
React & The Art of Managing Complexity
Ryan Anklam
jsDay 2016 recap
jsDay 2016 recap
Giorgio Cefaro
Oracle APEX migration to 5.1 - Our experience
Oracle APEX migration to 5.1 - Our experience
Lino Schildenfeld
RxJS Operators - Real World Use Cases (FULL VERSION)
RxJS Operators - Real World Use Cases (FULL VERSION)
Tracy Lee
Секретный доклад о React Router - OdessaJS 2014
Секретный доклад о React Router - OdessaJS 2014
Andrey Listochkin
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Andrew Rota
Functional UIs with Java 8 and Vaadin JavaOne2014
Functional UIs with Java 8 and Vaadin JavaOne2014
hezamu
Cycle.js - A functional reactive UI framework
Cycle.js - A functional reactive UI framework
Nikos Kalogridis
Cycle.js - Functional reactive UI framework (Nikos Kalogridis)
Cycle.js - Functional reactive UI framework (Nikos Kalogridis)
GreeceJS
Reactive java programming for the impatient
Reactive java programming for the impatient
Grant Steinfeld
Rx java in action
Rx java in action
Pratama Nur Wijaya
How to unit test your React/Redux app
How to unit test your React/Redux app
Alin Pandichi
Luis Atencio on RxJS
Luis Atencio on RxJS
Luis Atencio
Architecture for scalable Angular applications
Architecture for scalable Angular applications
Paweł Żurowski
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
Ben Teese
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Provectus
Rxjs marble-testing
Rxjs marble-testing
Christoffer Noring
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
Visual Engineering
Similar to The Productive Developer's Guide to React
(20)
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for java script
From zero to hero with the reactive extensions for java script
React & The Art of Managing Complexity
React & The Art of Managing Complexity
jsDay 2016 recap
jsDay 2016 recap
Oracle APEX migration to 5.1 - Our experience
Oracle APEX migration to 5.1 - Our experience
RxJS Operators - Real World Use Cases (FULL VERSION)
RxJS Operators - Real World Use Cases (FULL VERSION)
Секретный доклад о React Router - OdessaJS 2014
Секретный доклад о React Router - OdessaJS 2014
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
Functional UIs with Java 8 and Vaadin JavaOne2014
Functional UIs with Java 8 and Vaadin JavaOne2014
Cycle.js - A functional reactive UI framework
Cycle.js - A functional reactive UI framework
Cycle.js - Functional reactive UI framework (Nikos Kalogridis)
Cycle.js - Functional reactive UI framework (Nikos Kalogridis)
Reactive java programming for the impatient
Reactive java programming for the impatient
Rx java in action
Rx java in action
How to unit test your React/Redux app
How to unit test your React/Redux app
Luis Atencio on RxJS
Luis Atencio on RxJS
Architecture for scalable Angular applications
Architecture for scalable Angular applications
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
The Return of JavaScript: 3 Open-Source Projects that are driving JavaScript'...
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Rxjs marble-testing
Rxjs marble-testing
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
More from Maurice De Beijer [MVP]
Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
Maurice De Beijer [MVP]
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
Maurice De Beijer [MVP]
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Maurice De Beijer [MVP]
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
Maurice De Beijer [MVP]
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
Maurice De Beijer [MVP]
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
Maurice De Beijer [MVP]
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Maurice De Beijer [MVP]
Why I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
Building reliable web applications using Cypress
Building reliable web applications using Cypress
Maurice De Beijer [MVP]
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
Maurice De Beijer [MVP]
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
Maurice De Beijer [MVP]
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
Maurice De Beijer [MVP]
Why I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
The new React
The new React
Maurice De Beijer [MVP]
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Maurice De Beijer [MVP]
Why I am hooked on the future of React
Why I am hooked on the future of React
Maurice De Beijer [MVP]
I am hooked on React
I am hooked on React
Maurice De Beijer [MVP]
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
Maurice De Beijer [MVP]
Create flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API's
Maurice De Beijer [MVP]
More from Maurice De Beijer [MVP]
(20)
Practice TypeScript Techniques Building React Server Components App
Practice TypeScript Techniques Building React Server Components App
A foolproof Way to Estimate a Software Project
A foolproof Way to Estimate a Software Project
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Build reliable Svelte applications using Cypress
Concurrent Rendering Adventures in React 18
Concurrent Rendering Adventures in React 18
Building reliable applications with React, C#, and Azure
Building reliable applications with React, C#, and Azure
Building large and scalable mission critical applications with React
Building large and scalable mission critical applications with React
Building Reliable Applications Using React, .NET & Azure
Building Reliable Applications Using React, .NET & Azure
Why I am hooked on the future of React
Why I am hooked on the future of React
Building reliable web applications using Cypress
Building reliable web applications using Cypress
Getting started with React Suspense and concurrent rendering
Getting started with React Suspense and concurrent rendering
React suspense, not just for Alfred Hitchcock
React suspense, not just for Alfred Hitchcock
From zero to hero with the Reactive extensions for JavaScript
From zero to hero with the Reactive extensions for JavaScript
Why I am hooked on the future of React
Why I am hooked on the future of React
The new React
The new React
From zero to hero with the reactive extensions for JavaScript
From zero to hero with the reactive extensions for JavaScript
Why I am hooked on the future of React
Why I am hooked on the future of React
I am hooked on React
I am hooked on React
Create flexible React applications using GraphQL apis
Create flexible React applications using GraphQL apis
Create flexible react applications using GraphQL API's
Create flexible react applications using GraphQL API's
Recently uploaded
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Wonjun Hwang
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
BookNet Canada
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April Automation LPDG
MarianaLemus7
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Enterprise Knowledge
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Fwdays
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
Softradix Technologies
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
shyamraj55
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
BookNet Canada
Recently uploaded
(20)
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April Automation LPDG
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
The Productive Developer's Guide to React
1.
The Productive Developer Guide
to React
2.
Maurice de Beijer The
Problem Solver Microsoft Azure MVP Freelance developer/instructor Twitter: @mauricedb & @React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: maurice.de.beijer@gmail.com Who am I?
3.
Is React reactive?
4.
RxJS map operator
5.
const Rx = require('rxjs'); const fetch = require('node‐fetch'); const url = 'http://api.themoviedb.org/3/movie/top_rated'; let movies = []; Rx.Observable .range(1, 5) .concatMap(page => fetch(`${url}?api_key=${process.env.API_KEY}&page=${page}`)) .flatMap(rsp => rsp.json()) .map(json => json.results) .scan((prev, current) => prev.concat(current)) .subscribe(item => movies = item); RxJS example
6.
import React from 'react'; const Greeter = (props) => { return ( <div> Hello {props.name} </div> ); }; export default Greeter; A functional React
component
7.
WHAT IS REACT?
8.
React is a
JavaScript library for building user interfaces - Facebook
9.
Create-React-App The o cial
React starter project
10.
JSX is the
language of choice It combines ECMAScript and HTML markup
11.
import React from 'react'; const Greeter = (props) => { return ( <div> Hello {props.name} </div> ); }; export default Greeter; JSX = Code
with markup
12.
ComponentsThe building blocks
of a React application
13.
React Components example 1. import React, {Component} from 'react'; 2. import {path} from './config'; 3. 4. class Billboard extends Component { 5. render() { 6. const movie = this.props.movie; 7. 8. return ( 9. <div className="row"> 10. <div className="title"> 11. {movie.title} 12. </div>
14.
import React from 'react'; import ReactDOM from 'react‐dom'; import App from './app'; ReactDOM.render(React.createElement(App), document.getElementById('app')); ReactDOMReactDOM renders the
components into the DOM
15.
Components & Props Props
are inputs to components They should never be updated
16.
Parent Components example 1. import React, { PropTypes } from 'react'; 2. import Movie from './movie'; 3. 4. const MovieList = ({ movies }) => { 5. return ( 6. <div className="movie‐list"> 7. {movies.map(movie => ( 8. <Movie key={movie.id} 9. movie={movie} 10. />))} 11. </div> 12. );
17.
Child Components example 1. import React, { Component, PropTypes } from 'react'; 2. import {path} from './config'; 3. 4. class Movie extends Component { 5. render() { 6. const { movie } = this.props; 7. 8. return ( 9. <div className="movie"> 10. <div className="title"> 11. {movie.title}
18.
Components & State Internal
to a component Can be used as props for a child component
19.
Stateful Components example 1. import React, { Component } from 'react'; 2. import MovieList from './movie‐list'; 3. 4. class MovieContainer extends Component { 5. constructor(props) { 6. super(props); 7. 8. this.state = { 9. movies: null, 10. }; 11. } 12.
20.
ReduxA predictable state
container for JavaScript apps
21.
Redux principles Single source
of truth State is read-only Changes are made with pure functions
22.
Redux reducer 1. function todos(state = [], action) { 2. switch (action.type) { 3. case ADD_TODO: 4. return [ 5. ...state, 6. { 7. text: action.text, 8. completed: false 9. } 10. ] 11. case TOGGLE_TODO: 12. return state.map((todo, index) => {
23.
MobXSimple, scalable state
management
24.
MobX principles Single source
of truth State is observable React components are observers
25.
MobX observers 1. import React, { PropTypes } from 'react'; 2. import { observable } from 'mobx' 3. import { observer } from 'mobx‐react'; 4. import Movie from './movie'; 5. 6. class MovieStore { 7. @observable movies = []; 8. @observable directors = []; 9. } 10. 11. 12. const MovieList = observer(({ movies }) => {
26.
Is React reactive?
NO! But it's a great library for building user interfaces And MobX is reactive!
27.
@mauricedb
Download now