Hands-On React. Build advanced React JS Frontend with expert

Destiny For Everything


Fingers-Heading in the right direction, construct frontend utility with ReactJS and Typescript following by TDD

What you’ll be taught

Construct net purposes with ReactJS utilizing Hooks, Typescript, Redux

Create elements library with the Storybook and CSS-IN-JS

Dive deeply into configurations of utility with Webpack + Babel

Study TDD, TLD and apply this data utilizing Jest, React-Testing-Library and Stryker-Mutator

Description

React is the most well-liked library for constructing frontend net purposes. Step-by-step by diving into all of the fundamentals, I’ll introduce you to superior ideas as effectively.

We’ll construct the minesweeper utility from scratch:

  • setup of the event surroundings

  • configuration of the ReactJS app

  • primary algorithms of Minesweeper

Step-by-step we’ll construct the minesweeper sport. Through the course, we’ll cowl an important subjects.

First will likely be a configuration of the ReactJS utility with Typescript and utilizing construct instruments Webpack+Babel.

Second there’re introduced TDD or TLD approaches that I’ll attempt to observe with you through the coding classes. Most likely you don’t have sufficient expertise with the assessments, but it surely’s okay, there’s nonetheless a great way to be taught it from the course. Once you work with code and canopy it by take a look at circumstances, it gives you with garantees that your code works as you anticipated. That is the aim and benifit of the assessments.

Additionally, I’ll attempt to cowl primary Typescript ideas and present you a approach to enhance these abilities. Through the coding classes, we’ll cowl superior Javascript strategies to make sense of generally used JS options.

Storybook is the most well-liked solution to construct the elements library. From our aspect it’s probably the most primary a part of the course. We’ll set up and configure Storybook, which can gives us with a full elements spec. This strategy is named Elements Pushed Improvement.

We’ll introduce you to React-Hooks – it’s the fundamental solution to make dynamic UI for the purposes.

Final however not least it’s Redux. Redux its a wonderful solution to handle an utility state. We’ll use the Redux-Toolkit library – it simplifies the work with Redux.

Take a look at the total curriculum and free preview movies. Be part of the course risk-free with 30-day money-back assure!

See you on the course!

English
language

Content material

Introduction

Minesweeper and Github repo
Venture init
Code-style and Eslint
Prettier
Helpful hyperlinks

Typescript recap

Typescript primary
Parametric varieties with generics
Interfaces, Sorts and Union
Unknown, by no means and Tuple
UtilityTypes
Minesweeper primary varieties
Take a look at

React intro

Create React App
JSX at Look
JSX compilation
Props and conditional rendering
Ecma TC39 and Babel
Webpack intro
Webpack dev server

Jest, TDD and primary sport logic

Jest testing framework (TDD vs TLD)
Discipline generator part1
Discipline generator part2
Discipline generator part3
Discipline generator part4
VSCode debug configuration
Debug primary sport logic

Storybook and Elements Library

Library Emotion for css-in-js
Styled elements API
Storybook intro
Create elements with Storybook
Elements composition
Chromatic for visible testing
Checklist and Keys

React Hooks intro

useState
Dynamic elements with useState Hook
Testing-library for ReactJS elements
Fragment
Cell element part1
Cell element part2
Cell element part3
Occasions
Cell element assessments
Customized hooks
useDebugValue
Recreation Discipline (grid) element
Elements library evaluation

Code high quality, app deploy and CI/CD

Take a look at protection report
Take a look at high quality software Stryker-Mutator
Snapshot testing
Githooks and Husky
AWS Amplify deploy
CI/CD with Github Actions

React hooks and react testing library

Static sport
Recreation logic
useState and participant discipline generator
Testing library user-event
Generate sport discipline and open cell handler
Take a look at participant discipline generator
Debug session and useMemo
Click on to the cell take a look at circumstances
Reset sport by TDD

Recreation hook

Create sport over habits by TDD
Recreation customized hook
Take a look at refactoring
Set flag motion
Solved puzzle detector
Create win sport state handler
Add take a look at case for win state

useEffect, useCallback, React.memo

useEffect
Recreation timer and useEffect
Bombs counter
Take a look at stories and refactoring session
Take a look at stories and refactoring session 2
Refactoring useGame
Refactoring useGame 2
RDT profiler and React.memo + useCallback intro
React.memo + useCallback optimization
Stryker disable mutants

React-Router

What’s URL?
ReactRouter and Webpack-Dev-Server
URL Params

Redux intro

Pure capabilities benifits
Referential transparency
Redux primary instance
Recreation module by TDD (Geese)
Recreation module by TDD with createSlice
Recreation module by TDD with createSlice 2
React + Redux and useReducer

Minesweeper with Redux

React-Redux
International retailer benifits and redux-dev-tools
Redux middlewares and timer
Refactoring with Stryker

The post Fingers-On React. Construct superior React JS Frontend with skilled appeared first on destinforeverything.com.

Please Wait 10 Sec After Clicking the "Enroll For Free" button.