React

Dynamic application development with React

Description

React is a JavaScript library born from the performance, productivity and maintainability issues encountered by the Facebook and Instagram development teams. The result is a powerful and easy-to-use library. However, it needs to be used in an appropriate technical environment and aims to "rewrite" good practices. It's up to us to give you all the basics you need to get the benefits of using React.

Objectives

  • Understand the philosophy of React
  • To understand the model Redux, Flux & component
  • Build a Single-Page Application based on React

Prerequisites

  • Mastery of the Javascript language
  • Knowledge of web technologies

Programme

Introduction

  • Landscape of JS frameworks
  • Fundamentals of NodeJS and NPM
  • History of React

React

  • The philosophy
  • The inner workings: Virtual DOM, reconciliation
  • The package: Addons, react-tools, JSXTransformer, React Developer Tools

Rendering React components

  • Our first component
  • API React
  • DOM rendering
  • JSX
  • Lab: Guided creation of an application in React components

React component states

  • Internal state of a component (State React)
  • Properties of a component (React Props)
  • Validation of properties
  • Lab: Annimation of the application red wire leaves the props and state react

Lifecycle of React components

  • Introducing React Hook (i.e. Mounting a Component)
  • Introduce other React Hooks
  • Introduction to the performance of a React component

CommonJS environment

  • CommonJS
  • ESModules
  • Creation of the customer bundle
  • Lab: Breaking down the application into reusable modules and creating a bundle with Webpack

Tests

  • Test runner
  • Test Driven Development
  • Test a function
  • Create Mock Functions
  • Test a React component
  • Lab: Guided creation of the application tests

REST architecture

  • Introduction to REST Architecture
  • Interactions between a React application and a REST Server
  • Lab: Data Recovery on a NodeJS Server

Redux

  • The unidirectional workflow
  • Flux pattern
  • The main components of Redux
  • Redux in the React context
  • Lab: Implementation of Redux + Tests

Routing

  • The react-router package
  • Lab: Implementation of Single-Page Application with React-router

Form

  • Redux¬≠-form
  • Validation of a React form
  • Lab: Creation and validation of a form with React + Tests

Performance

  • Decrease in reconciliations with shouldComponentUpdate
  • Using PureRenderMixin
  • Performance measurement addon
  • Lab: Analysis of performances and tuning of the application

Isomorphism

  • Introduction to the concept
  • Isomorphism and data
  • Isomorphism and redux
  • Lab: Transformation of SPA into an isomorphic application

Go further

  • Lodash
  • Functional tests with CucumberJS / Gherkin Syntax
  • i18n with react-intl
  • React-native

Conclusion