In this course we will go step by step from getting to know the basic ideas to using the most advanced React techniques.
We will write our SPA application, in the process we will understand React itself, configure redux, connect react-router-domV6. Later we’ll move our application to Next and do optimization.
You will learn in detail the classic architecture for React applications: Unidirectional dataflow, and learn how to build it using the modern and most popular implementation – Redux.js.
In addition, you will understand the most popular React framework – Next. You will learn how React is structured, learn how to use this knowledge for optimization.
The course consists of 5 blocks:
- React base;
- Redux;
- React-router-dom;
- Next;
- Optimization.
Course Program
BLOCK 1
React Base.
What is React and why do we need it?
Let’s break down popular starters – vite and cra(create-react-app).
Elements – basic building blocks.
Learning how to use functional components.
What are hooks and why do we need them?
Rules of hooks.
Built-in hooks: useState, useEffect/useLayoutEffect, useReducer, useRef, useCallback, useMemo, useTransition, useId, etc.
Custom hooks.
Basic rendering theory.
Working with forms.
Working with styles (ccs modules).
Working with images.
Context.
Portal.
BLOCK 2
Redux
Writing our own implementation to understand how it works inside redux.
Learn how to design a data layer with Redux.
Load data from the server, connect thunk.
Migrating from pure Redux to Redux Toolkit.
Dealing with RTK Query.
BLOCK 3
React-router-dom
Getting to grips with the concept of routing in SPA.
Learn to organize static routers, dynamic, nested, etc.
We learn how to perform navigation, redirect.
We learn how to work with the state of a root – path parameters, queried parameters.
BLOCK 4
Next
What is Next and why do we need it?
Let’s deal with routing in Next.
We learn how to use Layout.
We understand SSR, SSG and other types of rendering.
What are northbound components and how to use them?
Loading data in an application with Next, managing the application cache.
Learning how to use page meta.
BLOCK 5
Optimization
A detailed look at the rendering logic in React, diving into how Fiber works.
Learn how to optimize rendering in React.
Optimize data acquisition and data handling.
Optimize images and their loading.
Optimize the loading of our application.
Learn how to test components.