Building Web Applications with React 16

Course 2322

  • Duration: 4 days
  • Labs: Yes
  • Language: English
  • Level: Advanced

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 Delivery Methods

  • In-Person

  • Online

Building Web Applications Course Information

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

  • Features of React and Redux
  • Why the Virtual DOM makes React run fast
  • Configuring the development and build environment
  • Incorporating third-party 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

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
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
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
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
  • Optimizing runtime performance with shouldComponentUpdate
  • Extending your components with Higher Order Components

Need Help Finding The Right Training Solution?

Our training advisors are here for you.

Building Web Applications FAQs

Yes! We know your busy work schedule may prevent you from getting to one of our classrooms which is why we offer convenient online training to meet your needs wherever you want, including online training.

Chat With Us