Danh mục
Development
Web Development Data Storage Git Automation Database Design Web Scraping
Business
Business Analysis Communication Project Management Sales Forecasting Business Strategy Operations Management Human Resources Oil and Gas Industry
Finance & Accounting
IT & Software
Office Productivity
SAP Word Excel PowerPoint Excel VBA SharePoint
Personal Development
Persuasion Notion Workspace Mind Mapping
Design
Design Sketching Typography Game Design Digital Art zBrush 3D Animation
Marketing
SEO Marketing Strategy YouTube Marketing Digital Marketing Facebook Marketing Growth Hacking Twitter Marketing Instagram Marketing
Lifestyle
Beer Brewing Beauty Home Repair Energy Healing Bartending Leather Crafting Makeup Artistry Hypnotherapy
Music
Piano Guitar Singing Music Production Acoustic Guitar Fingerstyle Guitar Music Theory Bass Guitar
Duocmmo Tedu Tin học văn phòng Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
React JS
The Modern React Bootcamp (Hooks, Context, NextJS, Router)

The Modern React Bootcamp (Hooks, Context, NextJS, Router)

Loại khoá học: Web Development

Just published! Follow the same curriculum I teach my students in SF. 10+ projects including one HUGE application!

image
50.000 VND
1.699.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

EXPANDED and UPDATED to include new sections on Next JS and Server-Side Rendering!

Welcome to the best online resource for learning React! Published in April 2019, this course is brand new and covers the latest in React.  This course follows the exact same React curriculum my in-person bootcamp students follow in San Francisco, where students have gone on to get jobs at places like Google, Apple, Pinterest, & Linkedin.  This is the most polished React course online, and it's the only course that is based on REAL bootcamp curriculum that has been tried and tested in the classroom.

This course builds up concepts one at a time, cementing each new topic with an expertly designed exercise or project to test your knowledge. It includes a huge variety of beautiful exercises, projects, and games that we create together from scratch.  Sometimes we mix things up and give you a broken React app and ask you to fix it or optimize the code. Check out the promo video to see a couple of the course exercises. The course culminates in one huge capstone project, which is the largest project I've ever built for any of my online courses.  I'm really excited about it :) 

React is the most popular JS library around, and there's never been a better time to learn it! Companies all over the world are turning to React to help manage their JavaScript chaos, including tech giants like Facebook, Airbnb, and Uber.  React is consistently voted the most loved and most wanted front-end framework by developers, and it's clear why! React is a joy to use, and it makes writing maintainable and modular JavaScript code a breeze.

If you're new to frameworks, React is the ideal first framework to learn. It's easy enough to learn the basics, but it doesn't teach you bad habits. Even if you've already enrolled in another React course, this course is worth your time for the exercises and projects alone!  This curriculum is the product of two years of development and iteration in the bootcamp classroom.   All the lectures, exercises, and projects have been tweaked and improved based on real student feedback. You won't find anything else online as structured and polished as this course.

The highlights:

  • Learn React, from the very basics up to advanced topics like Next JS, React Router, Higher Order Components and Hooks and the Context API.

  • Build one massive capstone application, complete with drag & drop, animations, route transitions, complex form validations, and more.

  • Learn the latest in React, including Hooks (my favorite part of React!).  We build a complete app using Hooks, including multiple custom hooks.

  • Learn state management using the useContext and useReducer hooks, to mimic some of the functionality of Redux.

  • You get tons of detailed handouts and cheatsheets that you can refer back to whenever you need to.   Think of this as a React textbook you can study at any point if you get tired of videos.

What you get:

  • 250+ videos

  • Slick, interactive slide decks custom made for each section

  • Detailed handouts and cheatsheets, the React "textbook".

  • Dozens of exercises, projects, and quizzes.

  • One massive code-along project with nearly 20 different React components.

  • Free Webpack Mini Course!

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

React Hooks! (My favorite part of React!)

The new Context API

State management w/ useReducer + use Context (Redux Lite)

The basics of React (props, state, etc)

Master React Router

Build tons of projects, each with a beautiful interface

React State Management Patterns

Drag & Drop With React

Writing dynamically styled components w/ JSS

Common React Router Patterns

Work with tons of libraries and tools

Integrate UI libraries like Material UI and Bootstrap into your React apps

React Design Patterns and Strategies

Learn the ins and outs of JSS!

Learn how to easily use React to build responsive apps

Add complex animations to React projects

Debug and Fix buggy React code

Optimize React components

Integrate React with APIs

Learn the basics of Webpack in a free mini-course!

DOM events in React

Forms and complex validations in React

Using Context API w/ Hooks

Yêu cầu

  • You'll need some experience with HTML, CSS, and JavaScript, but you don't need to be an expert.
  • You don't need advanced JavaScript knowledge. ES7 features are explained in the course as we go.

Nội dung khoá học

39 sections

A Taste of React

10 lectures
Welcome to the Course!
01:42
Join The Community!
00:19
Intro to React
03:35
Is React a Framework or Library?
05:03
Introducing Components!
10:32
Looking at a Large App
04:31
Setting Up Your Server
03:44
Writing Our First Component
09:32
Function Vs. Class Components
04:09
Download All Code, Slides, & Handouts
05:05

Introducing JSX

5 lectures
Basics Rules of JSX
04:43
How JSX Works Behind the Scenes
03:32
Embedding JavaScript in JSX
03:44
Conditionals in JSX
09:13
Standard React App Layout
05:08

Props and More

9 lectures
Intro to React Props
05:57
Props are Immutable?
02:21
Other Types of Props
05:53
Pie Chart Component Demo w/ Props
02:03
EXERCISE: Slot Machine
01:37
EXERCISE: Slot Machine Solution
06:47
Looping in JSX
05:19
Adding Default Props
02:42
Styling React
08:56

Introducing Create React App

9 lectures
Intro to Create React App
02:58
2 Ways of Installing CRA
04:25
Creating a New App
05:06
Starting Up the Server
05:06
Modules: Import & Export Crash Course
11:05
EXERICSE: Fruits Modules
02:43
EXERCISE: Fruits Modules Solution
07:39
Create React App Conventions
03:10
CSS and Assets in Create React App
07:51

Pokedex Project

7 lectures
Intro To Pokedex Exercise
07:01
Creating Pokecard Component
07:39
Adding Pokedex Component
04:28
Styling PokeCard and Pokedex
06:28
Adding Fancier Images
02:43
The PokeGame Component
09:16
Styling Pokegame
09:12

Introducing State

12 lectures
State Goals
02:01
Quick Detour: React Dev Tools
03:12
State in General
03:33
Initializing State
08:37
IMPORTANT! ALTERNATE SYNTAX
09:17
WTF is super() Vs. super(props)
07:24
Setting State Correctly
10:24
Crash Course: Click Events in React
10:49
ALTERNATE SYNTAX PT 2
05:52
EXERCISE: State Clicker
01:48
EXERCISE: State Clicker Solution
07:25
The "State As Props" Design Pattern
03:02

React State Dice Exercise

5 lectures
Introduction to Dice Exercise
08:21
Writing the Die Component
06:07
Adding the RollDice Component
09:02
Styling RollDice
04:05
Animating Dice Rolls!
10:36

React State Patterns

7 lectures
Updating Existing State
10:41
Mutating State the Safe Way
10:15
Designing State: Minimizing State
04:04
Designing State: Downward Data Flow
04:01
State Design Example: Lottery
03:51
State Design Example: LottoBall Component
04:02
State Design Example: Lottery Component
11:34

State Exercises!

4 lectures
State Exercise 1: Coin Flipper
02:45
State Exercise 1: Coin Flipper Solution
18:28
State Exercise 2: Color Boxes
02:35
State Exercise 2: Color Boxes Solution
10:16

The World of React Events

7 lectures
Commonly Used React Events
09:44
The Joys of Method Binding :(
09:36
Alternative Binding With Class Properties
05:03
Binding With Arguments
05:50
Passing Methods to Child Components
12:00
Parent-Child Method Naming
02:03
Quick Detour: React Keys
07:43

Hangman Exercise

9 lectures
Introducing The Hangman Exercise
08:00
Starter Code Walkthrough
10:07
Adding Keys
01:44
Tracking Incorrect Guesses
01:36
Adding Game Over
06:19
Adding Alt Text
01:54
Randomizing Words
02:17
Adding a Reset Button
03:12
Making the Game Winnable & Styling
08:23

Lights Out Game

6 lectures
Introducing Lights Out
03:07
Exploring the Starter Code
09:28
Displaying the Game Board
11:16
Flipping Cells
05:09
Winning the Game
03:24
Styling the Game
11:03

Forms in React

5 lectures
Intro to React Forms
10:53
Writing Forms w/ Multiple Inputs
07:21
The htmlFor Attribute
01:26
Design Pattern: Passing Data Upwards
10:28
Using the UUID Library
03:32

Forms Exercise

4 lectures
Introduction to Box Maker Exercise
01:58
Adding the BoxList Component
06:16
Creating the BoxForm Component
08:12
Removing Color Boxes
06:08

Todo List Project

7 lectures
Project Overview
02:09
TodoList and TodoItem Components
04:59
Adding NewTodoForm
06:02
Removing Todos
06:34
Editing Todos
12:08
Toggling Todo Completion
05:31
Styling the Todo App
10:43

Building Yahtzee

11 lectures
Introducing Yahtzee
08:16
Yahtzee Starter Code Walkthrough
13:16
Fixing the Dice Locking Bug
09:33
Reading the Rules Classes
16:02
Adding In New Rules
09:50
Fixing the Re-Rolling Bug
08:13
Preventing Score Reuse
09:20
Adding Score Descriptions
04:00
Replacing Text w/ Dice Icons
14:07
Animating Dice Rolls
13:45
Final Touches and Bug Fixes
09:17

React Lifecycle Methods

7 lectures
Introducing ComponentDidMount
08:47
Loading Data Via AJAX
06:56
Adding Animated Loaders
04:57
Loading Data With Async Functions
07:01
Introducing ComponentDidUpdate
04:20
PrevProps and PrevState in ComponentDidUpdate
06:37
Introducing ComponentWillUnmount
02:22

LifeCycle Methods & API Exercise

6 lectures
Introducing the Cards API Project
03:55
Requesting a Deck ID
05:24
Fetching New Cards with AJAX
10:36
Adding the Card Component
03:36
Randomly Transforming Cards
07:00
Styling Cards and Deck
05:29

Building the Dad Jokes App

13 lectures
Introducing the Dad Jokes Project
06:01
Fetching New Jokes From the API
07:42
Styling JokeList Component
10:07
Upvoting and Downvoting Jokes
09:01
Styling the Joke Component
05:59
Adding Dynamic Colors and Emojis
03:50
Syncing with LocalStorage
05:36
Fixing Our LocalStorage Bug
03:54
Adding a Loading Spinner
03:29
Preventing Duplicate Jokes
08:07
Sorting Jokes
02:35
Styling The Fetch Button
04:56
Adding Animations
06:35

React Router:

6 lectures
Intro to Client-Side Routing
09:48
Adding Our First Route
06:07
Using Switch and Exact
07:20
Intro to the Link Component
03:37
Adding in NavLinks
03:21
Render prop vs. Component prop in Routes
09:24

Vending Machine Exercise

5 lectures
Intro to Vending Machine Exercise
02:13
Adding The Vending Machine Routes
04:33
Adding the Links
04:17
Creating the Navbar
06:21
NEW CONCEPT: Props.children
07:02

React Router Patterns

9 lectures
Working with URL Params
12:46
Multiple Route Params
05:10
Adding a 404 Not Found Route
03:11
Writing a Simple Search Form
05:20
The Redirect Component
04:44
Pushing onto the History Prop
06:13
Comparing History and Redirect
03:05
withRouter Higher Order Component
04:31
Implementing a Back Button
02:57

Router Exercises Part 2

8 lectures
Exercise Introduction
03:27
Working with Bootstrap in React
06:49
Writing the DogList Component
09:30
Adding the DogDetails Component
13:41
Creating Our Navbar Component
10:00
Refactoring & Extracting Our Routes
02:43
A Couple Small Tweaks
03:13
Styling the App
11:42

The Massive Color Project Pt 1

12 lectures
Introducing the Color App
09:16
The New Stuff We Cover in This Project
07:48
Finding the Final Project Code
01:56
Creating the Palette Component
05:59
Color Box Basics
06:49
Styling Color Box
10:33
Copying to Clipboard
03:26
Copy Overlay Animation
14:50
Generating Shades of Colors
17:11
Adding Color Slider
07:39
Styling the Color Slider
06:03
Adding Navbar Component
09:23

The Massive Color Project Pt 2

6 lectures
Intro to Material UI & Adding Select
13:50
Adding Snackbar
12:09
Add Palette Footer
04:30
Integrating React Router
04:08
Finding Palettes
04:02
PaletteList and Links
06:02

JSS & withStyles (Color App)

4 lectures
Introducing withStyles HOC
10:50
Styling MiniPalette with JSS
06:51
Styling PaletteList with JSS
07:37
Finishing Up MiniPalette
07:46

The Massive Color Project Pt 3

10 lectures
Linking To Palettes
06:26
Brainstorming Single Color Palette
05:20
Adding More Links
06:30
Creating Single Color Palette
08:28
Displaying Shades in Single Color Palette
12:42
Adding Navbar and Footer
09:24
Add Go Back Box
09:48
Dynamic Text Color w/ Luminosity
11:21
Refactoring More Styles
17:31
Finish Refactoring Color Box
06:53

The Massive Color Project Pt 4

10 lectures
Refactor Palette Styles
08:11
Move Styles Into New Folder
06:36
Refactor Navbar CSS
08:46
Overview of PaletteForm
05:45
Adding NewPaletteForm
04:57
Adding Slide-Out Drawer
11:21
Adding Color Picker Component
09:46
Connecting Color Picker to Button
08:47
Creating Draggable Color Box
07:20
Introducing Form Validator
12:28

The Massive Color Project Pt 5

10 lectures
Saving New Palettes
11:01
Add Palette Name Form
10:17
Styling Draggable Color Box
06:49
Adding Color Box Delete
04:41
It's Drag and Drop Time!
14:58
Clear Palette and Random Color Buttons
11:05
Extract New Palette Nav
13:07
Extract Color Picker Component
11:48
Styling Palette Form Nav
05:43
Styling Color Picker
10:04

The Massive Color Project Pt 6

12 lectures
Adding Modals/Dialogs
07:33
Styling Dialog
08:49
Closing Form & Adding Emoji
05:21
Finish Emoji Picker Form
12:23
Moving JSS Styles Out
06:54
Tweak Form Styles
07:08
Saving to LocalStorage
05:02
Adding MiniPalette Delete Button
07:00
Finish MiniPalette Delete
08:52
Create Responsive Sizes Helper
14:17
Make Color Box Responsive
07:34
Make Form & Navbar Responsive
09:00

The Massive Color Project Pt 7

12 lectures
Make Palette List Responsive
08:45
Add SVG Background
08:07
Fade Animations w/ Transition Group
12:14
Delete Confirmation Dialog
16:52
Fix Delete/Drag Bug
03:24
Animating Route Transitions
08:21
Refactoring Route Transitions
09:03
Optimizing w/ PureComponent
07:57
Cleaning Things Up
03:58
More Cleaning Up!
07:23
Fix Issues w/ New Palette Form
06:02
Prevent Duplicate Random Colors
05:04

Introducing React Hooks

5 lectures
Intro to Hooks & useState
11:09
Building a Custom Hook: useToggleState
15:27
Building a Custom Hook: useInputState
15:25
The useEffect Hook
06:45
Fetching Data w/ the useEffect Hook
12:16

React Hooks Project

9 lectures
Intro to Hooks Project
10:15
Adding Our Form With Hooks
07:56
Adding Todo Item Component
10:38
Toggling and Deletion w/ Hooks
08:27
Editing w/ Hooks
12:06
Small Style Tweaks
04:56
LocalStorage w/ UseEffect Hook
05:37
Refactoring to a Custom Hook
06:10
Creating our UseLocaslStorateState Hook
13:43

Introducing The Context API!

10 lectures
Where We Are Heading
02:44
THE CODE FOR THIS SECTION!
00:36
What Even is Context?
08:34
Adding a Responsive Navbar To Our Context App
18:48
Adding a Responsive Form to our Context App
14:44
Intro to Context and Providers
12:43
Consuming A Context
07:56
Updating A Context Dynamically
05:05
Writing the Language Context
13:38
Consuming 2 Contexts: Enter the Higher Order Component
12:21

Using Context with Hooks

7 lectures
THE CODE FOR THIS SECTION
00:07
THE CODE FOR THIS SECTION!
00:07
Introducing the useContext Hook
05:33
Consuming Multiple Contexts w/ Hooks
03:11
Rewriting a Context Provider w/ Hooks
04:23
Context Providers w/ Custom Hooks
04:41
"Hookify-ing" the Rest of the App
03:03

State Management w/ useReducer & useContext

10 lectures
IMPORTANT: GET THE CODE HERE!
00:11
Adding In Todos Context
09:01
Consuming the Todo Context
05:50
The Issues w/ Our Current Approach
10:01
WTF Is a Reducer
08:34
First useReducer Example
12:13
Defining our Todo Reducer
13:25
Splitting Into 2 Contexts
06:44
Optimizing w/ Memo
05:44
Custom Hook: Reducer + LocalStorage
07:24

Next JS

8 lectures
Intro to Next
06:05
What is Server Side Rendering?
11:51
Getting Started w/ Next
08:28
Basic Routing in Next
06:35
Next's Link Component
06:01
Links Without Anchor Tags
02:08
Components Vs. Pages
04:14
Overriding the Default _app.js
07:19

Next: Fetching & Server API

8 lectures
Introducing getInitialProps
11:19
Fetching Posts w/ getInitialProps
11:03
Query Strings in Next
09:57
withRouter Higher Order Component
02:53
Fetching Comments
08:06
The "as" Prop
04:29
Custom Server Without Express
13:13
Custom Server-Side Routes w/ Express
12:41

Bonus: Webpack Mini Course - Your Own Simple Version of Create React App

10 lectures
What Is Webpack??
09:23
Installing and Running Webpack
14:23
Imports, Exports, and Webpack
07:56
Configuring Webpack
09:15
Webpack Loaders, CSS, & SASS
15:14
Cache Busting and Plugins
13:33
Splitting Dev & Production
10:16
Html-loader, file-loader, and Clean Webpack Plugin
11:21
Multiple Entry Points
06:44
Extract and Minify CSS
18:18

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

Khoá học liên quan

Laravel 10 - Build News Portal and Magazine Website (2024)

Laravel 10 - Build News Portal and Magazine Website (2024)

105 VND
50.000 VND
Shopify Theme Development: Create Shopify Themes [2023]

Shopify Theme Development: Create Shopify Themes [2023]

649.000 VND
50.000 VND
100 Days of Code: The Complete Python Pro Bootcamp

100 Days of Code: The Complete Python Pro Bootcamp

170 VND
50.000 VND
Master NestJS a Node.js Framework 2024

Master NestJS a Node.js Framework 2024

1.399.000 VND
50.000 VND
Spring Framework 5: Beginner to Guru

Spring Framework 5: Beginner to Guru

1.999.000 VND
50.000 VND
Ultimate Unity Overview (70+ Tools and Features Explained!)

Ultimate Unity Overview (70+ Tools and Features Explained!)

95 VND
50.000 VND
The Git & Github Bootcamp

The Git & Github Bootcamp

120 VND
50.000 VND
Clean Code

Clean Code

170 VND
50.000 VND
The Complete Oracle SQL Bootcamp (2024)

The Complete Oracle SQL Bootcamp (2024)

120 VND
50.000 VND
Khóa học Xử lý Dữ liệu cho Data Warehouse (Phần Cơ Bản)

Khóa học Xử lý Dữ liệu cho Data Warehouse (Phần Cơ Bản)

185 VND
50.000 VND
Framework Python với Selenium 3.x

Framework Python với Selenium 3.x

1.099.000 VND
50.000 VND
Html Css 21 Ngày: Tạo giao diện website chuyên nghiệp từ đầu

Html Css 21 Ngày: Tạo giao diện website chuyên nghiệp từ đầu

65 VND
50.000 VND
The Complete Java Development Bootcamp

The Complete Java Development Bootcamp

125 VND
50.000 VND
Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

25 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Build a Backend REST API with Python & Django - Advanced

Build a Backend REST API with Python & Django - Advanced

120 VND
50.000 VND
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.

Get khoá học cho tôi