❗The content presented here is sourced directly from Udemy platform. For comprehensive course details, including enrollment information, simply click on the 'Go to class' link on our website.

Updated in [June 30th, 2023]

This course provides an overview of React with Redux, React-Router, Hooks, and Auth0. Students will gain an understanding of the most modern form of React and Redux, as well as the routing and authentication patterns in the modern era. They will also learn the knowledge and skills required for front-end positions, the inner workings of React, and the ability to understand how various front-end technologies interact with one another. Finally, students will gain an understanding of Javascript syntax in ES5, ES6, and ES7.

[Applications]
The application of this course can be seen in the development of modern web applications. With the knowledge and skills acquired from this course, developers can create React applications with Redux, React-Router, and Auth0. They can also use the latest Javascript syntax in ES5, ES6, and ES7 to create dynamic and interactive web applications. Furthermore, they can understand how various Front End Technologies interact with one another, giving them the ability to impress other engineers.

[Career Paths]
A career path that is recommended for learners of this course is a Front-End Developer. Front-End Developers are responsible for creating the user interface of a website or application. They use HTML, CSS, and JavaScript to create the visuals and functionality of a website or application. They must be able to understand the user experience and create a design that is both visually appealing and functional.

Front-End Developers must have a strong understanding of React, Redux, React-Router, Hooks, and Auth0. They must be able to create and maintain complex user interfaces using these technologies. They must also be able to debug and troubleshoot any issues that arise.

The development trend for Front-End Developers is to stay up to date with the latest technologies and trends. As new technologies are released, Front-End Developers must be able to quickly learn and adapt to them. They must also be able to create responsive designs that work across multiple devices and browsers. Additionally, they must be able to create user interfaces that are optimized for performance and accessibility.

[Education Paths]
The recommended educational path for learners interested in React with Redux React-Router Hooks and Auth0 is a Bachelor's degree in Computer Science or a related field. This degree will provide learners with the foundational knowledge and skills necessary to understand the inner workings of React, as well as the ability to understand how various front-end technologies interact with one another. Learners will also gain an understanding of Javascript syntax in ES5, ES6, and ES7, as well as an understanding of routing and authentication patterns in the modern era.

The development trend for this educational path is to focus on the latest technologies and frameworks, such as React, Redux, React-Router, and Auth0. As these technologies become more popular, learners will need to stay up to date with the latest versions and understand how to use them effectively. Additionally, learners should focus on developing their problem-solving skills, as this will be essential for success in the field.

Course Syllabus

Course Promo

Course Intro

JavaScript refresher (optional)

Text Editor (optional)

Recommended to watch all videos on 1.5x speed

node.js

Command Line Tool

Redux Dev Tools

Developer Accounts

Slides

For more free courses in the future follow me on twitter

Getting Started with create-react-app

JSX Overview

03. Displaying variables in JSX

04. Understanding Class and Function Scopes

05. How extends Component works

styling patterns in React

React Under the Hood - the Virtual DOM

Displaying Objects in JSX

Props

Components

How functional Components work

Props in functional components

Props in class components

React state

Initializing State

updating state with setState()

updating state with the previous state

working with multiple state properties

Passing down state as props

conditionally rendering in JSX

ternary expressions

alternate conditional rendering method

summary of the 3 ways to conditonally render JSX

lifecycle methods()

Working with Lists

working with forms

What and why Redux

3 principles of Redux

React-Redux oveview

actions

Action Creators

Reducers

Setting up the actions and reducer

createStore()

Creating a react-redux container

mapStateToProps()

mapDispatchToProps()

the connect() method

Connecting a container to React-Redux

Summarizing the Redux Flow

Testing our React-Redux container

Setting up action creators

Passing in data to action creators

getting our data from redux state

rendering data to the UI

multiple reducers

updating and reading state reference

routing overview

history syntax update

setting up routes

going deeper in react-router

testing our routing

in dept look at routing

Switch and exact

react router props

dynamically rendering components

auth0 flow

setting up the auth0 app

initializing the auth0 class

JWT tokens

pasing tokens and handleAuth()

handling the callback and authentication

authentication flow in Redux

setting up the authcheck component

setting up protected routes and the PrivateRoute HOC

implementing the login and logout buttons

Google oauth login

facebook oauth login

extracting the user profile data

setting up profile action creators

setting up the profile actions in authcheck

dynamically render the profile

silent authentication

why not redux thunk

React Hooks Intro

2 rules off using hooks

4 Hooks Overview

useState() overview

useEffect() overview

useReducer() overview

Context overview

useContext() overview

Migration Guide from Redux to React hooks

6 ways to update state reference

Project Intro

Starter Code

creating your first React hook

adding the useState() hook

adding the useEffect() hook

adding the useReducer() hook

adding the useContext() hook

adding a Global state with Context

creating a form with React Hooks

adding useReducer() to the form

adding global state to the form

Final Code