About
LearnDesk
Learn  
Topics
Topics
Topics
Topics
Topics
Topics
Topics
Teach
  Teach Online
  Schedule
  Items
  Billing
  Users
  Marketing
  Analytics
  Settings
  Change School
Account
 

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
Mini Book Project
CSS in React
Javascript in JSX
Props
More Props and Destructuring
Children Props
Person List Project
Intro
Preview
Main Project
Finished Project
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
Conditionals in JSX
City Tours Project
Intro
Preview
Font Awesome Update
Setup Files
Install and Setup
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
Todo List Project
Intro
Preview
Font Awesome Update
Setup
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
Edit Method
Finished Application
Finished Project
Food2Fork Recipe App
Intro
Preview
Project Setup Files
Setup
Font Awesome Update
Fonts-FontAwesome-Setup Files
Bootstrap - Main CSS Setup
Github-Netlify-Continuous Deployment
React Router Intro
Application Page Structure
React Router Setup
Navbar Component
Header Component
Default Page
Recipe Page Structure
Search Component
Food2Fork API Overview
Recipe List Component
Recipe Component
Single Recipe Page
Single Recipe Page Ajax Request
Environment Variables
Recipe Page Ajax Request
Search Functionality
Finished Project
Beach Resort Project
Intro
Preview
CSS and React Hooks Info
Project Setup Files
Scaffold React Application
Project Setup
Page Setup
Router Setup
Navbar Component
Hero Component
Banner Component
Services Section
Local Data
Context API Setup
Format Data
Loading Setup
Featured Completed
Room Component
getRoom Function
Single Room Setup
Single Room Hero
Styled-Hero
Single Room Complete
Room Container
Room List
Room Filter Setup
Type Filter
Capacity Filter
Price Filter
Size-Checkbox Filter
Contentful Interface
Content Model
Content
Consume Content
Deploy on Netlify
Finished Project
Tech Store
Intro
Preview
Setup Files
Setup and Installs
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
Context API Intro
Context API Setup
Navbar Context API
Navbar Component
Sidebar Component
Sidecart Component
Hero Component
Main Links Class
Default Page
About Page and Title Component
Contact Page
Formspree
Footer
Home Page Services Section
Products Data Intro
Setup State in Context
SetProducts
Image URL Fix
Featured Products Section
Product Component
All Products Section
AddToCart Method
AddTotals Method
SyncStorage Method
SetSingle Product Method
Tech Store Project Continued
SetSingleProduct Page
SideCart Component
Cart page Method Placeholders
CartPage Component Setup
CartPage Setup
Cart Columns Component
Cart Totals Component
Cart List Component
Cart Item Component
Increament Method Logic
Remove Item Logic
Clear Cart and Decrease Method Logic
Filter Products Context Setup
Filter Products Product Component Setup
Product Filter Component
Select Input Logic
Handle Change Method Logic
Sort Data Method Logic
Contentful Intro
Contentful Interface
Setting Up Content Model
Adding Content
Retrieve Content
Setting Up Environment and Build Variables
Image Fix
Paypal Button Setup
React Router Netlify Fix
Finished Project
Budget Calculator Project
Intro
Preview
Project Setup Files
Bootstrap React App
Folder Structure
Initial List
useState Intro
App Component
Expense List
Expense Item
Expense Form
Controlled Inputs
Handle Submit
Alert Component
Clear Items
Handle Delete
Handle Edit
LocalStorage API
useEffect
Finished Project

First React Component in Detail

React Tutorial and Projects Course React Basics Tutorial
By: John Smilga
7 minutes
Share the link to this page
Copied
  Twitter
  Email
Add the class to your calendar
Print
  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
€84.92
List Price:  €118.89
You save:  €33.97
£74.07
List Price:  £103.70
You save:  £29.63
CA$138.05
List Price:  CA$193.27
You save:  CA$55.22
A$151.60
List Price:  A$212.25
You save:  A$60.64
S$128.28
List Price:  S$179.60
You save:  S$51.32
HK$777.01
List Price:  HK$1,087.84
You save:  HK$310.83
CHF 79.36
List Price:  CHF 111.12
You save:  CHF 31.75
NOK kr993.20
List Price:  NOK kr1,390.51
You save:  NOK kr397.31
DKK kr633.82
List Price:  DKK kr887.38
You save:  DKK kr253.55
NZ$170.68
List Price:  NZ$238.96
You save:  NZ$68.28
د.إ367.21
List Price:  د.إ514.11
You save:  د.إ146.90
৳12,183.68
List Price:  ৳17,057.64
You save:  ৳4,873.96
₹8,829.11
List Price:  ₹12,361.10
You save:  ₹3,531.99
RM420.40
List Price:  RM588.58
You save:  RM168.18
₦149,594.03
List Price:  ₦209,437.63
You save:  ₦59,843.60
₨28,431.41
List Price:  ₨39,805.12
You save:  ₨11,373.70
฿3,177.68
List Price:  ฿4,448.88
You save:  ฿1,271.20
₺4,138.01
List Price:  ₺5,793.38
You save:  ₺1,655.37
B$533.37
List Price:  B$746.75
You save:  B$213.37
R1,727.89
List Price:  R2,419.12
You save:  R691.22
Лв166.22
List Price:  Лв232.71
You save:  Лв66.49
₩139,095.16
List Price:  ₩194,738.79
You save:  ₩55,643.63
₪335
List Price:  ₪469.02
You save:  ₪134.01
₱5,691.73
List Price:  ₱7,968.65
You save:  ₱2,276.92
¥14,784.47
List Price:  ¥20,698.85
You save:  ¥5,914.38
MX$1,838.79
List Price:  MX$2,574.39
You save:  MX$735.59
QR364.01
List Price:  QR509.63
You save:  QR145.61
P1,334.61
List Price:  P1,868.52
You save:  P533.90
KSh12,918.70
List Price:  KSh18,086.70
You save:  KSh5,168
E£4,821.78
List Price:  E£6,750.68
You save:  E£1,928.90
ብር14,379.82
List Price:  ብር20,132.33
You save:  ብር5,752.50
Kz91,186.39
List Price:  Kz127,664.59
You save:  Kz36,478.20
CLP$95,425.45
List Price:  CLP$133,599.45
You save:  CLP$38,174
CN¥711.17
List Price:  CN¥995.67
You save:  CN¥284.50
RD$6,211.81
List Price:  RD$8,696.78
You save:  RD$2,484.97
DA12,960
List Price:  DA18,144.52
You save:  DA5,184.52
FJ$225.20
List Price:  FJ$315.29
You save:  FJ$90.09
Q766.87
List Price:  Q1,073.65
You save:  Q306.78
GY$20,945.41
List Price:  GY$29,324.42
You save:  GY$8,379
ISK kr12,127.78
List Price:  ISK kr16,979.38
You save:  ISK kr4,851.60
DH903.11
List Price:  DH1,264.39
You save:  DH361.28
L1,649.87
List Price:  L2,309.88
You save:  L660.01
ден5,229.33
List Price:  ден7,321.27
You save:  ден2,091.94
MOP$802.50
List Price:  MOP$1,123.54
You save:  MOP$321.03
N$1,738.30
List Price:  N$2,433.69
You save:  N$695.39
C$3,686.73
List Price:  C$5,161.58
You save:  C$1,474.84
रु14,114.98
List Price:  रु19,761.53
You save:  रु5,646.55
S/348.74
List Price:  S/488.26
You save:  S/139.51
K418.77
List Price:  K586.29
You save:  K167.52
SAR375.02
List Price:  SAR525.05
You save:  SAR150.02
ZK2,369.20
List Price:  ZK3,316.98
You save:  ZK947.77
L430.97
List Price:  L603.38
You save:  L172.40
Kč2,059.79
List Price:  Kč2,883.78
You save:  Kč823.99
Ft33,054.88
List Price:  Ft46,278.16
You save:  Ft13,223.27
SEK kr938.25
List Price:  SEK kr1,313.59
You save:  SEK kr375.34
ARS$147,467.66
List Price:  ARS$206,460.62
You save:  ARS$58,992.96
Bs691.79
List Price:  Bs968.54
You save:  Bs276.74
COP$389,104.92
List Price:  COP$544,762.46
You save:  COP$155,657.53
₡50,541.20
List Price:  ₡70,759.71
You save:  ₡20,218.50
L2,625.89
List Price:  L3,676.35
You save:  L1,050.46
₲713,442.50
List Price:  ₲998,848.04
You save:  ₲285,405.54
$U3,989.85
List Price:  $U5,585.96
You save:  $U1,596.10
zł361.83
List Price:  zł506.58
You save:  zł144.74
Already have an account? Log In
Previous
Next
Home
Search
Saved
Trending Classes
Filter
The latest and the best classes on LearnDesk
Filter by Interest
Close
All Topics
Academics
Business
Creative
Health and Fitness
LifeStyle
Personal Development
Software
Admissions
Engineering
Hardware
Hospitality
Humanities
Chinese
Languages
Maths
Other
Pharma
Research
Science
Social Science
Teaching
Test Preparation
K-12
School
Accounting
Advertising
Analysis
Analytics
Business Communication
eCommerce
Entrepreneurship
Finance
Finance - India
Freelancing
Internet of Things
Digital Transformation
Human Resources
Industry
Management
Marketing
Media
Operations
Other
Project Management
Public Relations
Real Estate
Sales
Strategy
Arts & Crafts
Audio Editing
Audio Production
Dance
Design
Film Production
Music
Photography
Video Production
Writing
Dieting
Fitness
Food Safety
Games
Medical
Medical Professionals
Meditation
Mental Health
Pregnancy
Safety & First Aid
Self Defense
Sports
Beauty & Makeup
Food
Fashion
Gaming
Home Improvement
Parenting
Pet Care & Training
Relationships
Sustainable Living
Travel
Career Development
Learning
Religion and Spirituality
Self-Improvement
Accounting
Amazon Web Services
App Development
Continuous Integration
Backup Software
Business Automation
Computational Fluid Dynamics
Business Intelligence
Computer Aided Design (CAD)
Content Management System
Customer Relationship Management
Database
Data Mining
E-Commerce
Enterprise Asset Management
Enterprise Resource Planning
Game Development
Google Cloud
Linux
Artificial Intelligence
Machine Learning
Master Data Management
Microsoft
Music Software
Network and Security
Open Source
Operating System
Other
Process Management
Productivity Software
Programming Languages
Robotics
Supply Chain Management
Testing
Teaching
Web Development

Sign Up

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.