Hands-On React. Build advanced React JS Frontend with expert
- Description
- Curriculum
- FAQ
- Reviews
React is the most popular library for building frontend web applications. Step-by-step by diving into all the basics, I’ll introduce you to advanced concepts as well.
We’ll build the minesweeper application from scratch:
-
setup of the development environment
-
configuration of the React JS app
-
basic algorithms of Minesweeper
We’ll build the minesweeper game. During the course, we’ll cover the most important topics.
First will be a configuration of the ReactJS application with Typescript and using build tools Webpack+Babel.
Second, there’re presented TDD or TLD approaches that I’ll try to practice with you during the coding sessions. Probably you don’t have enough experience with the tests, but it’s ok, there’s still a good way to learn it from the course. When you work with code and cover it with test cases, it provides you with guarantees that your code works as you expected. This is the purpose and benefit of the tests.
Tools for testing: Jest, Stryker, React Testing Library
Also, I’ll try to cover basic Typescript concepts and show you a way to improve these skills. During the coding sessions, we’ll cover advanced Javascript techniques to make sense of commonly used JS features.
Storybook is the most popular way to build the components library. From our side, it’s the most basic part of the course. We’ll install and configure Storybook, which will provide us with a full components spec. This approach is called Components Driven Development.
CSS-IN-JS, EmotionJS, and Styled-Components are very powerful toolkits to build UI components. Even very complex component styles can be easily produced and supported by it.
We’ll introduce you to React Hooks – it’s the basic way to make dynamic UI for the applications.
We’ll make review React Router v5 and also React Router v6.
GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want. We create our deployment workflow!
Last but not least it’s Redux. Redux is a beautiful way to manage an application state. We’ll use the Redux-Toolkit library – it simplifies the work with Redux.
Check out the full curriculum and free preview videos. Join the course risk-free with a 30-day money-back guarantee!
See you on the course!
-
16Create React JS AppVideo lesson
-
17JSX at GlanceVideo lesson
-
18JSX compilationVideo lesson
-
19Props and conditional renderingVideo lesson
-
20Props and conditional renderingText lesson
-
21Ecma TC39 and BabelVideo lesson
-
22Webpack introVideo lesson
Project builder - write your code and bundle it
-
23How can you configure your app?Text lesson
-
24Webpack dev serverVideo lesson
-
25Create React JS application with webpack and babelText lesson
-
26Jest testing framework (TDD vs TLD)Video lesson
-
27Field generator part1Video lesson
-
28Field generator part2Video lesson
-
29Field generator part3Video lesson
-
30Field generator part4Video lesson
-
31VSCode debug configurationVideo lesson
-
32Debug basic game logicVideo lesson
-
33Create a field generatorText lesson
-
34Library Emotion for css-in-jsVideo lesson
-
35Styled-Components APIVideo lesson
-
36Storybook introVideo lesson
-
37Eslint and StorybookVideo lesson
-
38Create Styped-Components with StorybookVideo lesson
-
39Components compositionVideo lesson
-
40Chromatic for visual testingVideo lesson
-
41List and KeysVideo lesson
-
42Storybook and ChromaticText lesson
-
43React JS Hook useStateVideo lesson
-
44Dynamic components with useState React JS HookVideo lesson
-
45React Testing Library for React JS componentsVideo lesson
-
46FragmentVideo lesson
-
47Cell component part1Video lesson
-
48Cell component part2Video lesson
-
49Cell component part3Video lesson
When I've told you about the context menu OBS can't catch this. When you press the second mouse button it should be a context menu per every item on the page if we won't prevent it
-
50EventsVideo lesson
-
51Cell component testsVideo lesson
-
52Custom React JS HooksVideo lesson
-
53useDebugValueVideo lesson
-
54Game Field (grid) componentVideo lesson
-
55Storybook components library reviewVideo lesson
-
63Static gameVideo lesson
-
64Game logicVideo lesson
-
65React JS Hook useState and player field generatorVideo lesson
-
66React Testing Library user-eventVideo lesson
-
67Test player field generatorVideo lesson
-
68Generate game field and openCell handlerVideo lesson
-
69Debug session and useMemo React HookVideo lesson
-
70Click to the cell test casesVideo lesson
-
71Reset game by TDDVideo lesson
-
79React JS Hook useEffectVideo lesson
-
80Game timer and useEffectVideo lesson
-
81Game timer fixVideo lesson
-
82Bombs counterVideo lesson
-
83Test reports and refactoring sessionVideo lesson
-
84Test reports and refactoring session 2Video lesson
-
85Refactoring useGameVideo lesson
-
86Refactoring useGame 2Video lesson
-
87RDT profiler and React.memo + useCallback introVideo lesson
-
88React.memo + useCallback optimizationVideo lesson
-
89Stryker disable mutantsVideo lesson
External Links May Contain Affiliate Links read more