Mô tả

Learn the world's most popular library for creating user interfaces!

What makes this course different is we take the time to understand *why* we're doing what we're doing. We begin by asking an important question that so many other React courses skip entirely; What problem does React solve?

Once we understand what React is and isn't, we spend the remainder of the course together building the front-end for a real world social media app where you can post, follow other users and even hop into a live chatroom. Along the way we will:

  • Understand what "state" is in React and how to bring our interfaces to life

  • Use the modern "hook" approach with Function Components

  • Leverage React Router to create a Single Page Application with shareable URLs

  • See the power of Context, Reducer, and Immer and create an ideal way of working with state

  • Run code at the perfect moments by understanding the power of useEffect()

  • Use async HTTP requests to communicate with APIs so that our app feels meaningful by working with real data

  • Deploy our app up onto the web so you can share it with your friends and family

This course may be brand new, but this isn’t my first time teaching. I’ve led training sessions for Fortune 500 companies and I’ve already helped over 98,000 people on Udemy and received the following feedback:

"Brad definitely has some of the best techniques to embed the lesson into your mind… hands down these are the best tutorials I have had the opportunity to view."

"Presentation is concise without being tedious… you honestly feel that you have a thorough understanding of the subject."

"…[Brad] explained the process. Not memorize this or that, he explained the process. If you're looking to take a course to understand the foundations of creating websites, look no further."

Become highly valuable and relevant to the companies that are hiring front-end developers; in one convenient place alongside one instructor. If you're ready to begin building with React - I'll see you on the inside!

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

The problem React solves and *why* we should use it (aside from "because it's popular")

How to create Single Page Applications with React

The ability to keep your code organized and manageable

How to seamlessly pull real and dynamic data into your front-end

Yêu cầu

  • A basic understanding of HTML (e.g. "p" is for paragraph, "h1" is for headline, etc...)
  • You could likely work through this course even without any JavaScript experience given the reasonable pace of lessons, but at least a tiny bit of JavaScript familiarity is recommended and will result in a much more enjoyable experience
  • No CSS knowledge required (although it helps to understand that CSS is used to add style & design to a page)

Nội dung khoá học

15 sections

Intro: The 10 Days of React

10 lectures
What Problem Does React Solve?
15:14
Let's Start Using React
18:04
What Is JSX?
08:23
Staying Organized: Components Using Other Components
06:21
Using Props To Make a Component Flexible
07:43
Looping Through An Array Within JSX
11:39
State
11:41
Handling Events (Like a Button Click etc...)
11:37
Working With Forms
17:40
What is UseEffect?
19:58

Getting Ready To Create a Real World App

5 lectures
Text Editor
14:15
Quick VS Code Settings
00:26
Node.js
04:38
Setting Up Our Workflow
19:58
Important Note About NPM Packages and The Zip Files in This Course
01:04

Let's Start Building Our App!

8 lectures
Starting Our Complex App
18:21
Tip: Always Have The Current Year In The Footer
00:09
Routing (Single Page Application)
19:41
Quick Note About Rendering React Components To The DOM
00:53
React Developer Tools
04:30
Creating a Visual Studio Code Snippet
08:06
Create a Reusable "Container" Component
10:34
Quick Details & Composition
12:12

Working With a Real Back-End

6 lectures
Choosing The Right Approach For You
00:28
Getting a Database Ready
11:09
Solution to Common Database Problem
00:30
Note About a Common Misspelling
00:23
Running The Back-End
06:03
Optional Alternative: Simple Docker Back-End
11:27

Connecting the Front-End and Back-End

10 lectures
Quick Note About Debugging
00:53
Sending a Request From the Front-End
12:55
Access Form Field Values with React
07:18
Logging In
11:59
Render Different Components Depending on State
10:36
Persisting State (Local Storage)
10:57
Conditional Homepage Content
11:57
Create Post Screen
17:27
View Single Post Screen
10:22
Flash Messages
14:22

Leveling Up The Way We Approach State

5 lectures
Context
16:42
useReducer
14:17
A Powerful Duo: useReducer & Context
15:52
What is Immer?
08:18
useEffect Practice
15:45

Actually Building Our App

6 lectures
Profile Screen
19:58
Load Posts by Author
17:02
Make Single Post Screen Actually Load The Real Content
12:09
Animated Loading Icon
06:33
Cleaning Up After Ourselves (useEffect)
07:37
Markdown in React
06:58

Edit & Delete Post Actions

6 lectures
Adding Tooltips on Hover for Actions
06:45
Edit (Update) Post Component
19:27
Edit Post Continued
18:35
Client-Side Form Validation
17:06
Quick Attention To Detail Features
19:27
Delete a Post
14:49

Search Overlay

6 lectures
Setting Up Search Overlay
16:21
React Transition Group (CSS Transition)
13:51
Regarding The Index In The Next Lesson
00:17
Waiting for User To Stop Typing
16:14
Finishing Search (Part 1)
13:23
Finishing Search (Part 2)
11:43

Letting Users Follow Each Other

3 lectures
Follow User Feature
19:59
Profile Followers and Following Tabs
17:10
Homepage Post Feed
19:23

Building a Live Chat Feature

4 lectures
Live Chat User Interface
18:10
Sending & Receiving Chats (Part 1)
12:01
Sending & Receiving Chats (Part 2)
09:03
Finishing Chat
19:30

Registration Form Validation

6 lectures
Improving Registration Form
19:58
Finishing Registration Form (Part 1)
18:36
Quick Note About If Statement
00:19
Finishing Registration Form (Part 2)
08:52
Quick Flash Message Details
02:41
Proactively Check If Token Has Expired
09:56

Getting Ready To Go Live

9 lectures
React Suspense - Lazy Loading (part 1)
13:28
React Suspense - Lazy Loading (part 2)
09:36
Note About Suspense for Data Fetching
00:42
Building a "Dist" Copy of Our Site
16:45
React Outside of the Browser (Part 1)
16:42
React Outside of the Browser (Part 2)
07:33
Two Quick Notes
00:33
Pushing Our API Backend Server Up To The Web
18:28
Pushing Our React Front-End Up To The Web
15:35

Concurrent React

1 lectures
Understanding Concurrency
18:05

Extra Credit Ideas / Challenges

4 lectures
Welcome To The Extra Credit Section
00:26
Profile Not Found Situation
00:18
Login Form: Highlight Empty Fields With Red Border
00:17
Allow For Other Color of Flash Messages (Not Only Green)
00:37

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