Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The productive developer guide to React

324 views

Published on

Presentation on the productive developer guide to React at the SELA Developer Practice conference

Published in: Technology
  • Be the first to comment

The productive developer guide to React

  1. 1. The Productive Developer Guide to React
  2. 2. Maurice de Beijer The Problem Solver Microsoft Azure MVP Freelance developer/instructor Twitter: @mauricedb Web: http://www.TheProblemSolver.nl E-mail: maurice.de.beijer@gmail.com WHO AM I?
  3. 3. WHAT IS REACT?
  4. 4. React is a JavaScript library for building user interfaces - Facebook
  5. 5. WHERE DOES REACT COME FROM? Created at FacebookPowers Facebook, Instagram, AirBNB and many more
  6. 6. REACT VS ANGULAR
  7. 7. ANGULAR 2 IS OPINIONATED
  8. 8. REACT NOT SO MUCH
  9. 9. CREATE-REACT-APP The o᪑cial React starter project
  10. 10. JSX IS THE LANGUAGE OF CHOICE It combines ECMAScript and HTML markup
  11. 11. React JSX   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. 12. COMPONENTSThe building blocks of a React application
  13. 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} 
  14. 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. 15. SERVER SIDE RENDERING ReactDOMServer can render the components as a string Useful for server side rendering and SEO
  16. 16. COMPONENTS & PROPS Props are inputs to components They should never be updated
  17. 17. 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> 
  18. 18. 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} 
  19. 19. COMPONENTS & STATE Internal to a component Can be used as props for a child component
  20. 20. 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.   } 
  21. 21. PRESENTATION & CONTAINER COMPONENTS Keep responsibilities separate
  22. 22. PRESENTATION COMPONENTS Only concerned with rendering elements on screen Takes all the input data as props
  23. 23. CONTAINER COMPONENTS Do not directly render any elements on screen Contain all state management logic Better yet: Use Redux or MobX
  24. 24. EVENT HANDLING DOM events are exposed to components
  25. 25. Event handling example   1. import React, { Component, PropTypes } from  'react';    2.     3. class LoginPage extends Component {    4.   constructor(props) {    5.     super(props);    6.     7.     this.state = {    8.       name: '',    9.     };   10.    11.     this.onNameChange =  
  26. 26. Maurice de Beijer - @mauricedb

×