Building Web Applications with React 16
Course 2322
4 DAY COURSE

React 16 is an open-source JavaScript library from Facebook used for building HTML5 web applications. In this training course, you learn how to develop a complete application using React 16 by building high-performance User Interfaces (UIs) with classes and JSX components and creating Redux applications, which provide complementary architectural patterns to construct client-side application functionality.

Building Web Applications with React 16 Benefits

• Building Web Applications Course Benefits

  • Create an isomorphic web application using React
  • Compose a UI using React JavaScript and JSX components
  • Integrate React forms with Ajax and back-end REST services
  • Apply the Container/Presentational architecture to create applications
  • Integrate a variety of React extensions to create a modern application
  • Continue learning and face new challenges with after-course one-on-one instructor coaching

• Building Web Applications Course Prerequisites

  Students should have experience developing web pages with JavaScript, HTML, and CSS.

Building Web Applications Instructor-Led Training Outline

Module 1: Introduction and Overview

• Features of React and Redux
• Why the Virtual DOM makes React run fast
• Configuring the development and build environment
• Incorporating third-party components

Module 2: Designing Custom React Components

• Employing React.createElement() and React.DOM.render()
• Support well-designed components by leveraging imports
• Dynamically generating the UI

• Coding custom component classes
• Generating component output with the render method
• Composing a JSX component hierarchy
• Extending the hierarchy with the Container/Presentational design pattern
• Understanding the differences between JSX and HTML

Module 3: Activating React Components

Parameterizing components

• Disambiguating component properties and state
• Leveraging the children props to pass content dynamically
• Inserting properties into rendered output with this.props
• Improving maintainability and reliability with defaultProps and proptTypes
• Centralizing logic at the container level by passing functions as props
• Integrating stateless functional components

Manipulating component state

• Separating component state from component behavior
• Reading application data with this.state
• Mutating data with this.setState()
• Efficiently managing state to improve performance
• Best practices for sharing state with createContext

Integrating into the component life cycle

• Attaching and detaching logic and event handlers in componentDidMount and componentWillUnmount
• Enhancing performance with componentShouldUpdate

Routing between components

• Exploiting the react-router for semantic URLs
• Mapping URL paths and parameters to components

Module 4: Developing React Forms

• Working with interactive properties
• Capturing form component updates with onChange
• Exploiting controlled components

• Applying the onChange / setState() convention
• Reducing onChange clutter for clearner code

Module 5: Centralizing State with Redux

• Architecting loosely-coupled applications for extensibility
• Managing state centrally
• Interacting with data using actions, reducers, and stores
• Defining reducers to correctly manage updates, deletes, and inserts

• Best practices when implementing Redux
• Creating a Redux data store
• Using the React-Redux Higher-Order Components
• Sharing state between containers and presentational components
• Integrating multiple stores/reducers in large applications to avoid complexity
• Reviewing alternatives: Mbox, alt, Relay, Flux, and Reflux

• Making Ajax calls from React using thunk and promises
• Integrating isomorphic-fetch to support client and server-side access
• Mapping CRUD access to REST actions
• Reviewing alternatives

Module 6: Analyzing React Applications

• Inspecting React components with browser extensions
• Identifying and debugging rendering errors

• Running tests with Jest
• Isolating code under test with Enzyme

• Establishing a baseline
• Analyzing performance with Flamegraphs
• Optimizing component reconciliation with key

Module 7: Advanced Features

• Optimizing runtime performance with shouldComponentUpdate
• Extending your components with Higher Order Components