Building Web Applications with React 16

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