Building Web Applications with React and Redux

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

Building Web Applications Delivery Methods

• In-Person

• Online

Building Web Applications Course Information

• Building Web Applications Course Benefits

  • Create an isomorphic web application using Facebook React and Redux
  • 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

Displaying React content

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

Leveraging JSX for UI design

• 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 URL s
• Mapping URL paths and parameters to components

Module 4: Developing React Forms

Manipulating form input components

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

Implementing two-way binding

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

Module 5: Centralizing State with Redux

Modeling client-side data interactivity

• 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

Coding a Redux application

• 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

Connecting React to RESTful services

• 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

Developer tools

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

Unit testing

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

Performance testing

• 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