React Tutorial for Beginners
Key Takeaways
Builds a React app with TypeScript
Original Description
Master React 18 with TypeScript! ⚛️ Build amazing front-end apps with this beginner-friendly tutorial.
🚀 Want the ultimate React deep dive?
- Check out my full React course: https://mosh.link/react-course
- Subscribe for more awesome content: https://goo.gl/6PYaGF
✋ Stay connected:
- Twitter: https://twitter.com/moshhamedani
- Facebook: https://www.facebook.com/programmingwithmosh/
- Instagram: https://www.instagram.com/codewithmosh.official/
- LinkedIn: https://www.linkedin.com/school/codewithmosh/
📖 TABLE OF CONTENT
00:00:00 Course Intro
00:01:55 Prerequisites
00:02:43 What is React?
00:04:57 Setting Up the Development Environment
00:06:24 Creating a React App
00:09:17 Project Structure
00:11:20 Creating a React Component
00:16:41 How React Works
00:19:00 React Ecosystem
00:21:04 Building Components
00:21:40 Creating a ListGroup Component
00:27:15 Fragments
00:29:42 Rendering Lists
00:33:11 Conditional Rendering
00:38:36 Handling Events
00:44:43 Managing State
00:50:44 Passing Data Via Props
00:54:42 Passing Functions Via Props
00:58:27 State Vs Props
01:00:00 Passing Children
01:05:04 Inspecting Components with React Dev Tools
01:07:14 Exercise: Building a Button Component
01:14:15 Exercise: Showing an Alert
#react #reactjs #javascript #coding
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Programming with Mosh · Programming with Mosh · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
![[Pluralsight]: Become a Full-stack .NET Developer](https://i.ytimg.com/vi/yBxPgF85vt4/mqdefault.jpg)
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
![[NEW COURSE] Unit Testing for C# Developers](https://i.ytimg.com/vi/ocz2Ml5Wg9g/mqdefault.jpg)
57
58
59
60
6 Visual Studio Tips to Increase Your Productivity | Mosh
Programming with Mosh
Visual Studio Keyboard Shortcuts that Speed Up Debugging Applications | Mosh
Programming with Mosh
Backbone.js Tutorial Part 2 - Backbone.js Models: Working with Model Attributes
Programming with Mosh
Backbone.js Tutorial Part 3 - Backbone.js Models: Model Validation
Programming with Mosh
Backbone.js Tutorial Part 4 - Backbone.js Models: Model Inheritance
Programming with Mosh
Backbone.js Tutorial Part 1 - Backbone.js Models: Creating Models
Programming with Mosh
Backbone.js Tutorial Part 5 - Backbone.js Models: Syncing Models with the Server
Programming with Mosh
Backbone.js Tutorial Part 6 - Backbone.js Collections: Creating Collections
Programming with Mosh
Backbone.js Tutorial Part 7 - Backbone.js Collections: Working with Collections
Programming with Mosh
Backbone.js Tutorial Part 8 - Backbone.js Collections: Fetching Collections from the Server
Programming with Mosh
Backbone.js Tutorial Part 9 - Backbone.js Views: Creating Views
Programming with Mosh
Backbone.js Tutorial Part 10 - Backbone.js Views: Passing Data to Views
Programming with Mosh
Backbone.js Tutorial Part 11 - Backbone.js Views: Handling the DOM Events
Programming with Mosh
Backbone.js Tutorial Part 12 - Backbone.js Views: Handling the Model Events
Programming with Mosh
Backbone.js Tutorial Part 13 - Backbone.js Views: Handling Collection Events
Programming with Mosh
Backbone.js Tutorial Part 14 - Backbone.js Views: Templating
Programming with Mosh
Clean Code: Learn to write clean, maintainable and robust code
Programming with Mosh
C# Events and Delegates Made Simple | Mosh
Programming with Mosh
C# Generics Tutorial: Whats and Whys | Mosh
Programming with Mosh
Debugging C# Code in Visual Studio | Mosh
Programming with Mosh
Repository Pattern with C# and Entity Framework, Done Right | Mosh
Programming with Mosh
Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch | Mosh
Programming with Mosh
Architecture of Angular 2+ Apps
Programming with Mosh
Working with Components in Angular
Programming with Mosh
C# Tutorial For Beginners - Learn C# Basics in 1 Hour
Programming with Mosh
Difference between Junior and Senior Developers
Programming with Mosh
Step-by-step ASP.NET MVC Tutorial for Beginners | Mosh
Programming with Mosh
[Pluralsight]: Become a Full-stack .NET Developer
Programming with Mosh
Xamarin Forms Tutorial: Build Native Mobile Apps with C#
Programming with Mosh
Value Types and Reference Types in JavaScript
Programming with Mosh
Using Redux in Angular 2+ Apps | Mosh
Programming with Mosh
Testing Angular 2+ Apps with Jasmine and Karma | Mosh
Programming with Mosh
Profile and optimize your Angular 2 apps
Programming with Mosh
Build a Real-world App with ASP.NET Core and Angular 2
Programming with Mosh
Entity Framework 6 Tutorial: Learn Entity Framework 6 from Scratch
Programming with Mosh
Two-way Binding and ngModel in Angular 4
Programming with Mosh
Udemy Live 2017: Teaching Tech Panel
Programming with Mosh
Demo of An E-commerce App Built with Angular, Firebase and Bootstrap 4
Programming with Mosh
My Brand New Angular Course
Programming with Mosh
TypeScript Tutorial - TypeScript for React - Learn TypeScript
Programming with Mosh
Access Modifiers in TypeScript
Programming with Mosh
TypeScript Interfaces
Programming with Mosh
TypeScript Classes
Programming with Mosh
TypeScript Constructors
Programming with Mosh
TypeScript Properties
Programming with Mosh
Angular Tutorial for Beginners: Learn Angular & TypeScript
Programming with Mosh
AngularJS vs Angular 2 vs Angular 4 | Mosh
Programming with Mosh
Angular Material Tutorial | Mosh
Programming with Mosh
Angular Animations Tutorial | Mosh
Programming with Mosh
Firebase in Angular Applications | Mosh
Programming with Mosh
Deploying Angular Applications | Mosh
Programming with Mosh
Building Forms in Angular Apps | Mosh
Programming with Mosh
Directives in Angular Applications
Programming with Mosh
Routing and Navigation in Angular | Mosh
Programming with Mosh
Angular 4 in 40 Minutes
Programming with Mosh
[NEW COURSE] Unit Testing for C# Developers
Programming with Mosh
Unit Testing C# Code - Tutorial for Beginners
Programming with Mosh
C# Classes Tutorial | Mosh
Programming with Mosh
C# Object Initializers Tutorial
Programming with Mosh
C# Constructors Tutorial | Mosh
Programming with Mosh
Related Reads
📰
📰
📰
📰
Great perspective—framework vs. library is the right way to frame it. 👏
Dev.to · abderrahmen bejaoui
Show Dev: CountryClue – A fast and minimalist world flag guessing game
Dev.to · Тимофій Олійник
Build It HTML-First: Why a Plain Web Form Beat a React Rewrite
Dev.to · Arthur
Starting the Frontend for a Full-Stack E-commerce Store (Auth Store, Axios, and Public vs. Protected Routing)
Dev.to · Chinwuba
Chapters (23)
Course Intro
1:55
Prerequisites
2:43
What is React?
4:57
Setting Up the Development Environment
6:24
Creating a React App
9:17
Project Structure
11:20
Creating a React Component
16:41
How React Works
19:00
React Ecosystem
21:04
Building Components
21:40
Creating a ListGroup Component
27:15
Fragments
29:42
Rendering Lists
33:11
Conditional Rendering
38:36
Handling Events
44:43
Managing State
50:44
Passing Data Via Props
54:42
Passing Functions Via Props
58:27
State Vs Props
1:00:00
Passing Children
1:05:04
Inspecting Components with React Dev Tools
1:07:14
Exercise: Building a Button Component
1:14:15
Exercise: Showing an Alert
🎓
Tutor Explanation
DeepCamp AI