Öppna kurser

Building Web Applications with React and Redux

React 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 by building high-performance User Interfaces (UIs) with JSX components targeting a virtual DOM, and creating Flux applications, which provide complementary architectural patterns to construct client-side application functionality.

Utbildningen körs i Learning Trees regi.

Nyckelfunktioner:

  • After-course instructor coaching benefit
  • Learning Tree end-of-course exam included

Du kommer lära dig att:

  • 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

Förkunskaper:

Experience developing web pages with JavaScript, HTML, and CSS at the level of:

Kursinnehåll

  • 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
  • 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
  • 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
    • Centralising logic at the container level by passing functions as props
    • Integrating stateless functional components
    Manipulating component state
    • Separating component state from component behaviour
    • Reading application data with this.state
    • Mutating data with this.setState()
    • Efficiently managing state to improve performance
    • Best practises 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
  • 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
  • Centralising State with Redux

    Modelling 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 practises 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
  • Analysing 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
    • Analysing performance with Flamegraphs
    • Optimising component reconciliation with key
  • Advanced Features

    • Building components with Hooks, useState, and useEffect
    • Extending your components with Higher Order Components