About the course
React is the most widely adopted JavaScript library for building dynamic, performant, and scalable user interfaces for web applications. Its component-based architecture and declarative programming model revolutionised front-end development, making it easier to manage complex UI states and build reusable, maintainable codebases. This 4-day hands-on training course provides a comprehensive introduction to modern React development, equipping participants with the essential skills and knowledge to build interactive web applications effectively.
The course begins by ensuring participants are comfortable with the most relevant features from ES6+ JavaScript for working with React and guides them through setting up a modern React development environment using standard tools like Babel and Webpack, often abstracted by tools like create-react-app (or its modern alternatives). A significant portion of the training is dedicated to understanding and applying core React concepts, including state and props, the differences between class-based and modern functional components, and a deep dive into the power of React Hooks (useState, useEffect, useReducer, useContext) for managing state and side effects, including the creation of custom hooks. Participants will gain practical experience in handling asynchronous data by learning how to fetch information from remote APIs using the Fetch API and effectively work with Promises.
Beyond the core React library's capabilities, the course explores important aspects of building real-world applications, including strategies for managing more complex application state using Redux, handling client-side navigation within a Single Page Application (SPA) context using React Router, designing and implementing interactive forms using controlled components, and an introduction to Unit Testing React components to ensure code quality. The course also includes an overview of how TypeScript can be integrated into React projects for improved code maintainability and provides an introduction to popular frameworks built on React, such as Next.js and Remix, offering attendees a well-rounded perspective on the modern React ecosystem.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
- Explain core React concepts, its component model, and set up a modern React development environment.
- Build user interfaces using both functional (with hooks) and class-based React components.
- Manage component state and lifecycle using state, props, and React Hooks (useState, useEffect, useReducer, useContext).
- Fetch and handle asynchronous data from remote APIs using Fetch and Promises.
- Manage application state using Context API and Redux.
- Implement client-side routing in a React application using React Router.
- Design and build interactive forms using controlled components.
- Understand the importance of Unit Testing and write basic tests for React components.
- Gain an overview of using TypeScript in React projects and explore popular React frameworks like Next.js and Remix.
-
This 3-day hands-on training course is designed for developers who want to learn how to build dynamic and interactive user interfaces for web applications using the React JavaScript library. It is ideal for:
JavaScript Developers who are comfortable coding JavaScript from scratch and want to learn component-based UI development.
Web Developers with experience in HTML, CSS, and JavaScript looking to master a popular front-end framework.
Developers with equivalent skills in other languages and web frameworks (e.g., ASP.NET MVC with C#, Spring with Java, Django with Python) looking to transition to or learn React.
-
Ideally you should have attended our Modern JavaScript training course or have equivalent skills, e.g. be comfortable coding JavaScript from scratch, and web fundamentals (HTML and CSS). If you already have equivalent skills in another language and / or web framework such as ASP.NET MVC with C#, Spring with Java, Flask with Python you should be able to benefit from this course with some pre-reading on modern JavaScript fundamentals.
We can customise training to match your team's experience and needs - with more time and coverage of fundamentals for newer developers, for instance.
-
This React course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Introduction to React and the Environment
Why React? Understanding its popularity and use cases.
The Declarative Paradigm and Component-Based Architecture.
The Virtual DOM and how React updates the UI efficiently.
The most relevant ES6+ JavaScript features for React:
Arrow functions
let and const
Destructuring
The spread operator (...)
Classes and Modules
The React development environment:
Setting up a modern React project (e.g., using Vite, briefly mentioning create-react-app).
Understanding the role of Build Tools (Babel for JavaScript compilation, Webpack for bundling).
Using the React DevTools for inspecting and debugging React applications.
Hands-On Lab: Setting up a new React project, exploring the project structure, writing a basic functional component, running the development server, and using React DevTools.
Components, State, and Props
Components: The fundamental building block of React applications.
Defining class-based components: Syntax and basic structure (briefly, focusing on functional components).
Defining Stateless Function Components (SFCs) - the modern approach.
JSX: Writing markup within JavaScript.
State: Understanding component-specific, mutable data.
Defining and changing state in class components (this.state, this.setState).
Props: Passing data and configuration from parent to child components.
Read-only nature of Props.
Component scope and the keyword this (in class components).
Event Handling in React.
Hands-On Lab: Creating multiple components, passing data using props, managing simple state in a class component, handling basic user events.
Introducing Hooks
Understanding Hooks: Why they were introduced (using state and lifecycle methods in functional components).
Rules of Hooks.
The useState Hook: Adding state to functional components.
The useEffect Hook: Handling side effects (data fetching, subscriptions, manual DOM manipulation) in functional components.
Cleaning up effects.
Conditional rendering in React.
Rendering lists of data.
Hands-On Lab: Converting class components to functional components using useState and useEffect, implementing conditional rendering and list rendering.
More Built-in Hooks and Custom Hooks
The useContext Hook: Consuming data from React Context.
Understanding React Context for managing application-wide or shared state (e.g., themes, authentication).
The useReducer Hook: Managing more complex state logic.
When to use useState, useReducer, or Context.
Writing your own custom hooks to reuse stateful logic across components.
Hands-On Lab: Implementing shared state using Context and useContext, using useReducer for a more complex state scenario, creating and using a simple custom hook.
Fetching Asynchronous Data from Remote APIs
Understanding the need for asynchronous data fetching in web applications.
Working with the built-in Fetch API to make HTTP requests (GET, POST, etc.).
Understanding Promises and asynchronous JavaScript (async/await).
Fetching data in React components using the useEffect hook.
Handling loading, error, and success states when fetching data.
Displaying fetched JSON data.
Hands-On Lab: Implementing data fetching from a public API using Workspace and useEffect, displaying the data, and handling different states.
Application State Management with Redux
The challenges of managing state in larger applications (Prop Drilling).
Introduction to Redux: A predictable state container for JavaScript apps.
Core Redux concepts: Actions, Reducers, the Store.
The Uni-directional Data Flow in Redux.
Setting up Redux in a React application (using react-redux).
Dispatching actions and connecting components to the Redux store (useSelector, useDispatch hooks).
Using the Redux DevTools for debugging state changes.
Hands-On Lab: Integrating Redux into the application, defining actions and reducers, creating a store, connecting components to read from and write to the store.
Designing React Forms
Working with form elements in React (<input>, <textarea>, <select>).
Understanding the difference between controlled and uncontrolled components for forms.
Implementing forms using controlled components: Managing form input state in React.
Handling multiple form inputs.
Basic form validation.
Hands-On Lab: Building interactive forms using controlled components, handling input state and basic validation.
Client-Side Routing with React Router
Introduction to Single Page Applications (SPAs) and the need for client-side routing.
Understanding React Router (the standard routing library for React).
Setting up React Router.
Defining routes (<Route>, <Switch>/<Routes>).
Navigating between routes (<Link>, useNavigate hook).
Route parameters.
Nested routes (briefly).
Hands-On Lab: Integrating React Router into the application, defining routes, implementing navigation links, handling route parameters.
Unit Testing React Components
Understanding the importance of Unit Testing in React development.
Introduction to testing tools (e.g., Jest for JavaScript testing, React Testing Library for component testing).
Setting up a basic testing environment.
Writing basic unit tests for functions.
Writing basic component tests using React Testing Library (rendering components, interacting with elements, making assertions).
Running tests and interpreting results.
Hands-On Lab: Setting up Jest and React Testing Library, writing and running basic unit and component tests for parts of the application built in previous labs.
Enhancing React Projects with TypeScript (Overview)
Adding types to JavaScript using TypeScript.
Benefits of using TypeScript in larger React projects.
Setting up TypeScript in a React project.
Using TypeScript interfaces to describe the shape of state, props, and other data structures.
Basic type annotations for components, state, and props.
Hands-On Lab: Briefly converting a small part of the application to TypeScript, adding interfaces for props and state, seeing basic type checking in action.
Overview of Platforms Built on React
React as a library vs. Full-stack React frameworks.
Introduction to Next.js: A popular React framework for server-side rendering, static site generation, and API routes.
Introduction to Remix: Another full-stack React framework focusing on web fundamentals.
Introduction to Blitz (if still relevant and active): A full-stack framework inspired by Ruby on Rails.
Understanding when these frameworks might be beneficial.
Hands-On Lab: Briefly exploring a starter project or examples for Next.js or Remix, discussing their structure and key features.
-
React Official Documentation: The primary and most comprehensive resource covering core React concepts, hooks, and APIs.
React Router Documentation: The official guide for implementing client-side routing in React applications.
Redux Official Documentation: Resources for learning and implementing Redux for state management.
React Testing Library Documentation: Documentation for the widely used library for testing React components.
TypeScript Handbook: The official guide to the TypeScript language. Focus on the "Everyday Types" and "Narrowing" sections initially.
Next.js Documentation: Documentation for the popular React framework.
Trusted by
