24. React

React JS Crash Course by Traversy Media

MongoDB with JavaScript

Let’s quickly return to the frontend to learn ReactJS. React is a free frontend JavaScript library developed by Meta for building user interfaces. It allows you to reuse components and write maintainable code. You might wonder, “Why are we returning to the frontend?” And my short answer to that is React is important. Trust me. It’s a valuable skill many companies view as essential; you won’t get a frontend job without it. Follow Traversy Media’s latest crash course on React with Hooks. Then, revamp your frontend app using React.

Course Content

  • 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

Resources

▶️ Traversy Media
🔗 ReactJS Tutorial by W3Schools

Previous
Previous

23. Firebase

Next
Next

25. React Router