Expert React

Expert React

0%

1. React Key Concepts

Explore the significance of additional tools that amplify the efficiency and productivity of React applications. Optimize performance. Furthermore, this revision will guarantee a robust groundwork as you delve into more advanced topics.

Course Overview

React Component

Approaches to Styling in React Apps

Local Development Environment

2. React Router

Discover how to implement navigation and routing in React apps using React Router. Learn about the core concepts of routes and URLs and how React Router facilitates the creation of dynamic, multi-page applications with seamless transitions between different views.

Fundamentals of Routing

Get Started with React Router

Routes Basic Concepts Sum Up

Challenge: Route Basic Concepts

Modify Query String

React Router Section Sum Up

3. Redux Toolkit

Research the capabilities of Redux Toolkit, which streamlines state management in React-Redux applications. This library provides opinionated tools and best practices, empowering developers to craft cleaner and more efficient code.

Introduction to Redux

Getting Started with Redux Toolkit

Involve Redux into React

Challenge: Store

Challenge: Actions

Challenge: Reducer

Challenge: Involve Redux into React

Redux Toolkit Section Sum Up

4. Formik

Formik is a powerful library that empowers React developers to quickly manage forms with optimal efficiency and best practices. We will explore the high-level capabilities of Formik, guiding you through the best practices for building robust and user-friendly forms in your React apps.

Powerful Form Library for React

Get Started with Formik

Custom Formik Hook

Involve Formik into React component

Add Initial Values

Form Submission

Form Validation

Challenge Overview

Challenge: useFormik Hook

Challenge: Binding Formik with React Component

Challenge: Add Initial Values

Challenge: Form Submission

Challenge: Validation

Formik Section Sum Up

5. Jest

Master testing React applications with Jest. Learn how to ensure code quality, prevent bugs, and confidently refactor your projects with Jest's powerful features tailored for React testing.

Introduction to Testing in React

Get Started with Jest

Create the Jest Test File

First Test Case

Second Test Case

Challenge: Third Test Case

Jest Section Sum Up

6. Next Steps

Uncover suitable actions to take next by aligning them with your goals and interests.

Course Content

Expert React

Expert React

1. React Key Concepts

Course Overview React Component Approaches to Styling in React Apps React Hooks React Context Local Development Environment

2. React Router

Fundamentals of Routing Get Started with React Router Basic Routing Lazy Loading Navigation Routes Basic Concepts Sum Up Challenge: Route Basic Concepts Query String Modify Query String React Router Section Sum Up

3. Redux Toolkit

Introduction to Redux Getting Started with Redux Toolkit Real Deal Store Actions Reducer Involve Redux into React Challenge Time Challenge: Store Challenge: Actions Challenge: Reducer Challenge: Involve Redux into React Redux Toolkit Section Sum Up

4. Formik

Powerful Form Library for React Get Started with Formik Custom Formik Hook Involve Formik into React component Add Initial Values Form Submission Form Validation Challenge Overview Challenge: useFormik Hook Challenge: Binding Formik with React Component Challenge: Add Initial Values Challenge: Form Submission Challenge: Validation Formik Section Sum Up

5. Jest

Introduction to Testing in React Get Started with Jest Create the Jest Test File First Test Case Second Test Case Challenge: Third Test Case Jest Section Sum Up

6. Next Steps

Challenge: Actions

Step 2: Create actions

Focus on creating actions for managing goals. Actions are objects that describe the changes we want to make to the state. By creating actions, we can update the Redux store accordingly.

Example

Challenge

Open the goalAction.js file.
Use the correct function from the @reduxjs/toolkit package to create actions.
Specify the correct action types using the target element goal and indicate the action for each action.
To remove a goal, set the action type as goals/removeGoal.
To add a goal, set the action type as goals/addGoal.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 10

some-alt