- 4-day instructor-led training course
- After-course instructor coaching benefit
- Learning Tree end-of-course exam included
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
- 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
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
- Working with interactive properties
- Capturing form component updates with onChange
- Exploiting controlled components
- Applying the onChange / setState() convention
- Reducing onChange clutter for clearner code
- 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
- 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
- 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.