React Crash Course 2024
Table of Contents
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
- 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.
- Install Dependencies:
- Navigate into the project folder:
cd react-jobs
- Install the necessary packages:
npm install
- Navigate into the project folder:
- Open the Project:
- Open the project in your code editor (e.g., Visual Studio Code):
code .
- Open the project in your code editor (e.g., Visual Studio Code):
Chapter 3: Creating Components
-
Component Structure:
- Create a
components
folder in thesrc
directory. - Inside, create individual component files (e.g.,
Navbar.jsx
,Hero.jsx
, etc.).
- Create a
-
Navbar Component:
- Create
Navbar.jsx
:const Navbar = () => { return ( <nav> <h1>Job Listings</h1> </nav> ); }; export default Navbar;
- Create
-
Hero Component:
- Create
Hero.jsx
:const Hero = () => { return ( <div className="hero"> <h2>Find Your Dream Job</h2> </div> ); }; export default Hero;
- Create
Chapter 4: Using State and Props
- 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([]); };
- Use the
- 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
-
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.
- Install JSON Server:
-
Start JSON Server:
- Run the command to start the server:
npx json-server --watch db.json --port 8000
- Run the command to start the server:
-
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)); }, []);
- Use the
Chapter 6: Adding Routing with React Router
- Install React Router:
- Run the command:
npm install react-router-dom
- Run the command:
- 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> ); };
- Create a main app component and define routes:
Chapter 7: Creating Job Listings and Forms
-
Job Listings Component:
- Create a component that displays job listings fetched from the JSON Server.
-
Add Job Component:
- Create a form to add new jobs, managing form state with
useState
.
- Create a form to add new jobs, managing form state with
-
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), }); };
- Handle form submission to post new jobs to the server:
Chapter 8: Updating and Deleting Jobs
-
Edit Job Functionality:
- Create a separate route and component for editing job details.
- Fetch existing job details and populate the form.
-
Delete Functionality:
- Implement delete functionality in the Job Listings component:
const deleteJob = (id) => { fetch(`http://localhost:8000/jobs/${id}`, { method: 'DELETE' }); };
- Implement delete functionality in the Job Listings component:
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.