Mô tả

Want to learn React and Redux applications the right way?

Give my five minutes of your time, and I’ll explain why this course is the best time investment you can make to learn how to code React and Redux apps.


*****

When I was first learning web development and software engineering, I used courses, tutorials, stackoverflow threads, and public github projects. It was invigorating - teaching myself the skills that would start a career.

But I often found that tutorials only showed me what methods to use. I had to piece together examples, trying to figure out why examples were working - why bugs were popping up. Even when I found a code fix, there was often that missing layer of how the update addressed the problem.

It was a grind. The learning process could have been more efficient with better resources.


Fast forward five years, and I’m working as a full-stack software engineer at Zendesk in San Francisco. I often think back to those first couple years teaching myself web development.

The resources should have given me not only what to write, but why the fix addresses the issue, and how the code works under the hood.

So that is what I’ve created in this course. A React and Redux learning experience that will give you all three of those important aspects to understanding code: what methods to use, why to use those methods, and how those methods work under the hood.


*****

I really believe that taking this course will be a valuable investment of your time. I want to ensure that even reading this description is a good use of time. So I'm letting you know:

The first couple sections are free to preview.

I believe that if you only end up doing this free content, you’ll still walk away with a complete React application, and a lot of valuable lessons learned.


*****

Why take this course from me?

As mentioned before, I’m a full-stack software engineer working at Zendesk in San Francisco. I’ve also released 15 courses (a lot of them on React), with more than 170,000 students from 192 countries so far.

I’ve applied the best practices of software I’ve learned in my career, and the feedback from my thousands of reviews, to craft the best learning experience possible for you in this course. You’ll find a healthy balance of conceptual theory, and practical hands-on experience. You’ll gain skills right from the get-go in the first section. And you’ll build interesting and relevant projects throughout the course.


*****

In this course, you will:

  • Dive into React code right away. You will gain relevant experience as soon as the first section. Time is precious. And I want to make sure that you’ll never feel like you’re wasting it in this course. So in a matter of minutes, you will be writing React code in the first section, with a fully completed app by the end of it.

  • Understand how React fits in the big picture of web development. In the second section, you will take an important step back and examine how React fits in the big picture of web development. You’ll build a React project from scratch - discovering all the layers that are in between the supplies that supports the React app, and the browser which displays the React app.

  • Create relevant and compelling React apps. I’m betting you’ll find the apps both useful and interesting. Useful ones like the portfolio app will help you both learn React, and be valuable as a completed project for your software engineering and web developer profile. Fun ones like “Music Master”, will make coding lively, giving you apps you want to show off to your friends and family.

  • Learn Redux the right way, breaking it down. Redux is a must with React. But it has a much higher learning curve, since the concepts are more complex. In this course, every Redux method is going to be taken one step at a time. You’ll dig deeper into how the methods work under the hood. You’ll learn more than what methods to use. You’ll learn how those methods work individually and together. And you’ll learn why methods are written in a certain way, and when they should be applied. That way, you have the deep understanding that will empower you to write React and Redux apps long into the future.

  • Build more awesome apps! As you learn redux in the later sections, the projects will remain interesting and relevant. You’ll make a mini React game, using an external API. And you’ll create a React app that has multi-user functionality! Supporting multiple users is a staple of so many web applications - but can be surprisingly hard to pull off. But you’ll find the solution in this course both elegant and extendable.

  • Explore backend web development. I think it’s important to learn essential backend skills as a React and web application developer. With React app, you’re often using APIs to supply the content of your application. So having the ability to create your own backends, and APIs, will give you the capability to make React apps of any kind, for your own unique use cases, long after you complete this course.

  • Deploy your React applications. The projects you create in this course will be deployed to production. That way, you can share your the products of your work with anyone you like!


*****

In summary, you should take this course if you want to learn React and Redux in a time-efficient way, while building relevant and engaging projects.

Once again, the first couple sections are free to preview. Even if you only complete the free content, you’ll walk away with a full React app, and lots of valuable lessons learned.

See you there!


*****

Promo music provided by Ben Sound.

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

Updated for 2022-2023: Learn how to code with React JS, Redux, and React Hooks from an engineer with 5+ years of industry experience.

How to bootstrap React applications in under a minute with create-react-app.

How to build React projects from scratch without create-react-app.

Where React fits in the big picture of web development.

Transpiling and bundling React applications.

Modern best practices of React and Redux development.

How to use APIs to create unique and interesting applications.

Redux at a deeper level. How each layer of a Redux application really fits together.

The reasons why bugs appear, the proper fixes for those bugs, and why certain solutions are more optimal than other ones.

Deployment of React applications.

Backend essentials too, and how to create backend APIs.

Yêu cầu

  • Familiarity with JavaScript.
  • Familiarity with the command line is preferred.

Nội dung khoá học

16 sections

Introduction

4 lectures
What You’ll Get From Taking this Course
07:27
A 7m Overview of Web Development and React
07:18
[IMPORTANT] Course Repo and Software Installations
01:07
Optional For Windows: Install the Windows Subsystem for Linux and VSCode
08:40

Welcome to React | First React Application

17 lectures
Section Overview | First React Application
02:51
Set up the Portfolio App - Revised
05:24
Run the React App and the React Project Structure - Revised
19:57
ReactDOM, Elements, and JSX - Revised
07:30
A React Component - Revised
09:01
Classes - Overview
03:25
Classes, Inheritance, and a Closer Component Look
10:54
State
09:12
SetState
09:46
A React Rule: Never Directly Modify State
06:44
Class Properties and Initializers
03:40
Component 2: Projects
12:25
Props and Project Component
08:40
Challenge: Social Profiles Component
04:28
Code: Social Profiles Component
06:52
Wrap up with Low-Hanging Styling Fruit
11:59
Section Summary
01:08

Breaking down React | React and Web Development

7 lectures
Section Overview
03:39
React from Scratch - Revised
14:58
Compiling, Bundling, and a Closer Look at JSX - Revised
16:02
Refactor the Portfolio to use Parcel - Revised
10:51
The Necessity of Bundlers and Transpilers Review
04:59
The DOM and React’s Virtual DOM
07:37
Section Summary
01:20

Continued Main React Concepts

13 lectures
Section Preview
02:22
Lifecycle Methods and componentDidMount
10:04
ComponentWillUnmount
06:09
[Optional] Title Fade
08:58
Stateless Functional Components
08:42
[Optional] HTTP Overview
04:52
Fetch and a Jokes Component
11:31
Challenge and Code: Ten More Jokes
08:30
Fetch Under the Hood: Promises
12:00
React Router - Revised
09:13
Header Component - Revised
08:16
Higher Order Components - Revised
11:27
Section Summary
01:22

Core React Project: MusicMaster 2.0

10 lectures
Section and Project Preview
03:22
Set up Music Master and Your Own React App Template - Revised
10:56
Track User Input in the State
07:19
Challenge and Code: Search an Artist’s Top Tracks
10:33
Challenge and Code: Artist Component
09:12
Tracks Component
13:14
Search Component and Lifting State Up in Callback Props
08:20
Styling Finishing Touches
10:40
Include Music Master in Portfolio - Revised
04:42
Section Summary
00:41

Core React Concepts Review

2 lectures
Core React Review
06:57
Core React - Glossary of Key Terms
01:37

Redux and more Advanced React

27 lectures
Section and Project Preview
03:11
Redux Overview
06:14
Set Up Evens or Odds and the Redux Store - Revised
07:33
Reducers - Revised
05:45
Actions - Revised
15:02
Action Creators - Revised
09:22
Root Reducer Update and the Spread Operator - Revised
11:54
Split the Redux Layers - Revised
08:11
Connect React Components to Redux - Revised
08:29
Redux-based UI
06:54
Map Dispatch to Props
03:32
Challenge and Code: Interactive Instructions
12:58
Fetch Deck of Cards
10:20
Note: The deckofcardsapi updated their CORS policy
00:19
CORS and Same Origin Policy
10:39
Async Actions
06:54
Redux Middleware - Revised
07:46
Handle Fetch Cases
13:27
Split up and Combine Reducers | Revised
12:36
DrawCard Component
05:23
Challenge and Code: Draw Card Redux Flow
13:57
Challenge and Code: Card Component
05:26
Challenge and Code: Guess Redux Logic and Component | Revised
12:34
Track Correct Guesses
09:31
Correct Guess Record and Local Storage
10:25
Include Evens or Odds in Portfolio | Revised
10:07
Section Summary
02:18

Redux Project: Reaction

18 lectures
Section and Project Preview
02:37
Publish/Subscribe with Redux
04:03
Set Up the Reaction App
05:21
PubNub Exploration
10:20
PubSub Class and Redux Connection
08:28
Messages Redux Flow
09:19
Publish Message Component
07:55
React Context
10:07
Redux Devtools
02:59
Challenge and Code: Message Board Component
05:47
Challenge and Code: Username in Redux
09:22
Username in Messages
04:52
CreateReaction Component
06:08
Reactions Redux Flow
08:51
Publish Reaction
06:33
MessageReactions Component
06:39
Include Reaction in Portfolio
05:41
Section Summary
01:07

Redux Review

2 lectures
Redux Review
07:07
Redux - Glossary of Key Terms
02:21

Create Backend APIs for React Apps

11 lectures
Section Overview
02:55
Set Up News App and Express Server
06:44
GET Stories and Nodemon
08:03
Express Middleware and CORS
06:17
Request an API within an API
07:09
Error Handler
10:23
Top Story Items
11:30
Spotlight: Deck of Cards and Spotify Wrapper APIs
04:11
Set up News React Client and Serve a React App with Express
10:24
Challenge and Code: Fetch and Display Stories
05:44
Section Summary
01:13

React App Deployment

4 lectures
Section Overview
00:52
Github Walkthrough
08:27
Heroku Deployment
14:31
Section Summary
00:19

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
11:15
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

1 lectures
The Why of Hooks
05:26

Optional In-Depth JavaScript Content

36 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
07:46
A Dynamic Language and Types
05:42
Almost Everything is an Object
04:18
Equality and Type Coercion
08:29
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

Conclusion

2 lectures
Congratulations and Final Remarks
01:06
Bonus Content!
00:33

Đá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.