Payment by bank transfer · Moroccoتعلَّم · مارِس · أتقِن

Catalogue / Development

React: Building Modern User Interfaces

From components to deployment: JSX, props, state, effects, hooks, context, reducers, React Router, styling, testing and going to production, up to the complete online store of a handicraft cooperative.

  • Intermediate
  • 13 lessons
  • 13 h 40 min

A MasterLinux course · Original text

What you will learn

  • Understand what React brings (components, declarative rendering, reconciliation) and create a project with Vite
  • Write components in JSX, pass them props and children, render lists with keys and conditional content
  • Make an interface interactive with useState, event handlers and controlled forms
  • Break a mockup into components, put state in the right place and pass data down the tree
  • Synchronize a component with the outside world using useEffect, and know when an effect is unnecessary
  • Load data from an API cleanly (loading, errors, cancellation) and write your own hooks
  • Manage global state (shopping cart) with useContext and useReducer, and navigate between pages with React Router
  • Style, make accessible, test, debug, build and deploy a React application behind nginx

Course content

13 lessons · 13 h 40 min
Section 1 — React basics4 lessons · 3 h 15 min
  1. Why React: components, declarative rendering and a first project with Vite Preview40 min
  2. JSX et composants : props, children, listes, clés et rendu conditionnel 50 min
  3. L'état avec useState : événements et formulaires contrôlés 55 min
  4. Penser en React : découper une maquette, placer l'état, faire circuler les données 50 min
Section 2 — Hooks and data5 lessons · 4 h 40 min
  1. Les effets : useEffect, dépendances, nettoyage — et quand s'en passer 55 min
  2. Charger des données d'une API : fetch, chargement, erreurs et annulation 55 min
  3. useRef, useMemo, useCallback et hooks personnalisés 55 min
  4. État global : useContext et useReducer pour le panier 1 h
  5. Navigation avec React Router : routes, paramètres et liens 55 min
Section 3 — Quality and production3 lessons · 2 h 45 min
  1. Styliser une application React et la rendre accessible 55 min
  2. Tester des composants et déboguer : Vitest, Testing Library et React DevTools 55 min
  3. Construire et déployer : vite build, variables d'environnement, nginx 55 min
Section 4 — Project1 lesson · 3 h
  1. Projet : la boutique en ligne d'une coopérative d'artisanat 3 h

Requirements

  • The “Web Development: HTML, CSS and JavaScript” course or solid experience with modern JavaScript (arrow functions, arrays, objects, modules, promises)
  • Comfortable with a terminal and npm (the “Node.js” course is a plus, not a requirement)

Who is this course for?

  • Web developers who want to move from hand-written JavaScript to a professional UI library
  • Computer science students (BTS, DUT, bachelor’s degree, engineering schools) preparing for a front-end internship or first job
  • Back-end developers (PHP, Java, Node.js) who also need to deliver the interface
  • Freelancers who build online stores, booking sites or dashboards for clients in Morocco