React JS - Mastering Redux from Udemy

Updated for 2023. React, React Redux, React Hooks, In-depth JavaScript, resume-worthy projects, and more.

You will become an in-demand software engineer by taking this course on React JS and Redux. As one of the most popular pairs of frameworks, learning React and Redux is a must. Simply put, learning React will open doors and jobs for you.

This project-based course will have you coding right away. By building four carefully thought-out example applications, you will sharpen your skills in modern web development.

* First, learn the essentials of ReactJS by going through the main concepts.

* Then build your first React application to get familiar with the essentials.

* Create your first Redux application to learn how to pair this elegant and complex framework with React.

* Next, build an application that uses an API along with routing for multiple pages.

* Finally, build an additional app that works with another API and has more advanced redux mechanics.

You’ll not only learn React and Redux, but get comfortable with popular libraries like react-bootstrap, react-router-dom, and more. Plus, you’ll find a secret recipe to Redux that boils it down to three simple steps.

[2023 Update]

Also, this course contains optional content in Nextjs, React 18, and In-Depth JavaScript. Continue your learning React journey beyond hooks, here in this course.

Nextjs and React 18 are the modern ways to make a React application. In this course, you will also build a production-level Nextjs and React 18 project. During the Nextjs and React 18 project section, you will:

Go more into depth with server and client components.
Learn Nextjs server actions.
Explore the React 18 useTransition hook.
Expand upon Nextjs fundamentals, and create a shared layout structure.
Create dynamic segments with Nextjs and learn generateStaticParams.
Explore React Suspense and React lazy.
Dive deeper into advanced Nextjs hooks like useSelectedLayoutSegments, and useSearchParams.
Explore the React 18 useDeferredValue hook.
Learn how to deploy a Nextjs application.

Then follow with a bounty of In-Depth JavaScript content. During the In-Depth JavaScript section, you will find videos on:

* The Console, Operators, and Variables, Arrays, Objects.

* Functions - Declarations vs. Expressions, and Arrow Functions

* Methods and the `this` Keyword

* Callbacks

* A Dynamic Language and Types - "Almost Everything is an Object"

* Equality and Type Coercion

* Let, Const, Mutability, Var, and Scope

* Interview Question | Scope and Hoisting

* Template Literals and Ternary Operators

* The Property Shorthand and Destructuring Assignment

* JSON parse, JSON stringify, Custom and Lodash CloneDeep

* Closures

* Function Factories, and Higher Order Functions

* Prototypes and the Prototype-Based Inheritance, Object Prototype, proto, and the prototype chain

* Asynchronous Code with SetTimeout

* Fetch and Promise from Scratch

* JavaScript Engine and Runtime

* Await and Async

So what are you waiting for? Take the dive into React and Redux. Let’s get started coding.

What's inside

Learning objectives

Build entire reactjs and redux applications from scratch.
Develop apps that deal with apis and web requests.
Understand how to develop redux apps with actions, reducers, and the redux store.
Create web apps that use advanced redux mechanics like asynchronous actions and redux middleware.

Use es6 and advanced javascript techniques to more efficiently code.
Use animations to create compelling user interfaces and experiences.
Add external libraries to react projects like react-bootstrap, react-router-dom, and more.
Build multi-page applications with dynamic routes and links.

Build entire reactjs and redux applications from scratch.
Develop apps that deal with apis and web requests.
Understand how to develop redux apps with actions, reducers, and the redux store.
Create web apps that use advanced redux mechanics like asynchronous actions and redux middleware.
Use es6 and advanced javascript techniques to more efficiently code.
Use animations to create compelling user interfaces and experiences.
Add external libraries to react projects like react-bootstrap, react-router-dom, and more.
Build multi-page applications with dynamic routes and links.

Syllabus

Introduction

Introducing the Instructor

Installing React Tools

Installing a Code Editor

Source Code for the Course

Final Introductory Notes

Understanding React

React, Components, & JSX

State, Props, & Lifecycle Methods

Application One | AgeTeller

Previewing AgeTeller

Setting Up AgeTeller

Creating an App Component

Crafting a Form Component

Implementing State

Building a Stats Component

Adding Styling and Animations

Section Overview | AgeTeller

Understanding Redux

Redux - the 3 Step Recipe

Section Overview | Understanding Redux

Redux Application One | SuperSquad

Previewing SuperSquad

Setting Up SuperSquad

The First Reducer

The Store

The First Action

Adding a Second Reducer

Mapping State to Props in a CharacterList

Mapping Dispatch to Props

Styling the App

Creating a Hero List

The Second Action

Building a Squad Stats Component

Section Overview | SuperSquad

Redux Application Two | RecipeFinder

Previewing RecipeFinder

Setting Up RecipeFinder

Creating a Form to Search Recipes

Coding Break | Web Requests

Accessing the API

Fetching from the API

Storing Recipes

Building a Recipe List

Making Recipe Items

Storing Favorite Recipes

Starring Recipe Items

Building a Favorite Recipe List

Routing Recipe Lists

Section Overview | RecipeFinder

Redux Application Three | MemeGenerator

Previewing MemeGenerator

Setting Up MemeGenerator

Getting Access to the API

Fetching Memes Asynchronously

Applying Thunk Middleware

Listing Memes

Creating Meme Items

Animating Meme Items

Crafting a Custom Meme Form

Reducing and Posting Personal Memes

Setting Up a Post Meme Action

Building a Personal Memes List

Section Overview | MemeGenerator

React Hooks Section 1 - Dive into Hooks Development

Project One Preview

Set Up Project One | Revised

First Hook: useState | Revised

useEffect

Challenge and Code: Stories Component with UseEffect | Revised

Build a Custom Hook: useFetch

[Optional] Function Keyword vs Arrow Functions

React Hooks Section 2 - Hooks Under the Hood

Section Preview - Hooks Under the Hood

The React Runtime and How React Applies Hooks

UseState Under the Hood

Tasks Component Part 1: Multiple useState hooks

Tasks Component Part 2

The Order of UseState

Local Storage for Tasks

Hooks with an Interval

Effects with Cleanup

Dynamic Delay and Increment

Challenge and Code: Matrix Component

Build a Custom Hook: useDynamicTransition

React Hooks Section 3 - Reflection on the Why of Hooks & Project Two

The Why of Hooks

Project Two Preview

The Reducer Pattern Overview

Set Up Reaction App

Reactions Reducer State

UseReducer for Tasks | Part 1

UseReducer for Tasks | Part 2

PublishMessage Component

Challenge and Code: MessageBoard Component

UseContext and a Custom Context Hook

The PubSub and Reducer Architecture

Explore PubNub

PubSub Function and Reducer Connection

Set Username

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches foundational and emerging skills and tools in the web development industry

Provides a strong foundation in ReactJS and Redux, which are essential for building modern web applications

Introduces advanced JavaScript techniques such as hooks and async/await, which are important for writing efficient and scalable code

Emphasizes both theory and practical application, with students building several projects throughout the course

Provides a comprehensive overview of Redux, including concepts such as actions, reducers, and the Redux store

Covers the latest updates and trends in ReactJS and Redux, including React 18 and In-Depth JavaScript

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React JS - Mastering Redux with these activities:

Review Fundamentals of React

Show steps

Ensure a solid grasp of React's core principles before diving into the course.

Browse courses on React

Show steps

Revisit introductory tutorials or documentation on React.
Complete a few simple React projects to practice using the basics.

Review JavaScript fundamentals

Show steps

Build a stronger foundation in JavaScript to enhance your understanding of React and Redux concepts.

Browse courses on JavaScript

Show steps

Go over basic JavaScript syntax, data types, and control flow.
Practice writing simple JavaScript functions and objects.

Join a React and Redux study group

Show steps

Connect with other learners to discuss concepts, share knowledge, and work on projects together.

Browse courses on React

Show steps

Find or create a study group focused on React and Redux.
Attend regular meetings to collaborate, ask questions, and provide support to fellow members.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Read Learning React

Show steps

Expand your knowledge of React's core concepts and practical applications.

View Learning React: Modern Patterns for Developing... on Amazon

Show steps

Read relevant chapters on React fundamentals, components, and state management.

Follow React and Redux tutorials

Show steps

Supplement course materials with additional resources to reinforce your learning.

Browse courses on React

Show steps

Find reputable online tutorials that cover React and Redux basics.
Follow the tutorials step-by-step, experimenting with the code and concepts.

Build a small React and Redux project

Show steps

Apply your knowledge by creating a practical project that demonstrates your understanding of React and Redux.

Browse courses on React

Show steps

Define a simple project idea that involves data management and user interactions.
Set up a React and Redux project environment.
Implement the project, integrating React components with Redux state management.
Test and refine your project to ensure it meets the requirements.

Attend a React Workshop

Show steps

Gain hands-on experience and learn from experts in a structured workshop setting.

Show steps

Identify and register for a React workshop that aligns with your learning goals.
Actively participate in the workshop, ask questions, and take notes.
Apply the knowledge and skills gained in your React development projects.

Career center

Learners who complete React JS - Mastering Redux will develop knowledge and skills that may be useful to these careers:

Redux Developer

Redux Developers are responsible for the development of web applications using Redux. This course may be particularly relevant to those interested in working with React and Redux. It will help you build a strong technical foundation in these technologies.

See salaries and explore the career path for Redux Developer

React Developer

React Developers are responsible for the development of web applications using React and React-based frameworks. This course may be particularly relevant to those interested in working with React and Redux. It will help you build a strong technical foundation in these technologies.

See salaries and explore the career path for React Developer

Front-End Engineer

Front-End Engineers are responsible for the design, coding and maintenance of the front-end portions of websites. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced Front-End Engineers who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for Front-End Engineer

Web Designer

Web Designers are responsible for the visual design and user interface of websites. They may work on projects that require React and Redux skills. This course will help you build a strong foundation in React and Redux, which may be particularly relevant for those interested in working on the front-end of web applications.

See salaries and explore the career path for Web Designer

Software Architect

Software Architects are responsible for the design, development, and maintenance of software systems. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced Software Architects who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for Software Architect

Front-End Web Developer

Front-End Web Developers are responsible for the design, coding and maintenance of the front-end portions of websites. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced Front-End Web Developers who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for Front-End Web Developer

Web Application Developer

Web Application Developers are responsible for the development of web applications. They may work on projects that require React and Redux skills. This course will help you build a strong foundation in React and Redux, which may be particularly relevant for those interested in working on the front-end development of web applications.

See salaries and explore the career path for Web Application Developer

Application Engineer

Application Engineers are responsible for the design, development, and maintenance of software systems. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced Application Engineers who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for Application Engineer

Senior Engineer

Senior Engineers are responsible for the design, development, and maintenance of software systems. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced Senior Engineers who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for Senior Engineer

Lead Engineer

Lead Engineers are responsible for the design, development, and maintenance of software systems. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced Lead Engineers who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for Lead Engineer

Web Developer

Web Developers are responsible for the development, deployment, and maintenance of websites. They may work on projects that require React and Redux skills. This course will help you build a strong foundation in React and Redux, which may be particularly relevant for those interested in working on the front-end of web applications.

See salaries and explore the career path for Web Developer

Software Engineer

Software Engineers are responsible for the design, development, and maintenance of software systems. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced Software Engineers who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for Software Engineer

User Interface Engineer

User Interface Engineers are responsible for the design, implementation, and maintenance of the user interface of software systems. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced User Interface Engineers who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for User Interface Engineer

JavaScript Engineer

JavaScript Engineers are responsible for the development and maintenance of JavaScript-based software systems. They may work on projects that require React and Redux skills. This course will help you build a strong technical foundation in React and Redux. It may also be helpful for more experienced JavaScript Engineers who want to enhance their skills and specialize in React and Redux.

See salaries and explore the career path for JavaScript Engineer

Full-Stack Web Developer

Full Stack Web Developers are responsible for the development, deployment, and maintenance of websites. They may work on projects that require React and Redux skills. This course may be particularly relevant to those interested in working on the front-end development of web applications.

See salaries and explore the career path for Full-Stack Web Developer