React Tutorial and Projects Course
4.6 (913 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13,066 students enrolled

React Tutorial and Projects Course

Step by Step Learn React.js and Create Interesting Projects
4.6 (913 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
13,066 students enrolled
Created by John Smilga
Last updated 5/2020
English
English [Auto-generated]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 45.5 hours on-demand video
  • 17 articles
  • 116 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Make Great Projects Using React
Requirements
  • Strong Knowledge of HTML, CSS, JS is Required. ES6 is optional.
Description

React was released by Facebook's web development team in 2013 as a view library. React is one of the best choices for building modern web applications. React has a slim API, a robust and evolving ecosystem and a great community. In this course we will be learning React by creating various projects.If you want to learn more than just same old tutorial and instead create interesting projects using React.js this course is for you.

All Project Intros are available for preview.

Project Nr 1 - Person List Project

Project Nr 2 - City Tours Project

Project Nr 3 - React To Do Project

Project Nr 4 - Beachwalk Resort Project

Project Nr 5 - Tech Store E-commerce Project

REACT HOOKS PROJECTS

Project Nr 6 - Budget Calculator Project

Project Nr 7 - CocktailDB API Project

Project Nr 8 - Vintage Tech Project

REDUX PROJECTS

Project Nr 9 - Counter/Tutorial Project

Who this course is for:
  • Everyone who wants to learn React
Course content
Expand all 363 lectures 45:39:14
+ Introduction and Setup
8 lectures 24:36
Course Review
00:33
Course Structure
01:28
Course Requirements
01:32
Javascript ES6 Module
00:29
Dev Environment Setup
03:47
Text Editor Setup
09:57
+ Install create-react-app
5 lectures 31:07
Command Line Basics
06:06
NPM Basics
05:48
What is Create-react-app, Babel, Webpack
01:27
Install Create-react-app
08:28
Create-react-app Folder Structure
09:18
+ React Basics Tutorial
11 lectures 01:43:24
Resource Download
02:47
First React Component In Detail
07:43
React JSX Rules
10:13
Nested Components and ES6
05:11
Mini Book Project
10:29
CSS in React
11:58
Javascript in JSX
11:23
Props
14:31
More Props and Destructuring
13:05
Children Props
05:25
+ Person List Project
3 lectures 25:53
Main Project
24:25
Project Files
00:32
+ React Basics Tutorial Continued
11 lectures 02:22:38
Import and Export (ES6 Modules)
26:33
Class Based Components in React
07:32
Functional VS Class Based Components
03:28
State
30:40
Alternative State Syntax
06:06
Book Mini Project
10:15
Events
09:33
this.setState
10:31
Passing Methods and "Prop Drilling"
12:31
Passing Methods to Children Components to Work with State
14:42
Conditionals in JSX
10:47
+ City Tours Project
14 lectures 01:36:18
Font Awesome Update
00:18
Install and Setup
13:59
Font Awesome Update!
00:18
Navbar Component Logic
07:31
Navbar Component SASS
07:14
Main Project Structure
09:23
TourList Component
11:17
Tour Component Logic
09:35
Tour Component Styling
11:24
Tour Info Toggle
03:54
Tour Component Delete
04:54
Deploy on Netlify with Drag and Drop
03:56
Deploy on Netlify with Continuous Deployment (Github, Git)
09:28
+ React Basics Tutorial Continued
7 lectures 01:24:50
PropTypes
13:19
isRequired and defaultProps
05:10
PropTypes : Object Shape
09:19
Controlled Inputs and Form Submission
26:34
Controlled Inputs Use Case
02:03
Uncontrolled Inputs with ref
08:47
React Fragment and this.setState() Asynchronous
19:38
+ Todo List Project
15 lectures 01:39:06
Font Awesome Update!
00:18
Setup
06:35
Font Awesome Update!
00:18
Bootstrap and Folder Structure
12:29
Github and Netlify Pipeline
07:09
UUID Update!
00:09
App Component
14:48
Input Component
08:10
Handle Change and HandleSubmit
10:31
Todo List Component
08:11
Todo Item Component
07:35
Clear List and Delete Method
03:42
Edit Method
15:04
Finished Application
02:35
+ Beach Resort Project
33 lectures 05:52:27
Setup Files and CSS
02:18
Scaffold React Application
04:44
Project Setup
09:17
Page Setup
04:38
Router Setup
10:19
Navbar Component
16:07
Hero Component
07:45
Banner Component
10:58
Services Section
13:23
Local Data
06:30
Context Api Setup
19:50
Format Data
15:58
Loading Component Setup
04:58
Featured Rooms Component
05:33
Room Component
14:42
GetRoom Function
04:40
Single Room Setup
10:40
Single Room Hero
08:47
Styled-Hero
15:49
Single Room Complete
14:25
Room Container
23:36
Room List
06:17
Room Filter Setup
07:37
Type Filter
28:36
Capacity Filter
07:14
Price Filter
08:29
Size-Checkbox Filter
09:50
Contentful Interface
07:45
Content Model
08:01
Content
09:11
Consume Content
18:19
Deploy On Netlify
10:32