
Explore the root backend setup, including eslint configs, gitignore, the express app, middlewares, routes, and a websocket chart server that emits live data every second using generated history.
Review jest.config options for a React TypeScript app, including rootDir, test environment, setup files, and transforms. Understand how module name mapper, test regex, and coverage thresholds drive testing.
Review the TypeScript configuration file, examining baseUrl, outDir, sourceMap, noImplicitAny, module, target, decorators, ES module interop, and module resolution. Learn how paths, lib, JSX, and include/exclude shape the frontend build.
Expand the layouts directory by exploring main and minimal route templates, styling top bar and left sidebar, and integrating SEO, breadcrumbs, and translation hooks with Material UI.
Blocker shows a modal when leaving a page with dirty forms, using Redux isDirty checks to block navigation. The dialog uses Material UI slide and useTranslation for titles.
Explore the notification component, its @connect decorator, and how it displays translated error, success, and info messages using the translation function, state mapping, and a timeout-based hide flow.
Create a live line chart using web sockets and Plotly, handling resize with debounce to keep the interface responsive while streaming data in real time.
Explore the logout flow in a React functional component that uses useDispatch, useCallback, and useEffect to trigger logout, handle server responses, and reload Redux state to reach the login page.
Explore the users page that retrieves users from state, passes them to the table, and fetches data with axios cancel tokens and debounced search. Learn how the component handles mounting, refreshing, row clicks to edit pages, accessibility attributes, and advanced table features like sorting and stable order.
Pre-requirements:
An experienced React Developer familiar with TypeScript, or an Angular developer with basic React knowledge or a developer who can fluently use google to understand technologies.
Node.js >=10, PostgreSQL 11, Python 2.7, node-gyp and Desktop development with C++ (all links and instructions are provided within the course), Git.
The course contains production and mobile ready React application for a large project, dirty backend on Node.js and PostgreSQL database for store users and sessions.
I'm going to show you how to cook:
✅ One of the best architectures for React.
✅ Redux + React hooks (you should use Redux in 2019 for best performance).
✅ Login, registration, logout and check authentication flow (administrators can drop session for the target user).
✅ Security authentication using http only cookie.
✅ Universal error handlers for request/response. Errors are shown for fields, forms, connection. Written once. Use anywhere.
✅ Form validators (i18n support).
✅ Dynamic breadcrumbs. Inserted once. Working anywhere you wish.
✅ Internalization (multi-language support). Your customers will be thankful for concern. Conquer different markets now.
✅ Permissions (static and dynamic) based on roles and access rights.
✅ User search and User Edit Page (for admins, self-edit for moderators).
✅ A11y ready. Try to use without a mouse. It's possible.
✅ SEO module for different titles and descriptions in the app. Just add text for new page, not more action required. i18n support.
✅ Universal UX guard. Your users will not lose important changes in forms. Site prevents internal and external navigation while there are some changes in fields.
✅ Live color changer. Every user can use their own colors.
✅ Right way to Cache data in Redux.
✅ Live chart with real-time data using Plotly and WebSockets.
✅ Cancel http request that you want.
✅ Jest, Enzyme configuration.
✅ Webpack for development and production (with chunks and optimizers).
✅ TSconfig (and cheat: write your aliases in one place, they will be applied to Jest and Webpack).
✅ Cache using Service Worker.
✅ Jest and Enzyme with TypeScript test examples (basic; how to mock redux, test axios, mount and shallow, work in progress).
All components are written the way that they are inserted in one place and work everywhere.
You will see how to type functions, components, wrappers, axios, redux-forms and etc.
Be smart, be passionate, be happy!
Save up to 4 months of development with this course!
I’m going to update this course.
Just message me what you want to know.
My ideas:
- User self-edit page.
- Handle on backend and show on UI unhandled phrases in i18n (if you forget to translate something).
- Edit page for languages.
- What is Idempotency and why we should use it in our app.
- Add support for oldest browsers.
- Infinite table/scroll.
- Dynamically add field in form.
- Collapsed menu (children support)
- Monorepo.
After 100 000 a new course will be developed:
How to create safe backend using Node.js or Golang.
Notice:
You get the finished application and concentrate on the processes. The lecturer explains what the thing is and how it works.
My main task is that you can start doing the right things as soon as possible.
Video: 1920x1080 (Full HD)
Lexicon: simple English.
Our goal is to be understood by the whole world.
There is a killer feature of this course.
You can contribute to this React course!
Your name will be in the title of the lecture, as well as at the beginning of the video with your github page.
How is it possible?
See the chapter: “How to contribute?”