Dynamic application development with React


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.


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


  • Mastery of the Javascript language
  • Knowledge of web technologies



  • Landscape of JS frameworks
  • Fundamentals of NodeJS and NPM
  • History of 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


  • 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


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


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


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


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


  • 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