Sign in to confirm you’re not a bot
This helps protect our community. Learn more

React JS Crash Course

Traversy Media
2.34M subscribers
<__slot-el>
<__slot-el>
3.5M views 4 years ago
Check out the latest version -    • React Crash Course   Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more. Code: https://github.com/bradtraversy/react... React Front To Back 2022 Course: https://www.udemy.com/course/react-fr... 💖 Support The Channel!   / traversymedia   Timestamps: 0:00 - Intro & Slides 12:37 - Create a React app 14:52 - Files & folders 18:54 - App component & JSX 22:39 - Expressions in JSX 23:49 - Creating a component 27:18 - Component Props 28:50 - PropTypes 30:42 - Styling 34:17 - Button Component 37:46 - Events 40:18 - Tasks Component 41:03 - Create a list with .map() 43:07 - State & useState Hook 44:55 - Global state 46:52 - Task Component 49:30 - Icons with react-icons 51:41 - Delete task & prop drilling 55:50 - Optional message if no tasks 56:58 - Toggle reminder & conditional styling 1:03:13 - Add Task Form …...more
...more

Intro & Slides

0:00

Create a React app

12:37

Files & folders

14:52

App component & JSX

18:54

Expressions in JSX

22:39

Creating a component

23:49

Component Props

27:18

PropTypes

28:50

Styling

30:42

Button Component

34:17

Events

37:46

Tasks Component

40:18

Create a list with .map()

41:03

State & useState Hook

43:07

Global state

44:55

Task Component

46:52

Icons with react-icons

49:30

Delete task & prop drilling

51:41

Optional message if no tasks

55:50

Toggle reminder & conditional styling

56:58

Add Task Form

1:03:13

Form input state (controlled components)

1:06:16

Add task submit

1:09:18

showAddTask state

1:14:36

Button toggle

1:15:58

Build for production

1:19:33

JSON Server

1:21:51

useEffect Hook & Fetch tasks from server

1:25:53

Delete task from server

1:30:13

Add task to server

1:31:51

Toggle reminder on server

1:35:15

Routing, footer & about

1:39:15
React JS Crash Course
62KLikes
3,518,554Views
2021Jan 18
Check out the latest version -    • React Crash Course   Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more. Code: https://github.com/bradtraversy/react... React Front To Back 2022 Course: https://www.udemy.com/course/react-fr... 💖 Support The Channel!   / traversymedia   Timestamps: 0:00 - Intro & Slides 12:37 - Create a React app 14:52 - Files & folders 18:54 - App component & JSX 22:39 - Expressions in JSX 23:49 - Creating a component 27:18 - Component Props 28:50 - PropTypes 30:42 - Styling 34:17 - Button Component 37:46 - Events 40:18 - Tasks Component 41:03 - Create a list with .map() 43:07 - State & useState Hook 44:55 - Global state 46:52 - Task Component 49:30 - Icons with react-icons 51:41 - Delete task & prop drilling 55:50 - Optional message if no tasks 56:58 - Toggle reminder & conditional styling 1:03:13 - Add Task Form 1:06:16 - Form input state (controlled components) 1:09:18 - Add task submit 1:14:36 - showAddTask state 1:15:58 - Button toggle 1:19:33 - Build for production 1:21:51 - JSON Server 1:25:53 - useEffect Hook & Fetch tasks from server 1:30:13 - Delete task from server 1:31:51 - Add task to server 1:35:15 - Toggle reminder on server 1:39:15 - Routing, footer & about

Follow along using the transcript.

Traversy Media

2.34M subscribers