Udemy

Platform

English

Language

Web Development

Category

Building modern React apps (w/ Redux Toolkit + Typescript)

Learn how to build a modern React app with Redux, Typescript, Auth0, Material UI, Docker and Jest

4.00 (16 reviews)

Students

4.5 hours

Content

Jun 2021

Last Update
Regular Price

BLUE HOST
Blue Host
Fast, easy, and secure WordPress hosting in minutes + 1 free domain name
$2.95/month

What you will learn

React

Typescript

Redux

Redux Toolkit

Redux Thunks (createAsyncThunk, synchronous thunks)

Docker and Docker Compose

Material UI

Implementing Dark Mode with Material UI

Authentication with Auth0

React Router DOM

Testing business logic with Jest

Redux Persist

Selectors with Reselect


Description

In this course, you will learn how to build a simple yet complex app (a code editor in the browser inspired in VS Code using the Monaco Editor). You will learn a lot of things from such a simple project:

  1. React with Typescript (we are going to use React Hooks and use it with TS)

  2. React best practices (configuring Prettier for formatting your projects, centralizing environment variables, centralizing your theme config, etc)

  3. Redux (dispatching actions, using selectors, etc.)

  4. Redux Toolkit (creating async and synchronous thunks, slices, etc.)

  5. Material UI (we will be using lots of components from this UI library and learn how to use the ThemeProvider)

  6. Testing (with Jest!)

  7. Docker (to dockerize our app easily!)

  8. Authentication with Auth0 (we'll learn how to configure an SPA with Auth0 and use its hooks)

  9. Protecting routes with React Router Dom and Auth0

  10. Implementing dark mode (with the help of MUI)

At the end of this course, you will be able to transfer all the knowledge you will get to a real world application. You can also take this project as a portfolio project. It contains lots of things that you would use in a big React application.

Lots of courses concentrate on the basics of React. In this course we will be building a simple yet complex app. You will see that we will cover lots of things in such a short amount of time!


Screenshots

Building modern React apps (w/ Redux Toolkit + Typescript)
Building modern React apps (w/ Redux Toolkit + Typescript)
Building modern React apps (w/ Redux Toolkit + Typescript)
Building modern React apps (w/ Redux Toolkit + Typescript)

Content

Introduction

Introduction

Defining the Code Editor App requirements

Installing Node.js (directly or with NVM or with asdf)

Installing Docker and Docker Compose

Creating the Auth0 account

Code Editor App

Creating the boilerplate code

Configuring Prettier for formatting

Dependencies

Adding the necessary dependencies

Dockerizing the app

Configuring Auth0

Setting up environment variables

Creating the AuthProvider component

Creating a common Loading component

Creating the dark mode slice

Adding tests for the dark mode reducer

Configuring Redux Persist

Configuring the store

Creating the ReduxProvider component

Creating typed Hooks

Configuring the app colors

Creating the CustomThemeProvider component

Creating Protected Routes with Auth0

A little bug!

Creating the Routes component

Creating the Header component

Creating the SignIn component

Creating the SignOut component

Creating the authenticated and unauthenticated buttons

Testing the authentication

Creating the Home page component

Testing the Home page with React Testing Library

Defining the Custom File and File viewer types

Creating the Files reducer

Adding the files reducer business logic

Testing the files reducer (Part 1)

Testing the files reducer (Part 2)

Changing the store folder structure

Make sure to update your imports

Creating the selectActiveFiles selector

Creating the Open Workspace button

Reading files (Part 1)

Reading Files (Part 2)

Creating an Extension Icon reusable component

Tests for the selectFileViewerData selector

Creating the selectFileViewerData selector

Creating the File Viewer component

Creating the Open File thunk

Creating the Code Editor page

Creating the Custom Tab Panel

Creating the Code Editor Container

Creating the onTabClick handler

Creating the Custom Tab Label component

Creaint the Close File thunk

Creating the Custom Monaco Editor and finishing the app

Conclusion

Conclusion


Reviews

K
Kevin11 April 2021

You will build a cool code editor but have absolutely no idea what you wrote or why you did it. Very little explanation for the code that's written. Also, there is a folder for every little thing and the instructor switches back and forth so quick it's hard to follow along without stopping the video to figure out where he is at. Pros: Instructor does respond to comments quickly. Cons: You won't learn very much but will have a cool app after.


3932374

Udemy ID

3/23/2021

Course created date

3/30/2021

Course Indexed date
Bot
Course Submitted by