React Tutorial and Projects Course

Introduction and Setup

Course Intro

Preview

What is React

Preview

Course Structure

Course Requirements

Dev Environment Setup

Text Editor Setup

Install create-react-app

Command Line Basics

NPM Basics

What is create-react-app, Babel, Webpack

Install create-react-app

create-react-app Folder Structure

React Basics Tutorial

First React Component

First React Component in Detail

React JSX Rules

Nested Components and ES6

More Props and Destructuring

React Basics Tutorial Continued

Import and Export (ES6 Modules)

Class Based Components in React

Functional VS Class Based Components

State

Alternative State Syntax

Book Mini Project

Events

this.setState

Passing Methods and "Prop Drilling"

Passing Methods to Children Components

Navbar Component Logic

Navbar Component SASS

Main Project Structure

TourList Component

Tour Component Logic

Tour Component Styling

Tour Info Toggle

Tour Component Delete

Deploy on Netlify with Drag and Drop

Deploy on Netlify with Continuous Deployment

Finished Project

React Basics Tutorial Continued

Prop Types

isRequired and defaultProps

PropTypes : ObjectShape

Controlled Inputs and Form Submission

Controlled Inputs and Use Case

Uncontrolled Inputs with ref

React Fragment and this.setState() Asynchronous

Bootstrap and Folder Structure

Github and Netlify Pipeline

App Component

Input Component

Handle Change and HandleSubmit

Todo List Component

Todo Item Component

Clear List and Delete Method

CSS and React Hooks Info

Project Setup Files

Scaffold React Application

Google Fonts, CSS Variables and App.css

Github - Netlify Pipeline

React-Icons Intro

Styled-Components Intro

Folder and Page Structure

React Router Setup

Navbar-Sidebar-Sidecart-Footer

About Page and Title Component

Contact Page

Formspree

Footer

Home Page Services Section

Products Data Intro

Setup State in Context

SetProducts

Image URL Fix

Install create-react-app

React Tutorial and Projects Course Install create-react-app

By: John Smilga

8 minutes

Share the link to this page

Copied

Facebook

Twitter

Add the class to your calendar

Add to Google Calendar

Add to Apple Calendar

Add to Yahoo Calendar

Add to Outlook Calendar

Completed

You need to have access to the item to view this lesson.

One-time Fee

$99.99

List Price: $139.99

You save: $40

€94.67

List Price: €132.55

You save: €37.87

£79.13

List Price: £110.78

You save: £31.65

CA$140.19

List Price: CA$196.27

You save: CA$56.08

A$153.90

List Price: A$215.47

You save: A$61.56

S$133.95

List Price: S$187.54

You save: S$53.58

HK$778.23

List Price: HK$1,089.55

You save: HK$311.32

CHF 88.29

List Price: CHF 123.61

You save: CHF 35.31

NOK kr1,103.93

List Price: NOK kr1,545.55

You save: NOK kr441.61

DKK kr706.23

List Price: DKK kr988.76

You save: DKK kr282.52

NZ$169.87

List Price: NZ$237.82

You save: NZ$67.95

د.إ367.25

List Price: د.إ514.17

You save: د.إ146.91

৳11,891.45

List Price: ৳16,648.51

You save: ৳4,757.05

₹8,441.95

List Price: ₹11,819.06

You save: ₹3,377.11

RM447.25

List Price: RM626.17

You save: RM178.92

₦166,762.32

List Price: ₦233,473.92

You save: ₦66,711.60

₨27,643.94

List Price: ₨38,702.63

You save: ₨11,058.68

฿3,455.42

List Price: ฿4,837.72

You save: ฿1,382.30

₺3,458.79

List Price: ₺4,842.45

You save: ₺1,383.65

B$580.06

List Price: B$812.10

You save: B$232.04

R1,807.38

List Price: R2,530.41

You save: R723.02

Лв185.40

List Price: Лв259.56

You save: Лв74.16

₩139,431.41

List Price: ₩195,209.55

You save: ₩55,778.14

₪373.90

List Price: ₪523.47

You save: ₪149.57

₱5,890.51

List Price: ₱8,246.95

You save: ₱2,356.43

¥15,375.85

List Price: ¥21,526.80

You save: ¥6,150.95

MX$2,023.49

List Price: MX$2,832.97

You save: MX$809.47

QR362.91

List Price: QR508.09

You save: QR145.18

P1,357.62

List Price: P1,900.72

You save: P543.10

KSh12,923.70

List Price: KSh18,093.70

You save: KSh5,170

E£4,953.11

List Price: E£6,934.55

You save: E£1,981.44

ብር12,318.34

List Price: ብር17,246.17

You save: ብር4,927.83

Kz91,240.87

List Price: Kz127,740.87

You save: Kz36,500

CLP$97,196.23

List Price: CLP$136,078.61

You save: CLP$38,882.38

CN¥723.96

List Price: CN¥1,013.58

You save: CN¥289.61

RD$5,995.75

List Price: RD$8,394.29

You save: RD$2,398.54

DA13,338.53

List Price: DA18,674.48

You save: DA5,335.94

FJ$226.94

List Price: FJ$317.73

You save: FJ$90.78

Q768.81

List Price: Q1,076.37

You save: Q307.55

GY$20,819.01

List Price: GY$29,147.45

You save: GY$8,328.43

ISK kr13,756.62

List Price: ISK kr19,259.82

You save: ISK kr5,503.20

DH996.34

List Price: DH1,394.91

You save: DH398.57

L1,817.34

List Price: L2,544.35

You save: L727.01

ден5,825.76

List Price: ден8,156.30

You save: ден2,330.54

MOP$797.89

List Price: MOP$1,117.08

You save: MOP$319.18

N$1,802.21

List Price: N$2,523.16

You save: N$720.95

C$3,662.39

List Price: C$5,127.50

You save: C$1,465.10

रु13,434.94

List Price: रु18,809.46

You save: रु5,374.51

S/378.24

List Price: S/529.55

You save: S/151.31

K400.31

List Price: K560.45

You save: K160.14

SAR375.36

List Price: SAR525.52

You save: SAR150.16

ZK2,744.04

List Price: ZK3,841.77

You save: ZK1,097.72

L471.18

List Price: L659.67

You save: L188.49

Kč2,396.54

List Price: Kč3,355.25

You save: Kč958.71

Ft38,535.91

List Price: Ft53,951.82

You save: Ft15,415.90

SEK kr1,097.18

List Price: SEK kr1,536.10

You save: SEK kr438.91

ARS$99,841.85

List Price: ARS$139,782.59

You save: ARS$39,940.73

Bs687.64

List Price: Bs962.72

You save: Bs275.08

COP$442,190.80

List Price: COP$619,084.81

You save: COP$176,894.01

₡50,678.85

List Price: ₡70,952.42

You save: ₡20,273.57

L2,513.64

List Price: L3,519.20

You save: L1,005.56

₲775,611.66

List Price: ₲1,085,887.35

You save: ₲310,275.69

$U4,292.93

List Price: $U6,010.28

You save: $U1,717.34

zł409.79

List Price: zł573.73

You save: zł163.93

Already have an account? Log In

React Tutorial and Projects Course

Install create-react-app

Sign Up

Sign Up

Share