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.

 

Kulsmål:

• 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

Förkunskaper:

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

Course: JavaScript for Modern Web Development

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