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