Mô tả

This course is completely up-to-date with React in 2023! A ton of material has been added and revised in this course. In the updated course, you’ll find additional content including:

  • New sections on React Hooks.

  • A ton of reference content for In-Depth JavaScript walkthroughs.

  • Revised material for modern React in 2022: createRoot, root.render, modern React Router, etc.

  • Revised material for modern Redux in 2022: @reduxjs/toolkit, updates on best practices, etc.

  • Extra Github reference content, including a new commit-per-lecture guide to make sure you can troubleshoot at every step of the way in the course.

Since this course’s release, this has been one of the most popular and best-selling React bootcamps on the platform. Here are the testimonials from a handful of students who have taken the course:

  • “This course is great! David is super knowledgeable AND passionate about React and it’s obvious in the course quality. I've taken a lot of programming courses on Udemy and David is by far the best instructor I've come across!”

  • “It is very clear and well explained. He explains every idiom related to the topic theoretically and by examples so you can have a complete idea about what is going on and why you need every file folder. The application examples are explained very clearly so you can follow up with him and get the same result. Also there is a code challenge to try if you want before seeing the answer. The course is well constructed and explained so never miss it especially if you got lost in the folder tree of react app or about its specialization. Highly recommended.”

  • “I started with some React concepts in mind and I found this course very useful. Also I am learning practical ways to do things and advance to Redux for more complex apps. I like very much the step by step, simple to complex, and practical style to explain concepts. Also, David is very nice and quickly solves any question.”

  • "David is a champ! One of the best course instructors I've ever encountered. Not only is his level of knowledge very impressive, but his timing, delivery, and tone create a very easy to follow experience. He's extremely thorough!"

***

With five minutes of your time, I’ll explain why this course is the best investment of time you can make to learn how to code React 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, not why examples were working, or 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, and 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 could have been better, more efficient, giving 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 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.

*****

So Why should you take this course?

I’ve applied the best practices of software I’ve learned in my software engineering career, and the feedback from my thousands of reviews in over 15 other coding courses, 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 support 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.

  • Dive into React Hooks to learn how to write React apps now and in the future. React hooks, as the new paradigm for React development, are a must in any bootcamp experience on React and frontend web development.

  • Optionally explore in-depth JavaScript. At the end of the course, you will find a trove of optional videos that will bring your JavaScript knowledge to the next level.

*****

[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


*****

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

See you in the course!

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

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

Learn React the right way and learn best practices, from an engineer with 5+ years of industry experience.

Modern Redux in 2022-2023: modern syntax and best practices.

Modern React in 2022-2023: createStore, functional components, etc.

React hooks in 2023-2023 - explore fundamental hooks, and build hooks from scratch.

Explore the React engine, and learn how it works under the hood to better understand the Virtual DOM, state, props, etc.

Learn React in 2022-2023 the right way and learn best practices, from an engineer with 5+ years of industry experience.

Learn how to build applications from scratch, setting up your own react-app-template.

Create industry-relevant projects that you can use on your portfolio and resume.

See how React fits in the big picture of web development, with a ton of detailed overviews on what is happening in the browser and the React engine.

Access 3+ hours of in-depth JavaScript material to hone your JS skills.

Yêu cầu

  • Beginners are welcome!

Nội dung khoá học

14 sections

Introduction

4 lectures
What You’ll Get From Taking this Course
04:12
A 7m Overview of Web Development and React
07:18
Course Repo and Software Installations
01:14
Optional For Windows: Install the Windows Subsystem for Linux and VS Code
08:40

Optional Reference Content

2 lectures
Optional Mega JavaScript Overview Part 1
15:37
Optional Mega JavaScript Overview Part 2
09:45

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:05

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:17

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
08:16
Higher Order Components - Revised
11:27
Section Summary
01:03

Core React Concepts Review

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

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
06:24
Section Summary
00:40

Redux and More Advanced React - Sequel Preview

26 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

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 & 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

17 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
Mailjet API post-contact Server Action and Next.js Environment Variables
16:00
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

49 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
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
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
07:20
Promise from Scratch
05:35
JavaScript Engine and Runtime
14:56
Await and Async
05:34
Interview Question | Asynchronous JavaScript
04:54

Conclusion and Course Sequel

3 lectures
Congratulations and Course Sequel
01:47
Redux Overview [Redux Bootcamp Preview]
06:14
Bonus Content!
00:28

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