Advanced Frontend. In production on React

The course is ideal for 2 categories of people: 1. People who are currently looking for a job or are close to it. 2. Current junior or middle developers who want to improve their professional level.

The first category will receive a top project in the portfolio + a dozen new technologies and approaches to development in the resume.

The second category will be able to expand your horizons and improve your professional level.

Who is the course not suitable for?

If you have just recently started learning React and are absolutely not understand, at least at the most basic level, the concept of Redux, then the course will not suit you.

If you understand what happens in the video “Fundamental React from A to Z” and have consolidated it in practice, and also understand the basics Redux, then the course is perfect for you.

A minimal understanding of TypeScript will also be a plus (the basics are enough).

What is the course?

The course is not lessons divorced from reality, but the consistent development of a large production project in React, including setting up the entire infrastructure, test environment, working with the server/data, etc. As a result, you will get a large and technically complex project with a large number of commits per git. You can always return to the project and see how this or that moment is implemented.

Important! The course is not about React. React is just one of the technologies used in the course. The course is about Frontend development in general and covers more global concepts and approaches, including configuration, tests, etc. (you can read more about this below). The course is also suitable for Vue/Svelte/angular developers (but with react-specific points)

The set of knowledge you will receive

P.S. don’t be scared by unfamiliar names, the course is needed to fix this :)

Configuration

Full project configuration from scratch (Webpack). We will set up React, Typescript, Babel, scss, css modules, vite, prettier, we will also set up a test environment, jest, rtl, storybook, loki, Cypress. A large number of plugins, loaders + competent decomposition of the config.

UI

Component library. More than 20 UI components, including modal windows with portals, drop-down lists/menus, sidebars, buttons with different themes, skeletons, popups, lazy images, drawers, avatars, vertical and horizontal stacks, etc. We will write our own solutions and try out headless libraries. We will make all components accessible and semantic.

Architecture

Architecture. Modules Decomposition. Business entities. Weak coupling and strong coupling. Reuse. Specific examples

Optimization

Optimization. Redraws and how to deal with them. Bundle size analysis. Using bundle analyzers. Asynchronous components. Asynchronous Redux reducers. Reducer manager and creation of a small library for implementing asynchronous reducers. Module isolation. Throttle and debounce. Endpoint injection for better code splitting. Let's learn how to conveniently asynchronously load libraries that are not needed immediately (for animations and drag and drop).

Real tasks

Solving a large number of problems from real development (filters, search, sorting, endless feeds, multi-block pages, comments, etc.). Similar to what was in the fundamental course, but many times larger and made more technically interesting.

Themes and styles

CSS modules and theming. Let's create the correct style structure and implement 3 color themes for our application (dark, light, orange). We organize the styles so that it will take 5 minutes to implement a new theme. Let's work with scss

Storybook and screenshot tests

We will set up a Storybook from scratch and describe a story case for each component and all its states. Let's learn how to make screenshot tests, which will allow us to do regression testing of our interface.

Unit and RTL tests

We will set up a test environment from scratch for unit jest tests and component tests using the React Testing Library. We will test each developed module (selectors, async thunks, reducers, components).

e2e testing

At the very end of development, we will cover the developed E2E modules with tests. Let's look at custom commands, fixtures, mocks, stubs, interceptors, skips. Let's learn how to correctly execute queries and write end-to-end tests.

Linting and prettier

Let's customize the code-style, in particular, configure ESlint and stylelint. For eslint, we will implement a self-written plugin as a separate npm package. The plugin will contain 3 self-written rules that will monitor the rules of the architecture, module isolation, and correct access to layers. The rules will have an autofix that will automatically correct incorrect code. To format and add beauty to the code, let's set up Prettier.

Errors

Let's learn how to handle errors correctly and implement ErrorBoundary. Let's see how it works in practice.

Routing

React-router-dom V6. Of course, our application will have several pages, this will not surprise anyone. We will configure access for these pages, by authorization or by role. Also, to maintain a minimum bundle size, we will learn how to separate pages into separate chunks.

i18n

Let's learn to work with internationalization. We will introduce two languages ​​into the interface (Russian and English). We will also learn how to break translations into chunks and load them in portions so as not to increase the size of the bundle. Let's talk about plural forms and look at specific examples.

TypeScript

We’ll set up TS (tsconfig) from scratch, pair it with webpack, work with union types, generic components, and in general there will be a lot of typescript.

Babel

Set up Babel and, as a training exercise, connect a plugin that will automatically extract translation keys from the code and add files to JSON. We will also implement our own plugin, which will remove code that is unnecessary for us from the Production assembly. In practice, let's see how babel plugins work, let's talk about parsing the AST tree.

CI/CD and pre-commit hooks

We'll set up a ci pipeline that will run 3 types of tests for us, build a project, a storybook, and run the code on linters. We will also configure pre commit hooks using husky. Let's learn how to generate reports for unit and screenshot tests with information about successful/failed tests and also learn how to immediately publish them in ci github pages.

Data normalization

We will also pay attention to data normalization . Let's talk about the concept itself and implement an example in code. Let's work with the EntityAdapter.

Virtualization

When working with lists, it is important not to forget about Performance. Let's work with virtual lists, using an example to see how you can improve productivity.

Infrastructure

We will set up the infrastructure in such a way that the project itself, the test environment, and the storybook can use everything features and work as one. (ts, css modules, global assembly variables, etc.). 

Refactoring

At the end of development, we will analyze the resulting code and try to refactor it, and analyze the weak ones places, we will correct them and understand with specific examples how to decompose and isolate modules in the application.

Queries and working with data

All work with data will be carried out using the Redux toolkit. In the first part of the course we will work in the classic style and to work with the API we will use an axios instance, which we will inject into async thunks. Also, in order to understand and try different approaches, we will try RTK query. Let's learn how to asynchronously inject new endpoints to keep the bundle size minimal (code splitting).

Reports

For screenshot/unit/component tests, we will learn how to generate convenient reports with which to track the work of tests will become easier.

Code generation

We will implement our script, which will generate features/entities for us with the entire structure of folders and files, which will already contain all the necessary content.

Development process

During development, we will solve a large number of problems, in a live format we will look for a solution, study the documentation, correctly compose queries to find a solution to the problem.

Migration to React 18

At the end of development, we migrate the project from version 17 to react version 18.

Debug< /p>

We will learn to use various debugging tools: network tab, application in the browser, react devtools, redux, bundle analyzers etc.

Ring dependencies and babel plugin

Let's talk about circular dependencies, learn how to find them, and also implement our own babel plugin, which will remove extra code from the assembly.

Alternate assembly

< div data-block-id="1600131538" data-code="b-a879a">

To compare bundlers and broaden your horizons, in addition to webpack, we will also configure vite and connect the necessary plugins.

Automated refactoring

Let's learn how to write scripts for parsing AST source code of our application. Work with abstract syntax tree nodes, change code throughout the entire project globally using scripts, create files, add the necessary content to them.

Deploy and nginx

We rent a cloud server. Let's configure nginx. Let's add a certificate and configure HTTPS. Let's connect the domain name. Let's learn how to compress (gzip) a bundle. Let's set up request proxying and create a script for deployment.

Browserlist

Let's learn how to fill out the browserlist and see how it affects the bundle.

Mobile and desktop. Various user agents

Depending on the user agent of the user, we will learn how to draw mobile/ desktop components. Let's look at how you can optimize a bundle using this technique. Let's learn how to make component factories.

Git flow vs trunk based. Feature flags, user settings

Let's talk about the two most commonly used approaches in development, Git flow and trunk based. Let's look at the concept of feature flags and set up an automation that can remove unused feature flags. We implement dynamic user settings. 

Redesign and automation

We will do a complete redesign of the project at the end of the course on layouts from the designer. At the same time, the layout itself is not so interesting; we will add interesting technical details to the redesign.

1. Modular flexible layout system with nested layouts.

2. Both the old and the new design will exist in the code at the same time. The user will be able to choose the display in the interface. At the same time, there are two designs, and one business logic.

3. Let's implement a script that, when executed, will delete all old code. At the same time, we will correctly organize the code base in order to get rid of manual deletion and leave it to automation.