React Crash Course 2024 - Building a Job Listing Frontend

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Dive into a comprehensive 3-hour video tutorial on React fundamentals, building a job listing frontend while mastering components, props, state, and data fetching. Explore essential concepts like JSX, hooks, and React Router through hands-on coding. Learn to set up a React project with Vite, implement Tailwind CSS, and create dynamic user interfaces. Gain practical experience with form handling, API integration, and CRUD operations using JSON Server. Discover best practices for conditional rendering, error handling, and building production-ready static assets. By the end, confidently create modern, responsive React applications with a solid understanding of core concepts and real-world implementation techniques.

Syllabus

- Intro
- What Is React? Slide
- Why React? Slide
- What Are Components? Slide
- What Is State? Slide
- What Are Hooks? Slide
- What Is JSX? Slide
- SPA, SSR, SSG Slide
- Vite Slide
- Project Demo
- Setup React With Vite
- File Explanation
- Boilerplate Cleanup
- Tailwind CSS Setup
- JSX Crash Course
- Start Homepage
- Navbar Component
- Image Import
- Hero Component
- Props
- Default Props
- Wrapper Components
- JobListings Component
- Create Lists With map
- Single JobListing Component
- Limit Jobs to 3
- useState Hook & Desc Toggle
- Creating an Event
- Updating Component State
- React Icons Package
- React Router Setup
- Create Routes From Elements
- Router Provider
- Homepage Component/Route
- Layouts
- Jobs Page Component/Route
- Link Component
- Custom 404 Page
- Active Links With NavLink
- Conditional Rendering
- JSON Server Setup
- useEffect & Data Fetching
- Loading Spinner
- Conditional Fetching
- Proxying
- Single Job Page
- useParams to Get ID
- Data Loaders
- Single Job Output
- Add Job Page
- Working With Forms
- Form Submission
- Pass Function as Prop
- POST Request to Add Job
- Delete Job Button/function
- DELETE Request to Remove Job
- React Toastify Package
- Edit Job Page/Form
- Update Form Submission
- PUT Request to Update Job
- Build Static Assets For Production