Mô tả

Important note: This course was made in 2017 when classes were the primary model for React and ES6 was new. Since then, the model has changed substantially to focus on functional programming (hooks). Smaller, but important changes like using next.js, redux-tool-kit, etc. have also gotten traction. I do cover hooks in both React and Redux (react-redux module), but the course is focused around the older model. It still works, it's just "outdated" as current React goes. Please be aware of that if you are new, and if you prefer a class based model, then this might be exactly what you are looking for.


This course:

Starting with Angular 1 in 2010, JavaScript frameworks exploded onto the scene and are required by virtually every large website on the Internet. React, which appeared a few years later in 2013  has become the dominant tool in that group. What does that mean for you? You can learn to use the same front-end framework used by Facebook, Amazon, Netflix, BBC, Airbnb, and Ebay, to name a few. And you won't just learn how to use it, but you'll learn the fundamentals around it.

TL;DR - React is awesome. I've been teaching it professionally for 8 years and love it. Learn it here!

What I need from you:

  • I need you to know JavaScript, CSS, and HTML.

  • It's not required to use React, but React makes very heavy use of ES6 (the 2015 update to JavaScript), so the course will use ES6 after the first main section. I will briefly mention how it works as needed, and add a supplemental section that covers those parts.

  • I need you know how to navigate your computer, not be afraid of the terminal, and ask questions as you have them!

Why me:

I first used React in 2014 for a small company website. I've also used Angular, Vue, and Ember along with most other major UI frameworks and I'm a believer in React. I've taught it professionally for 4 years, and have built sites for some of the largest companies in the United States using React Router and redux alongside. I will teach you one step at a time, whiteboard, and start from ground zero before getting to webpack and eventually Redux. Prepare to start learning the best JavaScript framework!

The sections in bold will be finished no later than August 15. I will send out a message when they are complete.

Sections:

  1. Environment Setup (skip if you have node installed already)

  2. React 101

  3. State and Events

  4. The Component Lifecycle and HTTP

  5. Project 1 - Flash Card app (AWS services)

  6. React Router

  7. Redux

  8. Redux Middleware (redux-promise and redux-thunk)

  9. AirBnB Clone with Redux

    1. Overview of Auth From a Front-end Perspective

  10. Building/Preparing React for Deployment

  11. Hooks - the "2020 way" to do React

  12. Context

  13. Supplemental - ES6 for React

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

How to use React to make awesome front-end UIs!

How to set up, navigate, and use create-react-app to build React applications with ease

How to use React without webpack or ES6

The React component lifecycle system

Have a good idea how to make a large project (we do a small clone of AirBnB)

Yêu cầu

  • Familiarity with JavaScript. I don't expect you to be a JS jedi, but you should not be new

Nội dung khoá học

16 sections

Introduction and housekeeping

4 lectures
Github repo, course layout, and how to get help
00:12
Installing Nodejs and VSCode - MAC (Skip if you have it)
08:38
Installing Nodejs on a PC (Skip if you have)
04:46
Using Visual Studio Code on a PC (Skip if you have)
02:21

React 101

18 lectures
Introduction - early course layout - and github repo
02:36
Optional - A brief history of JS and why we need React
11:51
How we'll use Express in this section
04:51
REQUIRED - Making a basic Express server for development
03:11
Your First React Program
05:46
Uhh, What Just Happend?
07:25
JSX & Babel
17:41
ReactDom.render() and the virtual DOM
05:38
Components
08:11
Props
10:40
PRACTICE! - Using Components and Props
06:52
Multiple Components in an Array
06:10
Components as Classes
09:29
PRACTICE! - Class, Array. and Components
13:20
LoremPixel Repalcement
00:07
Breaking Down Components - Part 1
08:05
Breaking Down Components - Part 2
12:07
Section Review
12:14

State and Events

15 lectures
Create React App - making development easier
03:35
Create React App - the node modules
07:28
Coding in Create React App
12:07
What is state? (no coding)
12:01
State in Action
10:26
State do's and don'ts
07:29
Events in React
11:00
Available events
01:38
Changing state with an event
10:30
Practicing with state
02:21
Practicing with state - walkthrough
09:31
Updated Image URLs
00:20
State and props together
19:14
Stateless Components vs. Stateful Components
08:27
Stateless vs Stateful example
04:36

The Component Lifecycle and HTTP

18 lectures
Section Intro
04:16
Getting started with axios & HTTP
04:11
Axios URL
00:00
Using Axios and a free api (openweathermap.org)
03:31
The Component Lifecycle
13:28
The Docs
04:37
The Lifecycle - componentDidMount()
07:32
The Lifecycle - render()
02:32
More practice with render, state, and http
07:53
Adding an input box
06:07
The Lifecycle - componentDidUpdate()
12:58
Practice - Refactoring the weather widget
10:46
The Lifecycle - componentWillUnmount()
05:37
The plan for the next few videos
01:13
Managing forms with State
12:32
Data flows down, so pass state up! Part 1
08:27
Data flows down, so pass state up! Part 2
15:26
Styling components
06:28

Project - AWS flash cards - Practice with state and component lifecycle

11 lectures
Project Demo
02:23
Setting up our app structure
04:55
QuizBar and FontAwesome glyphicons
08:27
QuizType - a component inside QuizBar
10:36
Cleaning up QuizBar
03:31
IMPORTANT: A fix for the next video
00:44
Flash Card Component
09:40
Getting our data with Axios
09:54
Adding a spinner
04:25
Adding Flash Card Component Logic
07:32
Moving State up one last time
08:23

React Router

12 lectures
IMPORTANT: React Router v6 update
02:26
Intro to React Rrouter
06:10
Router, Route, and Link
10:49
NavLink and Making a NavBar
10:08
Routes with Component vs. Render
03:54
Nested Routes
06:52
Router Component Props - history, location, and match
12:33
Dynamic URL's and URL params & Short Review
08:50
Endpoint for next lecture
00:05
Mini-Project - Movie Fan App
14:04
Mini-Project - Continued
08:33
Mini-Project - Finished
07:44

Redux

13 lectures
What is Redux?
08:40
Redux and React
12:03
How Redux works
08:10
Wiring Up Redux
15:43
CONNECTing Redux and React
17:44
Adding more reducers to our store
08:43
Adding an action creator and action
13:29
Adding the dispatcher
18:47
Adding Meat and Produce
12:17
STOP: REVIEW
09:03
Adding the Router
07:23
Getting a little more out of redux
09:09
Getting a little more out of redux - an action
08:39

Redux Middleware - async action creators!

5 lectures
Section Intro
01:35
Quick review of reducers, actions and action creators
09:24
Trying axios/http without middleware (overview of codebase)
12:27
Redux-promise
05:24
Redux-thunk
13:27

Project - Airbnb Clone

25 lectures
Project Intro & Demo
03:33
Thinking through our app structure
07:11
Create React App and folder setup
02:41
Index.js & Redux
05:31
App.js & React Router
02:51
Overview of the api
05:16
NavBar Component
10:31
Home - SearchBox (mostly markup and css)
18:06
City, Slider, & Spinner components
12:47
Font Awesome URL's
00:03
Make the Spinner component
03:46
Add Cities to the homepage (with some refactoring)
11:00
Add the Slider and put the cities inside
12:58
Refactor Home - Part 1
06:56
Refactor Home - Part 2 - Promise.all()
07:06
Build Activties
08:23
Finish Activity component
11:45
Houses assignment
01:33
Single City Component
12:09
Single City Component - Part 2
11:00
Single City Component - Part 3
07:15
Login, Registration, & Modal
01:41
The return of REDUX!! Build the Modal
17:35
Filling in the Modal content
09:35
We'll pick up on Airbnb after a short section on auth!
00:02

A front-end overview of authentication

5 lectures
Auth - intro
02:01
What is HTTP and what does it have to do with auth?
08:30
An actual HTTP message
05:17
The problem with HTTP and Auth
08:45
How a JWT works
06:09

Project - Airbnb Clone Continued

36 lectures
SignUp Component Refactor
13:31
Login Component Refactor
07:28
Login and Signup endpoints
02:54
Getting our JWT (JSON Web Token)
08:30
Getting feedback to the user
07:16
Auth and redux
10:20
Updating components on signup/login
07:47
Logout
04:25
Login Challenge
04:17
Redux Persist (middleware) - keep redux (and login) from resetting!
09:26
Redux Persist - Part 2
07:36
Remaining Project Goals
02:52
SingleCity, many Venues component
12:46
Displaying reserve a room
10:35
Momentjs & Validate Reserve Dates
10:06
Stripe Key
00:01
Adding an external Script file to a component
13:08
An annoying bug fix
00:42
Integration with Stripe
13:46
Setup payment success page and & component
03:33
Payment Success Structure (markup)
04:40
Payment Success Data
07:29
Payment Success Finishing Options
01:52
Markup without data for Payment Success
00:41
Markup with data for Payment Success
00:39
Note: Reservations and Users
00:16
Account Page Prep
04:32
Account Page Prep Instructions
00:19
Account Page Review
02:50
AccountSideBar and Page Routes
06:03
Fetch and sort data, and pass to Bookings
11:20
Booking Markup
09:19
Cancel a reservation
10:33
Search Box
07:56
Search Page
07:42
Building our app (or any React app)
05:41

Deploying a React App

7 lectures
Intro & npm run build
06:43
A tour of the build folder
03:28
Building at the root domain
04:33
Loading Production... Locally
03:36
The homepage property
10:11
React.lazy
09:03
React.Suspense
08:45

Before we talk about Hooks...

8 lectures
Section Intro
01:49
An intro to hooks and should you use them?
11:39
Using React to explain OOP and functional programming - BACKGROUND
12:35
Paradigm Chart
04:47
Paradigm 1 - Imperative & Procedural
08:53
Paradigm 2 - Imperative & OOP
03:51
Paradigm 3 - Procedural & Functional
16:26
Paradigm 4 - OOP & Functional
07:20

Hooks

19 lectures
Back to Hooks
08:23
The return of the weather widget!
13:41
useEffect
09:16
useEffect explained
08:32
The docs - componentWillUnmount & multiple useEffect
09:40
Refactoring a class - weatherAppHooks
04:20
New Project Clone
04:33
Refactor the Search component
07:04
The Rules of Hooks
06:19
Custom Hooks
08:47
The structure of a custom hook
10:38
Redux with Hooks
04:53
Getting ready for redux - refactor Account
05:25
Using redux with hooks - useSelector
07:04
Using redux with hooks - useDispatch
02:20
useDispatch in Action - Login
09:27
useStore hook
01:38
All 4 hooks! NavBar
06:47
Challenge - Refactoring remainder of AirBnB
00:00

Context

8 lectures
What is context?
04:59
Making a context
09:53
Context Provider
09:11
Context Consumer
04:21
Changing Context down stream
05:07
Short Review of What Context Is
01:09
Context with classes
06:18
I’ve heard it replaces Redux. Does it?
03:21

Supplemental

10 lectures
Intro to section
01:01
Let & Const
05:35
Template Literals
04:06
Object Literals
03:23
Destructuring and Spread
08:01
Rocket Functions
06:57
Classes - constructor/prototype review (the original way)
04:57
Classes and sub classes - the 2015 version of a constructor
06:21
Overriding methods in child classes
03:55
How we'll use classes in this course
03:22

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