Mô tả

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!

Bạn sẽ học được gì

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.

Yêu cầu

  • Students who have some JavaScript experience will be most comfortable.

Nội dung khoá học

13 sections

Introduction

5 lectures
Introducing the Instructor
01:14
Installing React Tools
04:28
Installing a Code Editor
02:58
Source Code for the Course
00:44
Final Introductory Notes
00:13

Understanding React

2 lectures
React, Components, & JSX
02:16
State, Props, & Lifecycle Methods
02:35

Application One | AgeTeller

8 lectures
Previewing AgeTeller
00:49
Setting Up AgeTeller
06:41
Creating an App Component
04:01
Crafting a Form Component
06:23
Implementing State
07:36
Building a Stats Component
10:00
Adding Styling and Animations
08:11
Section Overview | AgeTeller
00:43

Understanding Redux

2 lectures
Redux - the 3 Step Recipe
02:41
Section Overview | Understanding Redux
00:31

Redux Application One | SuperSquad

13 lectures
Previewing SuperSquad
00:55
Setting Up SuperSquad
06:37
The First Reducer
04:51
The Store
04:21
The First Action
09:30
Adding a Second Reducer
11:08
Mapping State to Props in a CharacterList
07:50
Mapping Dispatch to Props
06:16
Styling the App
07:01
Creating a Hero List
07:03
The Second Action
06:13
Building a Squad Stats Component
08:26
Section Overview | SuperSquad
01:14

Redux Application Two | RecipeFinder

14 lectures
Previewing RecipeFinder
01:15
Setting Up RecipeFinder
04:42
Creating a Form to Search Recipes
07:40
Coding Break | Web Requests
00:33
Accessing the API
08:54
Fetching from the API
04:21
Storing Recipes
09:38
Building a Recipe List
05:41
Making Recipe Items
10:33
Storing Favorite Recipes
07:30
Starring Recipe Items
04:40
Building a Favorite Recipe List
09:08
Routing Recipe Lists
09:38
Section Overview | RecipeFinder
01:11

Redux Application Three | MemeGenerator

13 lectures
Previewing MemeGenerator
01:27
Setting Up MemeGenerator
04:36
Getting Access to the API
03:48
Fetching Memes Asynchronously
07:23
Applying Thunk Middleware
07:52
Listing Memes
07:25
Creating Meme Items
05:56
Animating Meme Items
05:19
Crafting a Custom Meme Form
05:48
Reducing and Posting Personal Memes
08:22
Setting Up a Post Meme Action
09:17
Building a Personal Memes List
05:27
Section Overview | MemeGenerator
00:56

React Hooks Section 1 - Dive into Hooks Development

7 lectures
Project One Preview
02:00
Set Up Project One | Revised
06:55
First Hook: useState | Revised
15:28
useEffect
13:56
Challenge and Code: Stories Component with UseEffect | Revised
09:32
Build a Custom Hook: useFetch
14:04
[Optional] Function Keyword vs Arrow Functions
08:15

React Hooks Section 2 - Hooks Under the Hood

12 lectures
Section Preview - Hooks Under the Hood
00:47
The React Runtime and How React Applies Hooks
11:08
UseState Under the Hood
07:19
Tasks Component Part 1: Multiple useState hooks
11:36
Tasks Component Part 2
08:58
The Order of UseState
06:23
Local Storage for Tasks
08:18
Hooks with an Interval
12:15
Effects with Cleanup
06:17
Dynamic Delay and Increment
11:23
Challenge and Code: Matrix Component
11:54
Build a Custom Hook: useDynamicTransition
07:30

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

18 lectures
The Why of Hooks
05:26
Project Two Preview
02:43
The Reducer Pattern Overview
03:24
Set Up Reaction App
04:34
Reactions Reducer State
10:51
UseReducer for Tasks | Part 1
10:24
UseReducer for Tasks | Part 2
09:59
PublishMessage Component
07:31
Challenge and Code: MessageBoard Component
03:56
UseContext and a Custom Context Hook
08:20
The PubSub and Reducer Architecture
03:54
Explore PubNub
10:31
PubSub Function and Reducer Connection
09:14
Set Username
09:08
CreateReaction Component
03:59
Reactions Reducer flow
08:09
Publish Reactions
05:31
MessageReactions Component
06:14

Next.js and React 18 Project

16 lectures
React Fundamentals and Client vs. Server Components In Depth
07:32
Start the Next.js and React Project
08:41
Link to Pages with Next/Link | Grid Item
17:14
Style with Tailwind CSS
21:35
Next.js Fonts and Responsive Design
14:43
Connect Page Setup
11:03
Next.js Client Components
19:53
Next.js Server Actions (get-followers)
14:39
React 18 useTransition and Create Contact Form
24:49
Next.js Layout Structure, Loading.js, and Global Components
09:43
Next.js Dynamic Segments and generateStaticParams | record/[id]
18:02
Next.js generateMetadata | record/[id]/page.js
06:06
React Suspense and React lazy | Embed
19:54
Next.js not-found and Route Groups
13:56
Nested Dynamic Segments | record/[id]/[content]
14:05
Breadcrumbs Component and Next.js useSelectedLayoutSegments | nav-title
24:41

Optional In-Depth JavaScript Content

50 lectures
The Console, Operators, and Variables
04:34
Booleans and Conditionals
11:55
Syntax - Semicolons and Comments
05:40
Undefined and Primitives
03:21
Arrays
06:53
Objects
04:26
Loops and Iteration
09:02
Functions - Declarations vs. Expressions
10:04
Arrow Functions
06:46
Methods and the `this` Keyword
06:08
More on `this` and Function Expressions vs. Arrow functions
05:40
Interview Question | The `this` Keyword
13:43
Callbacks
08:35
Interview Question | Callbacks
12:47
A Dynamic Language and Types
05:42
Almost Everything is an Object
04:18
Equality and Type Coercion
08:29
Truthy and Falsy
09:49
Null vs. Undefined
04:38
Explicit Type Conversion
03:58
Interview Question | JavaScript Types
16:53
Let, Const, and Mutability
05:56
Let, Const, Var, and Scope
10:09
Var and Function Hoisting
07:31
Interview Question | Scope and Hoisting
07:17
Template Literals and Ternary Operators
08:47
The Property Shorthand and Destructuring Assignment
10:10
Object methods
07:16
Spread Syntax
05:22
Object.is, References, and Shallow Clone
12:13
JSON.parse, JSON.stringify, and an Attempt at Deep Cloning
11:24
Custom and Lodash CloneDeep
17:18
Interview Question | Cloning an Object
12:10
Closures
09:10
Function Factories
05:35
Higher Order Functions
06:25
Interview Question | Closures, Higher-Order Functions, and Callbacks
12:47
Redux Overview [Redux Bootcamp Preview]
06:14
Object-Oriented Programming
04:27
Constructor functions
10:08
Classes
06:03
Prototypes and the Prototype-Based Inheritance
10:27
Object Prototype, .__proto__, and the prototype chain
07:26
Interview Question | Prototype-Based Inheritance
13:29
Asynchronous Code with SetTimeout
06:29
Fetch and Promise
06:29
Promise from Scratch
07:20
JavaScript Engine and Runtime
14:56
Await and Async
05:34
Interview Question | Asynchronous JavaScript
04:54

Final Remarks & Bonus Content

1 lectures
Final Remarks & Bonus Content
00:45

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.