Front-end web development
React: build web interfaces with components
Master the React fundamentals: JSX, components, state, hooks, forms, routing and first tests.
- Duration
- 21 h · 3 days
- Level
- Intermediate
- Format
- On site · Remote · Blended
- Max. group size
- 12 participants
Overview
This program teaches how to build a modern React application. It starts with components and JSX, manages local state with hooks, builds lists and forms, then organizes navigation with a router. The last half day covers shared state and a first approach to component testing, so participants leave with a sound project foundation.
Who this program is for
- Front-end web developers
- Full stack developers wanting to structure their interfaces
- Teams migrating to a component-based approach
Prerequisites
- Very good knowledge of JavaScript (ES6+)
- Web development basics (HTML, CSS)
Learning objectives
- Create a React project with Vite
- Write components and JSX
- Pass data with props and manage local state
- Use useState, useEffect and create your own hooks
- Build lists, forms and conditional rendering
- Set up navigation with React Router
- Discover centralized state and component testing
Detailed curriculum
6 modules · 21 h · 3 days
Day 1
Tools and first components
50% theory · 50% practice
- ES6+ refreshers useful for React
- Creating a project with Vite
- Principle of declarative rendering and the virtual DOM
- JSX: expressions, attributes and fragments
- Functional components and file organization
Props, state and events
30% theory · 70% practice
- Passing data with props, including children
- Local state with useState
- Handling events
- Conditional rendering
- Parent-child communication
🛠 Hands-on workshops
Catalog components1.5 h
Build a product catalog with filters.
✅ Deliverable : An interactive catalog
Day 2
Hooks, lists and forms
30% theory · 70% practice
- useEffect and lifecycle
- Rules of hooks and custom hooks
- Displaying lists and managing keys
- Controlled forms and validation
- Loading data from an API
🛠 Hands-on workshops
Connected form and list2 h
Create an add form and a list fed by an API.
✅ Deliverable : A page with remote data
Immutability and sharing state
50% theory · 50% practice
- Immutability and updating objects and arrays
- Lifting state up to a parent
- Context API: use cases and limits
- Preparing for a state manager
- Structuring a project's folders
Day 3
Navigation with React Router
30% theory · 70% practice
- Routes, links and URL parameters
- Nested routes and layout
- Redirects and error pages
- Loading data per route
- Protecting routes
🛠 Hands-on workshops
Multi-page application2 h
Add navigation to the capstone project application.
✅ Deliverable : An application with several views
Centralized state and tests
50% theory · 50% practice
- Store, actions and reducers: principles
- Using a store with hooks
- Testing a component with Testing Library
- Running tests with Vitest
- Overview of server-side rendering and React Native
Tools and technologies
JavaScriptNode.jsReactVisual Studio Code
Teaching methods
- Alternating short lectures and hands-on work
- Live demonstrations by the trainer
- Capstone project built throughout the modules
- Group corrections and discussion of best practices
Assessment
- Hands-on exercises corrected in each module
- Mini-project completed at the end of the course
- Knowledge-check quiz
Required equipment
- A computer with an internet connection
- A code editor and Node.js installed
Resources provided
- Course materials and repository of corrected exercises
Career outcomes
- A working single-page application
- The reflexes of component-based design
- Autonomy to continue with advanced topics
Related video courses
My video courses that go with this program, to get ready for the training or to review afterwards. Free with an account.
