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

823 views

Published on

The productive developer guide to React presentation at the WDC - Web Developer Conference. http://www.web-developer-conference.de

Published in: Technology
  • Be the first to comment

The productive developer guide to React

  1. 1. The productive developer guide to React Maurice de Beijer @mauricedb
  2. 2. Who am I?  Maurice de Beijer  The Problem Solver  MicrosoftAzure MVP  Freelance developer/instructor  Twitter: @mauricedb and @React_Tutorial  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 2© ABL - The Problem Solver
  3. 3. Topics  What is React  Pros and Cons  Create ReactApp  Building blocks  Redux  React-Router  Best practices © ABL - The Problem Solver 3
  4. 4. React is aJavaScript library for building user interfaces - Facebook - © ABL - The Problem Solver 4
  5. 5. Companies Using React  Facebook  Instagram  AirBNB  Cloudflare  Dropbox  KhanAcademy  Netflix  Salesforce  Twitter  Uber  Visa  Wired  Wordpress  And many more… © ABL - The Problem Solver 5
  6. 6. React Tradeoffs Advantages   Large community  Small runtime library  Fast  Stable  Simple and predictable API  Server side rendering  Open source (MIT license)  Dedicated team at Facebook Disadvantages   JavaScript focused  Markup inside JavaScript  Increases memory pressure  Driven by Facebooks needs  Not very opinionated © ABL - The Problem Solver 6
  7. 7. Want opinionated? © ABL - The Problem Solver 7
  8. 8. Components  The basic building block of a React application  Let you split the UI into independent pieces  Think about each component in isolation  A React application is a tree of components  Components manage state  And pass properties to child components as needed © ABL - The Problem Solver 8
  9. 9. Component tree Application Login Main Page Header Billboard Genre List Genre* Movie* Expanded Movie Playing Movie Simplified Netflix SPA © ABL - The Problem Solver 9
  10. 10. JSX  React is normally written using JSX syntax  Combines ECMAScript and markup in one file  Transpiled to regular ECMAScript for the browser  Babel  TypeScript © ABL - The Problem Solver 10
  11. 11. Minimal Example import React, { Component } from "react"; import ReactDOM from "react-dom"; class App extends Component { render() { return (<div className="app"> <h2>ReactJS</h2> <OtherComponent /> </div>); } } ReactDOM.render(<App />, document.getElementById("app")); © ABL - The Problem Solver 11
  12. 12. Getting Started © ABL - The Problem Solver 12
  13. 13. Create React App © ABL - The Problem Solver 13
  14. 14. Create React App  Quickly start on a new React application  Uses best practices, tools and libraries  Babel  Webpack  Webpack development server  Unit testing with Jest  ESLint  Service workers  Add other packages like Redux or React-Router as needed  Use the “eject” option to get full control  At the cost of loosing very easy updates © ABL - The Problem Solver 14
  15. 15. NWB A great alternative to Create ReactApp © ABL - The Problem Solver 15
  16. 16. Props  Props are “parameters” passed into a component  Used to provide a component with data to work with  Can be a function to call back into a parent component  Props should never be modified © ABL - The Problem Solver 16
  17. 17. State  React uses a one way data flow  State is data owned by a single component  Can be passed to a child component as a prop  Updating state in a component using setState() re-renders the component  This triggers child components to re-render © ABL - The Problem Solver 17
  18. 18. Event handling  Very similar to native event handling in HTML  React binds event handlers using camelCase a naming convention  React passes a synthetic event object  The event object is reused between events!  Use stopPropagation() and preventDefault() instead of return false © ABL - The Problem Solver 18
  19. 19. An input form class UserForm extends Component { state = { firstName: "Maurice" }; onChange = e => this.setState({ [e.name]: e.value }); render() { const { firstName } = this.state; return (<form> <InputWithLabel label="First name:" value={firstName} name="firstName" onChange={this.onChange} /> </form>); } } © ABL - The Problem Solver 19
  20. 20. An input component class InputWithLabel extends Component { onChange = e => { const { name, onChange } = this.props; const { value } = e.target; onChange({ name, value }); }; render() { const { label, value } = this.props; return ( <div> <label>{label}</label> <input type="text" value={value} onChange={this.onChange} /> </div> ); } } © ABL - The Problem Solver 20
  21. 21. Redux  Redux is a predictable state container for JavaScript apps  Not just for React  React bindings provided using the “react-redux” package  Created by Dan Abramov  Now a member of the React team at Facebook  MobX is a great alternative to Redux © ABL - The Problem Solver 21
  22. 22. A Redux app import { Provider } from "react-redux"; const App = () => ( <div> <h1>The Movies</h1> <MoviesList /> </div> ); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById("app") ); © ABL - The Problem Solver 22
  23. 23. The Redux store import { combineReducers, createStore } from "redux"; const reducers = combineReducers({ movies // Other reducers }); const store = createStore(reducers); © ABL - The Problem Solver 23
  24. 24. The reducer const movies = function(state = [], action) { switch (action.type) { case "MOVIES-LOADED": return action.movies; default: return state; } }; © ABL - The Problem Solver 24
  25. 25. The action creator const moviesLoaded = (movies) => { return { type: 'MOVIES-LOADED', movies } }; © ABL - The Problem Solver 25
  26. 26. The component class MovieList extends React.Component { // ... } const mapStateToProps = (state) => ({ movies: state.movies }); const mapDispatchToProps = (dispatch) => ({ moviesLoaded: movies => dispatch(moviesLoaded(movies)) }); export default connect( mapStateToProps, mapDispatchToProps)( MovieList); © ABL - The Problem Solver 26
  27. 27. React-Router  The most popular solution for routing in React  Not from the team at Facebook  A collection of navigational components  Use the “react-router-dom” NPM package © ABL - The Problem Solver 27
  28. 28. React-Router import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom"; class App extends Component { render() { return (<BrowserRouter> <div className="container"> <h1>React-Router Example</h1> <Switch> <Route path="/movies" component={MovieList} /> <Route path="/movie/:id" component={MovieEdit} /> <Redirect to="/movies" /> </Switch> </div> </BrowserRouter>); } } © ABL - The Problem Solver 28
  29. 29. Best practices Components  Keep components as small as possible  Only use props and state in the render function  Use pure functional components when possible  Use Presentational and Container components  Validate props in a component using prop-types © ABL - The Problem Solver 29
  30. 30. Best practices Performance  Use immutable objects and PureComponent  Don’t define fat arrow functions in the render © ABL - The Problem Solver 30
  31. 31. Best practices State  Don’t store props or derived data in component state  Only store data in state that is needed for rendering  Use the functional version of setState()  Don’t use Redux or MobX if you don’t need them © ABL - The Problem Solver 31
  32. 32. Conclusion  React is a great library for building user interfaces  It’s fast and easy to use  But not a perfect fit for every application  Using Create React App is a great way to get started  You can “eject” to get full control  A React application is about Components  With State and Props  Redux and MobX are great tools for externalizing state  Remember and use the best practices! © ABL - The Problem Solver 32
  33. 33. Thank you Maurice de Beijer - @mauricedb © ABL - The Problem Solver 33

×