React Crash Course 2024

Introduction

This tutorial aims to guide beginners through the fundamentals of React by building a job listing website using React 18 and Vite. You'll learn about key concepts such as components, state management, hooks, and routing, as well as how to interact with a mock backend API using JSON Server. By the end of this tutorial, you'll have a working knowledge of React and a project you can showcase.

Chapter 1: What Is React

• Definition: React is a JavaScript library maintained by Facebook for building user interfaces, particularly single-page applications.
• Components: React applications are made up of components, which are reusable pieces of UI that can manage their own state.
• Ecosystem: React often works with other libraries, such as React Router for navigation and Redux for state management.

Chapter 2: Setting Up the Project

1. Create a New Project:
   • Open your terminal and navigate to the desired project directory.
   • Run the command:

     npm create vite@latest react-jobs
     

   • Choose React as the framework.
2. Install Dependencies:
   • Navigate into the project folder:

     cd react-jobs
     

   • Install the necessary packages:

     npm install
     

3. Open the Project:
   • Open the project in your code editor (e.g., Visual Studio Code):

     code .
     

Chapter 3: Creating Components

1. Component Structure:

   • Create a components folder in the src directory.
   • Inside, create individual component files (e.g., Navbar.jsx, Hero.jsx, etc.).

2. Navbar Component:

   • Create Navbar.jsx:

     const Navbar = () => {
         return (
             <nav>
                 <h1>Job Listings</h1>
             </nav>
         );
     };
     export default Navbar;
     

3. Hero Component:

   • Create Hero.jsx:

     const Hero = () => {
         return (
             <div className="hero">
                 <h2>Find Your Dream Job</h2>
             </div>
         );
     };
     export default Hero;
     

Chapter 4: Using State and Props

1. Managing State:
   • Use the useState hook to manage component state.
   • For example, to manage job listings:

     import { useState } from 'react';
     
     const JobListings = () => {
         const [jobs, setJobs] = useState([]);
     };
     

2. Passing Props:
   • Pass data from a parent component to a child component using props.
   • Example:

     <Navbar title="Job Listings" />
     

Chapter 5: Handling Data with JSON Server

1. Setting Up JSON Server:

   • Install JSON Server:

     npm install json-server --save-dev
     

   • Create a db.json file in the root directory with placeholder job data.

2. Start JSON Server:

   • Run the command to start the server:

     npx json-server --watch db.json --port 8000
     

3. Fetching Data:

   • Use the useEffect hook to fetch data from the server:

     import { useEffect } from 'react';
     
     useEffect(() => {
         fetch('http://localhost:8000/jobs')
             .then(response => response.json())
             .then(data => setJobs(data));
     }, []);
     

Chapter 6: Adding Routing with React Router

1. Install React Router:
   • Run the command:

     npm install react-router-dom
     

2. Set Up Routes:
   • Create a main app component and define routes:

     import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
     
     const App = () => {
         return (
             <Router>
                 <Routes>
                     <Route path="/" element={<Home />} />
                     <Route path="/jobs" element={<JobListings />} />
                     <Route path="/add-job" element={<AddJob />} />
                     <Route path="/jobs/:id" element={<JobDetails />} />
                 </Routes>
             </Router>
         );
     };
     

Chapter 7: Creating Job Listings and Forms

1. Job Listings Component:

   • Create a component that displays job listings fetched from the JSON Server.

2. Add Job Component:

   • Create a form to add new jobs, managing form state with useState.

3. Form Submission:

   • Handle form submission to post new jobs to the server:

     const handleSubmit = (event) => {
         event.preventDefault();
         fetch('http://localhost:8000/jobs', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify(newJob),
         });
     };
     

Chapter 8: Updating and Deleting Jobs

1. Edit Job Functionality:

   • Create a separate route and component for editing job details.
   • Fetch existing job details and populate the form.

2. Delete Functionality:

   • Implement delete functionality in the Job Listings component:

     const deleteJob = (id) => {
         fetch(`http://localhost:8000/jobs/${id}`, { method: 'DELETE' });
     };
     

Conclusion

By following this tutorial, you have built a complete React application for job listings, including features for adding, editing, and deleting jobs. You have learned essential React concepts such as components, state management, hooks, and routing, as well as how to work with a mock backend. As next steps, consider exploring authentication processes, deploying your application, and further enhancing the UI with styling libraries.