Learning From Youtube Channel: Traversy Media
Video: React Crash Course 2024
Thank you.
Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend.
Timestamps:
00:00:00 – Intro
00:01:55 – What Is React? (Slide)
00:03:43 – Why React? (Slide)
00:07:19 – What Are Components? (Slide)
00:08:21 – What is State? (Slide)
00:10:00 – What Are Hooks? (Slide)
00:11:17 – What IS JSX? (Slide)
00:12:42 – SPA, SSR, SSG (Slide)
00:15:38 – Vite (Slide)
00:16:30 – Project Demo
00:19:53 – Setup React With Vite
00:22:29 – File Explanation
00:25:11 – Boilerplate Cleanup
00:26:48 – Tailwind CSS Setup
00:30:24 – JSX Crash Course
00:39:37 – Start Homepage
00:42:00 – Navbar Component
00:43:56 – Image Import
00:45:24 – Hero Component
00:46:17 – Props
00:48:00 – Default Props
00:48:51 – Wrapper Components
00:55:14 – JobListings Component
00:58:50 – Create Lists With map()
01:03:20 – Single JobListing Component
01:05:49 – Limit Jobs to 3
01:07:50 – useState() Hook & Desc Toggle
01:13:07 – Creating an Event
01:14:20 – Updating Component State
01:16:00 – React Icons Package
01:18:00 – React Router Setup
01:20:21 – Create Routes From Elements
01:21:36 – Router Provider
01:22:36 – Homepage Component/Route
01:30:50 – Link Component
01:34:20 – Custom 404 Page
01:36:55 – Active Links With NavLink
01:41:00 – Conditional Rendering
01:43:10 – JSON Server Setup
01:47:00 – useEffect() & Data Fetching
01:53:07 – Loading Spinner
01:51:06 – Conditional Fetching (Error Timestamp)
01:59:45 – Proxying
02:03:38 – Single Job Page
02:09:04 – useParams() to Get ID
02:12:25 – Data Loaders
02:16:36 – Single Job Output
02:22:00 – Add Job Page
02:23:40 – Working With Forms
02:30:05 – Form Submission
02:35:27 – Pass Function as Prop
02:39:32 – POST Request to Add Job
02:41:45 – Delete Job Button/function
02:45:12 – DELETE Request to Remove Job
02:46:50 – React Toastify Package
02:50:08 – Edit Job Page/Form
02:56:05 – Update Form Submission
02:58:54 – PUT Request to Update Job
3:02:10 – Build Static Assets For Production
Intro
What Is React? (Slide)
What Is React?
- React is a JavaScript library/framework for building user interfaces. It was created by Facebook.
- Websites/UIs are looked at in terms of components.
- React is currently the most popular out of the major front-end frameworks.
Why React? (Slide)
Why React?
- React allows us to build very dynamic and interactive websites and user interfaces.
- Very fast, especially with the new compiler.
- There is a huge ecosystem from Next.js to React Native.
- Best framework to learn to get a job.
What Are Components? (Slide)
Components
- Reusable piece of code that can be used to build elements on the page.
- Allows us to break down complex UIs, which makes them easier to maintain and scale.
- Components can get props passed in and can hold their own state.
What Is State? (Slide)
State
- State represents the data that a component manages internally.
- This could be form input data, fetched data, UI-related data like if a modal is open/close.
- There is also global state, which relates to the app as a whole and not a single component.
What Are Hooks? (Slide)
Hooks
Allow us to use state and other React features within functional components
- useState
- useEffect
- useRef
- useReducer
useContext, useMemo & useCallback will be phased out in React 19
What Is JSX? (Slide)
JSX (JavaScript Syntax Extension)
An HTML-like syntax within JavaScript (components)
SPA, SSR, SSG (Slide)
SPA, SSR & SSG
- Single Page App – Load a single HTML file and JavaScript loads the entire UI including routes.
- Server-Side Rendered – Server sends fully rendered page to client. You can fetch data and load it as well.
- Static Site Generation – React generates static HTML files at build time. These are very fast.
Vite (Slide)
Vite
- Vite is a super fast front-end toolkit that can be used for all kinds of JS projects including React.
- It is built on top of ESBuild, which is a very fast JS bundler.
- Fast development server wtih hot-reload.
- Installed with npm create vite@latest
Project Demo
Setup React With Vite
- 使用終端機建立專案
npm create vite@latest react-crash-2024 - Select a framework: React
- Slect a variant: JavaScript
- 使用 VSCode 打開專案
- 修改 vite.config.js 檔案
- 執行 npm install 安裝
- 執行指令 npm run dev
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
});
File Explanation
- 解釋 index.html、修改 index.html 檔案
- 解釋 src 資料夾
- 解釋 main.jsx 檔案
- 解釋 CSS 相關檔案，刪除 App.css、保留 index.css 檔案
- 解釋 App.jsx 檔案
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Jobs</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Boilerplate Cleanup
- 修改 App.jsx 檔案
建議安裝 VSCode 套件 ES7+React/Redux/React-Native snippets
快速建立程式碼片段介紹 rafce、rafc、rfc，這裡使用 rafce - 清除 index.css 檔案程式碼
// App.jsx
const App = () => {
return (
<div>
App
</div>
)
}
export default App
Tailwind CSS Setup
- Google 搜尋 vite react tailwind
Install Tailwind CSS with Vite - Install Tailwind CSS
指令:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p - Configure your template paths
複製官方範例並做修改 - Add the Tailwind directives to your CSS
修改 index.css 檔案 - 重新執行 npm run dev
- 修改 App.jsx 檔案
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
sans: ['Roboto', 'sans-serif']
},
gridTemplateColumns: {
'70/30': '70% 28%',
},
},
},
plugins: [],
}
// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
// App.jsx
const App = () => {
return (
<div className="text-5xl">
App
</div>
)
}
export default App
JSX Crash Course
- 修改 App.jsx 檔案
- 簡單介紹 JSX 語法
// App.jsx
const App = () => {
const name = 'John';
const x = 10;
const y = 20;
const names = ['Brad', 'Mary', 'Joe', 'Sara'];
const loggedIn = true;
const styles = {
color: 'red',
fontSize: '55px'
}
return (
<>
<div className="text-5xl">
App
</div>
<p style={styles}>Hello {name}</p>
<p>The sum of {x} and {y} is { x + y }</p>
<ul>
{names.map((name, index) => (
<li key={index}>{ name }</li>
))}
</ul>
{loggedIn && <h1>Hello Member</h1>}
</>
);
};
export default App;
Start Homepage
- 到 _theme_files/index.html 檔案複製 <body> 裡面需要的程式碼
- 修改 App.jsx 檔案
- 可以使用 Select All Occurrences of Find Match
Keyboard Shortcuts: Alt + F3
// App.jsx
const App = () => {
return (
<>
<nav className="bg-indigo-700 border-b border-indigo-500">
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="flex h-20 items-center justify-between">
<div
className="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
{/* <!-- Logo --> */}
<a className="flex flex-shrink-0 items-center mr-4" href="/index.html">
<img
className="h-10 w-auto"
src="images/logo.png"
alt="React Jobs"
/>
<span className="hidden md:block text-white text-2xl font-bold ml-2"
>React Jobs</span
>
</a>
<div className="md:ml-auto">
<div className="flex space-x-2">
<a
href="/index.html"
className="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Home</a
>
<a
href="/jobs.html"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Jobs</a
>
<a
href="/add-job.html"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Add Job</a
>
</div>
</div>
</div>
</div>
</div>
</nav>
{/* <!-- Hero --> */}
<section className="bg-indigo-700 py-20 mb-4">
<div
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
<div className="text-center">
<h1
className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
>
Become a React Dev
</h1>
<p className="my-4 text-xl text-white">
Find the React job that fits your skills and needs
</p>
</div>
</div>
</section>
{/* <!-- Developers and Employers --> */}
<section className="py-4">
<div className="container-xl lg:container m-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<div className="bg-gray-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Developers</h2>
<p className="mt-2 mb-4">
Browse our React jobs and start your career today
</p>
<a
href="/jobs.html"
className="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</a>
</div>
<div className="bg-indigo-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Employers</h2>
<p className="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<a
href="/add-job.html"
className="inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600"
>
Add Job
</a>
</div>
</div>
</div>
</section>
{/* <!-- Browse Jobs --> */}
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* <!-- Job Listing 1 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Full-Time</div>
<h3 className="text-xl font-bold">Senior React Developer</h3>
</div>
<div className="mb-5">
We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript...
</div>
<h3 className="text-indigo-500 mb-2">$70 - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Boston, MA
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 2 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">Front-End Engineer (React)</h3>
</div>
<div className="mb-5">
Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Miami, FL
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 3 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">React.js Developer</h3>
</div>
<div className="mb-5">
Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Brooklyn, NY
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="m-auto max-w-lg my-10 px-6">
<a
href="jobs.html"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
</>
)
}
export default App
Navbar Component
- 在 src 資料夾裡面建立 components 資料夾
- 在 components 資料夾裡面建立 Navbar.jsx 檔案
- 修改 Navbar.jsx 檔案
rafce 建立片段程式碼 - 修改 App.jsx 檔案
- 查看 React Developer Tools > Components
// Navbar.jsx
const Navbar = () => {
return (
<nav className="bg-indigo-700 border-b border-indigo-500">
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="flex h-20 items-center justify-between">
<div
className="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
{/* <!-- Logo --> */}
<a className="flex flex-shrink-0 items-center mr-4" href="/index.html">
<img
className="h-10 w-auto"
src="images/logo.png"
alt="React Jobs"
/>
<span className="hidden md:block text-white text-2xl font-bold ml-2"
>React Jobs</span
>
</a>
<div className="md:ml-auto">
<div className="flex space-x-2">
<a
href="/index.html"
className="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Home</a
>
<a
href="/jobs.html"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Jobs</a
>
<a
href="/add-job.html"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Add Job</a
>
</div>
</div>
</div>
</div>
</div>
</nav>
)
}
export default Navbar
// App.jsx
import Navbar from './components/Navbar';
const App = () => {
return (
<>
<Navbar />
{/* <!-- Hero --> */}
<section className="bg-indigo-700 py-20 mb-4">
<div
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
<div className="text-center">
<h1
className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
>
Become a React Dev
</h1>
<p className="my-4 text-xl text-white">
Find the React job that fits your skills and needs
</p>
</div>
</div>
</section>
{/* <!-- Developers and Employers --> */}
<section className="py-4">
<div className="container-xl lg:container m-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<div className="bg-gray-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Developers</h2>
<p className="mt-2 mb-4">
Browse our React jobs and start your career today
</p>
<a
href="/jobs.html"
className="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</a>
</div>
<div className="bg-indigo-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Employers</h2>
<p className="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<a
href="/add-job.html"
className="inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600"
>
Add Job
</a>
</div>
</div>
</div>
</section>
{/* <!-- Browse Jobs --> */}
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* <!-- Job Listing 1 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Full-Time</div>
<h3 className="text-xl font-bold">Senior React Developer</h3>
</div>
<div className="mb-5">
We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript...
</div>
<h3 className="text-indigo-500 mb-2">$70 - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Boston, MA
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 2 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">Front-End Engineer (React)</h3>
</div>
<div className="mb-5">
Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Miami, FL
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 3 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">React.js Developer</h3>
</div>
<div className="mb-5">
Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Brooklyn, NY
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="m-auto max-w-lg my-10 px-6">
<a
href="jobs.html"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
</>
)
}
export default App
Image Import
- 刪除 assets 資料夾裡面的 react.svg 檔案
- 在 assets 資料夾裡面建立 images 資料夾
- 到 _theme_files/images/logo.png 複製檔案到 images 資料夾裡面
- 修改 Navbar.jsx 檔案，把圖片匯入
// Navbar.jsx
import logo from '../assets/images/logo.png';
const Navbar = () => {
return (
<nav className="bg-indigo-700 border-b border-indigo-500">
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="flex h-20 items-center justify-between">
<div
className="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
{/* <!-- Logo --> */}
<a className="flex flex-shrink-0 items-center mr-4" href="/index.html">
<img
className="h-10 w-auto"
src={logo}
alt="React Jobs"
/>
<span className="hidden md:block text-white text-2xl font-bold ml-2"
>React Jobs</span
>
</a>
<div className="md:ml-auto">
<div className="flex space-x-2">
<a
href="/index.html"
className="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Home</a
>
<a
href="/jobs.html"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Jobs</a
>
<a
href="/add-job.html"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Add Job</a
>
</div>
</div>
</div>
</div>
</div>
</nav>
)
}
export default Navbar
Hero Component
- 在 components 資料夾裡面建立 Hero.jsx 檔案
- 程式碼片段 rafce 快速建立
- 修改 App.jsx 檔案
- 查看 React Developer Tools > Components
// Hero.jsx
const Hero = () => {
return (
<section className="bg-indigo-700 py-20 mb-4">
<div
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
<div className="text-center">
<h1
className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
>
Become a React Dev
</h1>
<p className="my-4 text-xl text-white">
Find the React job that fits your skills and needs
</p>
</div>
</div>
</section>
)
}
export default Hero
// App.jsx
import Navbar from './components/Navbar';
import Hero from './components/Hero';
const App = () => {
return (
<>
<Navbar />
<Hero />
{/* <!-- Developers and Employers --> */}
<section className="py-4">
<div className="container-xl lg:container m-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<div className="bg-gray-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Developers</h2>
<p className="mt-2 mb-4">
Browse our React jobs and start your career today
</p>
<a
href="/jobs.html"
className="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</a>
</div>
<div className="bg-indigo-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Employers</h2>
<p className="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<a
href="/add-job.html"
className="inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600"
>
Add Job
</a>
</div>
</div>
</div>
</section>
{/* <!-- Browse Jobs --> */}
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* <!-- Job Listing 1 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Full-Time</div>
<h3 className="text-xl font-bold">Senior React Developer</h3>
</div>
<div className="mb-5">
We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript...
</div>
<h3 className="text-indigo-500 mb-2">$70 - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Boston, MA
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 2 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">Front-End Engineer (React)</h3>
</div>
<div className="mb-5">
Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Miami, FL
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 3 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">React.js Developer</h3>
</div>
<div className="mb-5">
Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Brooklyn, NY
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="m-auto max-w-lg my-10 px-6">
<a
href="jobs.html"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
</>
)
}
export default App
Props
- 修改 App.jsx 檔案
- 修改 Hero.jsx 檔案
- (props) 也可以改寫成 ({ title, subtitle })
{props.title} 也可以改寫成 {title}
{props.subtitle} 也可以改寫成 {subtitle}
// App.jsx
import Navbar from './components/Navbar';
import Hero from './components/Hero';
const App = () => {
return (
<>
<Navbar />
<Hero title="Test Title" subtitle="This is the subtitle" />
{/* <!-- Developers and Employers --> */}
<section className="py-4">
<div className="container-xl lg:container m-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<div className="bg-gray-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Developers</h2>
<p className="mt-2 mb-4">
Browse our React jobs and start your career today
</p>
<a
href="/jobs.html"
className="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</a>
</div>
<div className="bg-indigo-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Employers</h2>
<p className="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<a
href="/add-job.html"
className="inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600"
>
Add Job
</a>
</div>
</div>
</div>
</section>
{/* <!-- Browse Jobs --> */}
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* <!-- Job Listing 1 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Full-Time</div>
<h3 className="text-xl font-bold">Senior React Developer</h3>
</div>
<div className="mb-5">
We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript...
</div>
<h3 className="text-indigo-500 mb-2">$70 - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Boston, MA
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 2 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">Front-End Engineer (React)</h3>
</div>
<div className="mb-5">
Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Miami, FL
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 3 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">React.js Developer</h3>
</div>
<div className="mb-5">
Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Brooklyn, NY
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="m-auto max-w-lg my-10 px-6">
<a
href="jobs.html"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
</>
)
}
export default App
// Hero.jsx
const Hero = ({ title, subtitle }) => {
return (
<section className="bg-indigo-700 py-20 mb-4">
<div
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
<div className="text-center">
<h1
className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
>
{title}
</h1>
<p className="my-4 text-xl text-white">
{subtitle}
</p>
</div>
</div>
</section>
)
}
export default Hero
Default Props
- 修改 Hero.jsx 檔案
- 修改 App.jsx 檔案
// Hero.jsx
const Hero = ({
title = 'Become a React Dev',
subtitle = 'Find the React job that fits your skill set'
}) => {
return (
<section className="bg-indigo-700 py-20 mb-4">
<div
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
<div className="text-center">
<h1
className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
>
{title}
</h1>
<p className="my-4 text-xl text-white">
{subtitle}
</p>
</div>
</div>
</section>
)
}
export default Hero
// App.jsx
import Navbar from './components/Navbar';
import Hero from './components/Hero';
const App = () => {
return (
<>
<Navbar />
<Hero />
{/* <!-- Developers and Employers --> */}
<section className="py-4">
<div className="container-xl lg:container m-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<div className="bg-gray-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Developers</h2>
<p className="mt-2 mb-4">
Browse our React jobs and start your career today
</p>
<a
href="/jobs.html"
className="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</a>
</div>
<div className="bg-indigo-100 p-6 rounded-lg shadow-md">
<h2 className="text-2xl font-bold">For Employers</h2>
<p className="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<a
href="/add-job.html"
className="inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600"
>
Add Job
</a>
</div>
</div>
</div>
</section>
{/* <!-- Browse Jobs --> */}
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* <!-- Job Listing 1 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Full-Time</div>
<h3 className="text-xl font-bold">Senior React Developer</h3>
</div>
<div className="mb-5">
We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript...
</div>
<h3 className="text-indigo-500 mb-2">$70 - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Boston, MA
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 2 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">Front-End Engineer (React)</h3>
</div>
<div className="mb-5">
Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Miami, FL
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 3 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">React.js Developer</h3>
</div>
<div className="mb-5">
Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Brooklyn, NY
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="m-auto max-w-lg my-10 px-6">
<a
href="jobs.html"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
</>
)
}
export default App
Wrapper Component
- 修改 App.jsx 檔案
- 在 components 資料夾裡面建立 HomeCards.jsx 檔案
- 快速建立程式碼片段 – rafce
修改 HomeCards.jsx 檔案 - 在 components 資料夾裡面建立 Card.jsx 檔案
- 快速建立程式碼片段 – rafce
修改 Card.jsx 檔案 - 修改 HomeCards.jsx 檔案，匯入 Card
- 修改 Card.jsx 檔案
- 修改 HomeCards.jsx 檔案
// App.jsx
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import HomeCards from './components/HomeCards';
const App = () => {
return (
<>
<Navbar />
<Hero />
<HomeCards />
{/* <!-- Browse Jobs --> */}
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* <!-- Job Listing 1 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Full-Time</div>
<h3 className="text-xl font-bold">Senior React Developer</h3>
</div>
<div className="mb-5">
We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript...
</div>
<h3 className="text-indigo-500 mb-2">$70 - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Boston, MA
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 2 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">Front-End Engineer (React)</h3>
</div>
<div className="mb-5">
Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Miami, FL
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 3 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">React.js Developer</h3>
</div>
<div className="mb-5">
Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Brooklyn, NY
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="m-auto max-w-lg my-10 px-6">
<a
href="jobs.html"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
</>
)
}
export default App
// HomeCards.jsx
import Card from './Card'
const HomeCards = () => {
return (
<section className="py-4">
<div className="container-xl lg:container m-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<Card>
<h2 className="text-2xl font-bold">For Developers</h2>
<p className="mt-2 mb-4">
Browse our React jobs and start your career today
</p>
<a
href="/jobs.html"
className="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</a>
</Card>
<Card bg='bg-indigo-100'>
<h2 className="text-2xl font-bold">For Employers</h2>
<p className="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<a
href="/add-job.html"
className="inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600"
>
Add Job
</a>
</Card>
</div>
</div>
</section>
)
}
export default HomeCards// Card.jsx
const Card = ({ children, bg = 'bg-gray-100' }) => {
return (
<div className={`${bg} p-6 rounded-lg shadow-md`}>
{children}
</div>
)
}
export default Card
JobListings Component
- 到 src/jobs.json 複製貼到 src 資料夾
- 修改 jobs.json 檔案
- 在 components 資料夾裡面建立 JobListings.jsx 檔案
- 使用 rafce 快速鍵立程式碼片段
- 修改 JobListings.jsx 檔案
- 修改 App.jsx 檔案
- 修改 JobListings.jsx 檔案，匯入 jobs.json 檔案
- 簡單推薦 console ninja VSCode 套件 (非必要)
// jobs.json
[
{
"id": "1",
"title": "Senior React Developer",
"type": "Full-Time",
"description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as React or Angular.",
"location": "Boston, MA",
"salary": "$70K - $80K",
"company": {
"name": "NewTek Solutions",
"description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
"contactEmail": "contact@teksolutions.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "2",
"title": "Front-End Engineer (React & Redux)",
"type": "Full-Time",
"location": "Miami, FL",
"description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
"salary": "$70K - $80K",
"company": {
"name": "Veneer Solutions",
"description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
"contactEmail": "contact@loremipsum.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "3",
"title": "React.js Dev",
"type": "Full-Time",
"location": "Brooklyn, NY",
"description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
"salary": "$70K - $80K",
"company": {
"name": "Dolor Cloud",
"description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
"contactEmail": "contact@dolorsitamet.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "4",
"title": "React Front-End Developer",
"type": "Part-Time",
"description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
"location": "Pheonix, AZ",
"salary": "$60K - $70K",
"company": {
"name": "Alpha Elite",
"description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
"contactEmail": "contact@adipisicingelit.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "5",
"title": "Full Stack React Developer",
"type": "Full-Time",
"description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
"location": "Atlanta, GA",
"salary": "$90K - $100K",
"company": {
"name": "Browning Technologies",
"description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
"contactEmail": "contact@consecteturadipisicing.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "6",
"title": "React Native Developer",
"type": "Full-Time",
"description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
"location": "Portland, OR",
"salary": "$100K - $110K",
"company": {
"name": "Port Solutions INC",
"description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
"contactEmail": "contact@ipsumlorem.com",
"contactPhone": "555-555-5555"
}
}
]
// JobListings.jsx
import jobs from '../jobs.json';
const JobListings = () => {
console.log(jobs);
return (
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* <!-- Job Listing 1 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Full-Time</div>
<h3 className="text-xl font-bold">Senior React Developer</h3>
</div>
<div className="mb-5">
We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript...
</div>
<h3 className="text-indigo-500 mb-2">$70 - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Boston, MA
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 2 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">Front-End Engineer (React)</h3>
</div>
<div className="mb-5">
Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Miami, FL
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
{/* <!-- Job Listing 3 --> */}
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">Remote</div>
<h3 className="text-xl font-bold">React.js Developer</h3>
</div>
<div className="mb-5">
Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference...
</div>
<h3 className="text-indigo-500 mb-2">$70K - $80K / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
Brooklyn, NY
</div>
<a
href="job.html"
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
export default JobListings
// App.jsx
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import HomeCards from './components/HomeCards';
import JobListings from './components/JobListings';
const App = () => {
return (
<>
<Navbar />
<Hero />
<HomeCards />
<JobListings />
<section className="m-auto max-w-lg my-10 px-6">
<a
href="jobs.html"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
</>
)
}
export default App
Create Lists With map()
- 修改 JobListings.jsx 檔案
// JobListings.jsx
import jobs from '../jobs.json';
const JobListings = () => {
return (
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{jobs.map((job) => (
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">{job.type}</div>
<h3 className="text-xl font-bold">{job.title}</h3>
</div>
<div className="mb-5">
{job.description}
</div>
<h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
{job.location}
</div>
<a
href={`/job/${job.id}`}
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
))}
</div>
</div>
</section>
)
}
export default JobListings
Single JobListing Component
- 在 components 資料夾裡面建立 JobListing.jsx 檔案
- 快速片段建立程式碼 – rafce
- 修改 JobListing.jsx 檔案
- 修改 JobListings.jsx 檔案
- 使用 React Developer Tools 套件工具
// JobListing.jsx
const JobListing = ({ job }) => {
return (
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">{job.type}</div>
<h3 className="text-xl font-bold">{job.title}</h3>
</div>
<div className="mb-5">
{job.description}
</div>
<h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
{job.location}
</div>
<a
href={`/job/${job.id}`}
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
)
}
export default JobListing
// JobListings.jsx
import JobListing from './JobListing';
import jobs from '../jobs.json';
const JobListings = () => {
return (
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{jobs.map((job) => (
<JobListing key={job.id} job={ job } />
))}
</div>
</div>
</section>
)
}
export default JobListings
Limit Jobs to 3
- 修改 JobListings.jsx 檔案
- 修改 App.jsx 檔案
- 在 components 資料夾裡面建立 ViewAllJobs.jsx 檔案
- 使用片段 rafce 快速建立程式碼
修改 ViewAllJobs.jsx 檔案 - 修改 App.jsx 檔案，匯入 ViewAllJobs
// JobListings.jsx
import JobListing from './JobListing';
import jobs from '../jobs.json';
const JobListings = () => {
const recentJobs = jobs.slice(0, 3);
return (
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
Browse Jobs
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{recentJobs.map((job) => (
<JobListing key={job.id} job={ job } />
))}
</div>
</div>
</section>
)
}
export default JobListings
// App.jsx
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import HomeCards from './components/HomeCards';
import JobListings from './components/JobListings';
import ViewAllJobs from './components/ViewAllJobs';
const App = () => {
return (
<>
<Navbar />
<Hero />
<HomeCards />
<JobListings />
<ViewAllJobs />
</>
)
}
export default App
// ViewAllJobs.jsx
const ViewAllJobs = () => {
return (
<section className="m-auto max-w-lg my-10 px-6">
<a
href="/jobs"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
)
}
export default ViewAllJobs
useState() Hook & Desc Toggle
- 修改 JobListing.jsx 檔案
// JobListing.jsx
import { useState } from "react";
const JobListing = ({ job }) => {
const [showFullDescription, setShowFullDescription] = useState(false);
let description = job.description;
if(!showFullDescription) {
description = description.substring(0, 90) + '...';
}
return (
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">{job.type}</div>
<h3 className="text-xl font-bold">{job.title}</h3>
</div>
<div className="mb-5">
{description}
</div>
<button className="text-indigo-500 mb-5 hover:text-indigo-600">
{ showFullDescription ? 'Less' : 'More' }
</button>
<h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
{job.location}
</div>
<a
href={`/job/${job.id}`}
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
)
}
export default JobListing
Creating an Event
- 修改 JobListing.jsx 檔案
// JobListing.jsx
import { useState } from "react";
const JobListing = ({ job }) => {
const [showFullDescription, setShowFullDescription] = useState(false);
let description = job.description;
if(!showFullDescription) {
description = description.substring(0, 90) + '...';
}
return (
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">{job.type}</div>
<h3 className="text-xl font-bold">{job.title}</h3>
</div>
<div className="mb-5">
{description}
</div>
<button onClick={() => setShowFullDescription(!setShowFullDescription)} className="text-indigo-500 mb-5 hover:text-indigo-600">
{ showFullDescription ? 'Less' : 'More' }
</button>
<h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
{job.location}
</div>
<a
href={`/job/${job.id}`}
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
)
}
export default JobListing
Updating Component State
- 修改 JobListing.jsx 檔案
// JobListing.jsx
import { useState } from "react";
const JobListing = ({ job }) => {
const [showFullDescription, setShowFullDescription] = useState(false);
let description = job.description;
if(!showFullDescription) {
description = description.substring(0, 90) + '...';
}
return (
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">{job.type}</div>
<h3 className="text-xl font-bold">{job.title}</h3>
</div>
<div className="mb-5">
{description}
</div>
<button onClick={() => setShowFullDescription((prevState) => !prevState)} className="text-indigo-500 mb-5 hover:text-indigo-600">
{ showFullDescription ? 'Less' : 'More' }
</button>
<h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<i className="fa-solid fa-location-dot text-lg"></i>
{job.location}
</div>
<a
href={`/job/${job.id}`}
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
)
}
export default JobListing
React Icons Package
- 安裝 react-icons 套件
npm i react-icons - 修改 JobListing.jsx 檔案
// JobListing.jsx
import { useState } from "react";
import { FaMapMarker } from 'react-icons/fa';
const JobListing = ({ job }) => {
const [showFullDescription, setShowFullDescription] = useState(false);
let description = job.description;
if(!showFullDescription) {
description = description.substring(0, 90) + '...';
}
return (
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">{job.type}</div>
<h3 className="text-xl font-bold">{job.title}</h3>
</div>
<div className="mb-5">
{description}
</div>
<button onClick={() => setShowFullDescription((prevState) => !prevState)} className="text-indigo-500 mb-5 hover:text-indigo-600">
{ showFullDescription ? 'Less' : 'More' }
</button>
<h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<FaMapMarker className="inline text-lg mb-1 mr-1" />
{job.location}
</div>
<a
href={`/job/${job.id}`}
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
)
}
export default JobListing
React Router Setup
- 安裝 react-router-dom 套件
- 修改 App.jsx 檔案
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import HomeCards from './components/HomeCards';
import JobListings from './components/JobListings';
import ViewAllJobs from './components/ViewAllJobs';
const App = () => {
return (
<>
<Navbar />
<Hero />
<HomeCards />
<JobListings />
<ViewAllJobs />
</>
)
}
export default App
Create Routes From Elements
- 修改 App.jsx 檔案
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import HomeCards from './components/HomeCards';
import JobListings from './components/JobListings';
import ViewAllJobs from './components/ViewAllJobs';
const router = createBrowserRouter(
createRoutesFromElements(<Route index element={ <h1>My App</h1>} />)
);
const App = () => {
return (
<>
<Navbar />
<Hero />
<HomeCards />
<JobListings />
<ViewAllJobs />
</>
)
}
export default App
Router Provider
- 修改 App.jsx 檔案
- index 換成 path=’/about’ 也可運作
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import HomeCards from './components/HomeCards';
import JobListings from './components/JobListings';
import ViewAllJobs from './components/ViewAllJobs';
const router = createBrowserRouter(
createRoutesFromElements(<Route index element={ <h1>My App</h1>} />)
);
const App = () => {
return <RouterProvider router={router} />;
}
export default App
Homepage Component/Route
- 在 src 資料夾裡面建立 pages 資料夾
- 在 pages 資料夾裡面建立 HomePage.jsx 檔案
- 修改 HomePage.jsx 檔案
使用 rafce 片段快速建立程式碼 - 修改 App.jsx 檔案
- 修改 HomePage.jsx 檔案
// HomePage.jsx
import Hero from '../components/Hero';
const HomePage = () => {
return (
<>
<Hero />
</>
)
}
export default HomePage
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import HomePage from './pages/HomePage';
const router = createBrowserRouter(
createRoutesFromElements(<Route index element={<HomePage />} />)
);
const App = () => {
return <RouterProvider router={router} />;
}
export default App
Layouts
- 在 src 資料夾裡面建立 layouts 資料夾
- 在 layouts 資料夾裡面建立 MainLayout.jsx 檔案
- 修改 MainLayout.jsx 檔案
使用 rafce 片段快速建立程式碼 - 修改 App.jsx 檔案
- 修改 MainLayout.jsx 檔案
- 修改 HomePage.jsx 檔案
// MainLayout.jsx
import { Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar';
const MainLayout = () => {
return (
<>
<Navbar />
<Outlet />
</>
)
}
export default MainLayout
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
</Route>
)
);
const App = () => {
return <RouterProvider router={router} />;
}
export default App
// HomePage.jsx
import Hero from '../components/Hero';
import HomeCards from '../components/HomeCards';
import JobListings from '../components/JobListings';
import ViewAllJobs from '../components/ViewAllJobs';
const HomePage = () => {
return (
<>
<Hero />
<HomeCards />
<JobListings />
<ViewAllJobs />
</>
)
}
export default HomePage
Jobs Page Component/Route
- 在 pages 資料夾裡面建立 JobsPage.jsx 檔案
- 使用 rafce 片段快速建立程式碼
修改 JobsPage.jsx 檔案 - 修改 App.jsx 檔案
- 修改 Navbar.jsx 檔案
// JobsPage.jsx
const JobsPage = () => {
return (
<div>JobsPage</div>
)
}
export default JobsPage
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
</Route>
)
);
const App = () => {
return <RouterProvider router={router} />;
}
export default App
// components/Navbar.jsx
import logo from '../assets/images/logo.png';
const Navbar = () => {
return (
<nav className="bg-indigo-700 border-b border-indigo-500">
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="flex h-20 items-center justify-between">
<div
className="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
{/* <!-- Logo --> */}
<a className="flex flex-shrink-0 items-center mr-4" href="/index.html">
<img
className="h-10 w-auto"
src={logo}
alt="React Jobs"
/>
<span className="hidden md:block text-white text-2xl font-bold ml-2"
>React Jobs</span
>
</a>
<div className="md:ml-auto">
<div className="flex space-x-2">
<a
href="/"
className="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Home</a
>
<a
href="/jobs"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Jobs</a
>
<a
href="/add-job"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Add Job</a
>
</div>
</div>
</div>
</div>
</div>
</nav>
)
}
export default Navbar
Link Component
- 修改 Navbar.jsx 檔案
- 修改 HomeCards.jsx 檔案
- 修改 JobListing.jsx 檔案
- 修改 ViewAllJobs.jsx 檔案
// Navbar.jsx
import { Link } from 'react-router-dom';
import logo from '../assets/images/logo.png';
const Navbar = () => {
return (
<nav className="bg-indigo-700 border-b border-indigo-500">
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="flex h-20 items-center justify-between">
<div
className="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
<Link className="flex flex-shrink-0 items-center mr-4" to="/">
<img
className="h-10 w-auto"
src={logo}
alt="React Jobs"
/>
<span className="hidden md:block text-white text-2xl font-bold ml-2"
>React Jobs</span
>
</Link>
<div className="md:ml-auto">
<div className="flex space-x-2">
<Link
to="/"
className="text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Home
</Link>
<Link
to="/jobs"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Jobs
</Link>
<Link
to="/add-job"
className="text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Add Job
</Link>
</div>
</div>
</div>
</div>
</div>
</nav>
)
}
export default Navbar
// HomeCards.jsx
import { Link } from 'react-router-dom';
import Card from './Card';
const HomeCards = () => {
return (
<section className="py-4">
<div className="container-xl lg:container m-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<Card>
<h2 className="text-2xl font-bold">For Developers</h2>
<p className="mt-2 mb-4">
Browse our React jobs and start your career today
</p>
<Link
to="/jobs"
className="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</Link>
</Card>
<Card bg='bg-indigo-100'>
<h2 className="text-2xl font-bold">For Employers</h2>
<p className="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<Link
to="/add-job"
className="inline-block bg-indigo-500 text-white rounded-lg px-4 py-2 hover:bg-indigo-600"
>
Add Job
</Link>
</Card>
</div>
</div>
</section>
)
}
export default HomeCards
// JobListing.jsx
import { useState } from "react";
import { FaMapMarker } from 'react-icons/fa';
import { Link } from 'react-router-dom';
const JobListing = ({ job }) => {
const [showFullDescription, setShowFullDescription] = useState(false);
let description = job.description;
if(!showFullDescription) {
description = description.substring(0, 90) + '...';
}
return (
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">{job.type}</div>
<h3 className="text-xl font-bold">{job.title}</h3>
</div>
<div className="mb-5">
{description}
</div>
<button onClick={() => setShowFullDescription((prevState) => !prevState)} className="text-indigo-500 mb-5 hover:text-indigo-600">
{ showFullDescription ? 'Less' : 'More' }
</button>
<h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<FaMapMarker className="inline text-lg mb-1 mr-1" />
{job.location}
</div>
<Link
to={`/job/${job.id}`}
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</Link>
</div>
</div>
</div>
)
}
export default JobListing
// ViewAllJobs.jsx
import { Link } from 'react-router-dom';
const ViewAllJobs = () => {
return (
<section className="m-auto max-w-lg my-10 px-6">
<Link
to="/jobs"
className="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs
</Link>
</section>
)
}
export default ViewAllJobs
Custom 404 Page
- 到 _theme_files/not-found.html 複製程式碼
- 在 pages 資料夾裡面建立 NotFoundPage.jsx 檔案
- 使用 rafce 片段快速建立程式碼
修改 NotFoundPage.jsx 檔案 - 修改 App.jsx 檔案
// NotFoundPage.jsx
import { Link } from 'react-router-dom';
import { FaExclamationTriangle } from 'react-icons/fa';
const NotFoundPage = () => {
return (
<section className="text-center flex flex-col justify-center items-center h-96">
<FaExclamationTriangle className="text-yellow-400 text-6xl mb-4" />
<h1 className="text-6xl font-bold mb-4">404 Not Found</h1>
<p className="text-xl mb-5">This page does not exist</p>
<Link
to="/"
className="text-white bg-indigo-700 hover:bg-indigo-900 rounded-md px-3 py-2 mt-4"
>Go Back
</Link>
</section>
)
}
export default NotFoundPage
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
const App = () => {
return <RouterProvider router={router} />;
}
export default App
Active Links With NavLink
- 修改 Navbar.jsx 檔案
// Navbar.jsx
import { NavLink } from 'react-router-dom';
import logo from '../assets/images/logo.png';
const Navbar = () => {
const linkClass = ({ isActive }) => isActive ? 'bg-black text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2' : 'text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2';
return (
<nav className="bg-indigo-700 border-b border-indigo-500">
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="flex h-20 items-center justify-between">
<div
className="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
<NavLink className="flex flex-shrink-0 items-center mr-4" to="/">
<img
className="h-10 w-auto"
src={logo}
alt="React Jobs"
/>
<span className="hidden md:block text-white text-2xl font-bold ml-2"
>React Jobs</span
>
</NavLink>
<div className="md:ml-auto">
<div className="flex space-x-2">
<NavLink
to="/"
className={linkClass}
>Home
</NavLink>
<NavLink
to="/jobs"
className={linkClass}
>Jobs
</NavLink>
<NavLink
to="/add-job"
className={linkClass}
>Add Job
</NavLink>
</div>
</div>
</div>
</div>
</div>
</nav>
)
}
export default Navbar
Conditional Fetching
- 修改 JobsPage.jsx 檔案
- 修改 JobListings.jsx 檔案
- 修改 HomePage.jsx 檔案
// pages/JobsPage.jsx
import JobListings from "../components/JobListings";
const JobsPage = () => {
return <section className="bg-blue-50 px-4 py-6">
<JobListings />
</section>
}
export default JobsPage
// JobListings.jsx
import JobListing from './JobListing';
import jobs from '../jobs.json';
const JobListings = ({ isHome = false }) => {
const jobListings = isHome ? jobs.slice(0, 3) : jobs;
return (
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
{ isHome ? 'Recent Jobs' : 'Browse Jobs' }
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{jobListings.map((job) => (
<JobListing key={job.id} job={ job } />
))}
</div>
</div>
</section>
)
}
export default JobListings
// HomePage.jsx
import Hero from '../components/Hero';
import HomeCards from '../components/HomeCards';
import JobListings from '../components/JobListings';
import ViewAllJobs from '../components/ViewAllJobs';
const HomePage = () => {
return (
<>
<Hero />
<HomeCards />
<JobListings isHome={true} />
<ViewAllJobs />
</>
)
}
export default HomePage
JSON Server Setup
- npm json-server
- 修改 jobs.json 檔案
- 安裝 json-server 套件
npm i -D json-server - 修改 package.json 檔案
- 執行 server – npm run server
// jobs.json
{
"jobs": [
{
"id": "1",
"title": "Senior React Developer",
"type": "Full-Time",
"description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as React or Angular.",
"location": "Boston, MA",
"salary": "$70K - $80K",
"company": {
"name": "NewTek Solutions",
"description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
"contactEmail": "contact@teksolutions.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "2",
"title": "Front-End Engineer (React & Redux)",
"type": "Full-Time",
"location": "Miami, FL",
"description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
"salary": "$70K - $80K",
"company": {
"name": "Veneer Solutions",
"description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
"contactEmail": "contact@loremipsum.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "3",
"title": "React.js Dev",
"type": "Full-Time",
"location": "Brooklyn, NY",
"description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
"salary": "$70K - $80K",
"company": {
"name": "Dolor Cloud",
"description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
"contactEmail": "contact@dolorsitamet.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "4",
"title": "React Front-End Developer",
"type": "Part-Time",
"description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
"location": "Pheonix, AZ",
"salary": "$60K - $70K",
"company": {
"name": "Alpha Elite",
"description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
"contactEmail": "contact@adipisicingelit.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "5",
"title": "Full Stack React Developer",
"type": "Full-Time",
"description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
"location": "Atlanta, GA",
"salary": "$90K - $100K",
"company": {
"name": "Browning Technologies",
"description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
"contactEmail": "contact@consecteturadipisicing.com",
"contactPhone": "555-555-5555"
}
},
{
"id": "6",
"title": "React Native Developer",
"type": "Full-Time",
"description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
"location": "Portland, OR",
"salary": "$100K - $110K",
"company": {
"name": "Port Solutions INC",
"description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
"contactEmail": "contact@ipsumlorem.com",
"contactPhone": "555-555-5555"
}
}
]
}
// package.json
{
"name": "react_crash_2024",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"server": "json-server --watch src/jobs.json --port 8000"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.2.1",
"react-router-dom": "^6.23.1"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"json-server": "^1.0.0-beta.0",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"vite": "^5.2.0"
}
}
useEffect() & Data Fetching
- 修改 JobListings.jsx 檔案
// JobListings.jsx
import { useState, useEffect } from 'react';
import JobListing from './JobListing';
const JobListings = ({ isHome = false }) => {
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchJobs = async () => {
try {
const res = await fetch('http://localhost:8000/jobs');
const data = await res.json();
setJobs(data);
} catch (error) {
console.log('Error fetching data', error);
} finally {
setLoading(false);
}
}
fetchJobs();
}, []);
return (
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
{ isHome ? 'Recent Jobs' : 'Browse Jobs' }
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{jobs.map((job) => (
<JobListing key={job.id} job={ job } />
))}
</div>
</div>
</section>
)
}
export default JobListings
Loading Spinner
- 修改 JobListings.jsx 檔案
- 安裝 react-spinners 套件
npm i react-spinners - 在 components 資料夾裡面建立 Spinner.jsx 檔案
- 使用 rafce 片段快速建立程式碼
修改 Spinner.jsx 檔案 - 修改 JobListings.jsx 檔案，匯入 Spinner
// JobListings.jsx
import { useState, useEffect } from 'react';
import JobListing from './JobListing';
import Spinner from './Spinner';
const JobListings = ({ isHome = false }) => {
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchJobs = async () => {
const apiUrl = isHome
? 'http://localhost:8000/jobs?_limit=3'
: 'http://localhost:8000/jobs';
try {
const res = await fetch(apiUrl);
const data = await res.json();
setJobs(data);
} catch (error) {
console.log('Error fetching data', error);
} finally {
setLoading(false);
}
}
fetchJobs();
}, []);
return (
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
{ isHome ? 'Recent Jobs' : 'Browse Jobs' }
</h2>
{ loading ? (
<Spinner loading={loading} />
) : (
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{jobs.map((job) => (
<JobListing key={job.id} job={ job } />
))}
</div>
)}
</div>
</section>
)
}
export default JobListings
// Spinner.jsx
import { ClipLoader } from "react-spinners";
const override = {
display: 'block',
margin: '100px auto'
};
const Spinner = ({ loading }) => {
return (
<ClipLoader
color='#4338ca'
loading={loading}
cssOverride={override}
sice={150}
/>
)
}
export default Spinner
Proxying
- 修改 vite.config.js 檔案
- 修改 JobListings.jsx 檔案
- 講解 Proxying 只是其中一種方式
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
});
// JobListings.jsx
import { useState, useEffect } from 'react';
import JobListing from './JobListing';
import Spinner from './Spinner';
const JobListings = ({ isHome = false }) => {
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchJobs = async () => {
const apiUrl = isHome
? '/api/jobs?_limit=3'
: '/api/jobs';
try {
const res = await fetch(apiUrl);
const data = await res.json();
setJobs(data);
} catch (error) {
console.log('Error fetching data', error);
} finally {
setLoading(false);
}
}
fetchJobs();
}, []);
return (
<section className="bg-blue-50 px-4 py-10">
<div className="container-xl lg:container m-auto">
<h2 className="text-3xl font-bold text-indigo-500 mb-6 text-center">
{ isHome ? 'Recent Jobs' : 'Browse Jobs' }
</h2>
{ loading ? (
<Spinner loading={loading} />
) : (
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{jobs.map((job) => (
<JobListing key={job.id} job={ job } />
))}
</div>
)}
</div>
</section>
)
}
export default JobListings
Single Job Page
- 在 pages 資料夾裡面建立 JobPage.jsx 檔案
- 使用 rafce 片段快速建立程式碼
修改 JobPage.jsx 檔案 - 修改 App.jsx 檔案
- 修改 JobListing.jsx 檔案
- 修改 JobPage.jsx 檔案
// JobPage.jsx
import { useState, useEffect } from 'react';
const JobPage = () => {
const [job, setJob] = useState(null);
useEffect(() => {
const fetchJob = async () => {
try {
const res = await fetch('/api/job');
const data = await res.json();
setJobs(data);
} catch (error) {
console.log('Error fetching data', error);
} finally {
setLoading(false);
}
}
fetchJob();
}, [])
return (
<div>JobPage</div>
)
}
export default JobPage
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage from './pages/JobPage';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/jobs/:id' element={<JobPage />} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
const App = () => {
return <RouterProvider router={router} />;
}
export default App
// JobListing.jsx
import { useState } from "react";
import { FaMapMarker } from 'react-icons/fa';
import { Link } from 'react-router-dom';
const JobListing = ({ job }) => {
const [showFullDescription, setShowFullDescription] = useState(false);
let description = job.description;
if(!showFullDescription) {
description = description.substring(0, 90) + '...';
}
return (
<div className="bg-white rounded-xl shadow-md relative">
<div className="p-4">
<div className="mb-6">
<div className="text-gray-600 my-2">{job.type}</div>
<h3 className="text-xl font-bold">{job.title}</h3>
</div>
<div className="mb-5">
{description}
</div>
<button onClick={() => setShowFullDescription((prevState) => !prevState)} className="text-indigo-500 mb-5 hover:text-indigo-600">
{ showFullDescription ? 'Less' : 'More' }
</button>
<h3 className="text-indigo-500 mb-2">{job.salary} / Year</h3>
<div className="border border-gray-100 mb-5"></div>
<div className="flex flex-col lg:flex-row justify-between mb-4">
<div className="text-orange-700 mb-3">
<FaMapMarker className="inline text-lg mb-1 mr-1" />
{job.location}
</div>
<Link
to={`/jobs/${job.id}`}
className="h-[36px] bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</Link>
</div>
</div>
</div>
)
}
export default JobListing
useParams() to Get ID
- 修改 JobPage.jsx 檔案
// JobPage.jsx
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import Spinner from '../components/Spinner';
const JobPage = () => {
const { id } = useParams();
const [job, setJob] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchJob = async () => {
try {
const res = await fetch(`/api/jobs/${id}`);
const data = await res.json();
setJob(data);
} catch (error) {
console.log('Error fetching data', error);
} finally {
setLoading(false);
}
}
fetchJob();
}, [])
return loading ? <Spinner /> : (
<h1>{ job.title }</h1>
);
}
export default JobPage
Data Loaders
- 修改 JobPage.jsx 檔案
- 修改 App.jsx 檔案
// JobPage.jsx
import { useParams, useLoaderData } from 'react-router-dom';
const JobPage = () => {
const { id } = useParams();
const job = useLoaderData();
return <h1>{ job.title }</h1>;
};
const jobLoader = async ({ params }) => {
const res = await fetch(`/api/jobs/${params.id}`);
const data = await res.json();
return data;
};
export { JobPage as default, jobLoader };
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/jobs/:id' element={<JobPage />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
const App = () => {
return <RouterProvider router={router} />;
}
export default App
Single Job Output
- 到 _theme_files/job.html 檔案複製程式碼
- 修改 JobPage.jsx 檔案
// JobPage.jsx
import { useParams, useLoaderData } from 'react-router-dom';
import { FaArrowLeft, FaMapMarker } from 'react-icons/fa';
import { Link } from 'react-router-dom';
const JobPage = () => {
const { id } = useParams();
const job = useLoaderData();
return (
<>
<section>
<div className="container m-auto py-6 px-6">
<Link
to="/jobs"
className="text-indigo-500 hover:text-indigo-600 flex items-center"
>
<FaArrowLeft className="mr-2" /> Back to Job Listings
</Link>
</div>
</section>
<section className="bg-indigo-50">
<div className="container m-auto py-10 px-6">
<div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
className="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div className="text-gray-500 mb-4">{job.type}</div>
<h1 className="text-3xl font-bold mb-4">
{job.title}
</h1>
<div
className="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<FaMapMarker className='text-orange-700 mr-1' />
<p className="text-orange-700">{job.location}</p>
</div>
</div>
<div className="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 className="text-indigo-800 text-lg font-bold mb-6">
Job Description
</h3>
<p className="mb-4">
{job.description}
</p>
<h3 className="text-indigo-800 text-lg font-bold mb-2">Salary</h3>
<p className="mb-4">{job.salary} / Year</p>
</div>
</main>
<aside>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-6">Company Info</h3>
<h2 className="text-2xl">{job.company.name}</h2>
<p className="my-2">
{job.company.description}
</p>
<hr className="my-4" />
<h3 className="text-xl">Contact Email:</h3>
<p className="my-2 bg-indigo-100 p-2 font-bold">
{job.company.contactEmail}
</p>
<h3 className="text-xl">Contact Phone:</h3>
<p className="my-2 bg-indigo-100 p-2 font-bold">{job.company.contactPhone}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 className="text-xl font-bold mb-6">Manage Job</h3>
<Link
to={`/jobs/edit/${job.id}`}
className="bg-indigo-500 hover:bg-indigo-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job
</Link>
<button
className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
</>
);
};
const jobLoader = async ({ params }) => {
const res = await fetch(`/api/jobs/${params.id}`);
const data = await res.json();
return data;
};
export { JobPage as default, jobLoader };
Add Job Page
- 在 pages 資料夾裡面建立 AddJobPage.jsx 檔案
- 使用 rafce 片段快速建立程式碼
修改 AddJobPage.jsx 檔案 - 修改 App.jsx 檔案
- 到 _theme_files/add-job.html 檔案複製程式碼
// AddJobPage.jsx
const AddJobPage = () => {
return (
<section className="bg-indigo-50">
<div className="container m-auto max-w-2xl py-24">
<div
className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form>
<h2 className="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
id="type"
name="type"
className="border rounded w-full py-2 px-3"
required
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
type="text"
id="title"
name="title"
className="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
id="description"
name="description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
></textarea>
</div>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
id="salary"
name="salary"
className="border rounded w-full py-2 px-3"
required
>
<option value="Under $50K">Under $50K</option>
<option value="$50K - 60K">$50K - $60K</option>
<option value="$60K - 70K">$60K - $70K</option>
<option value="$70K - 80K">$70K - $80K</option>
<option value="$80K - 90K">$80K - $90K</option>
<option value="$90K - 100K">$90K - $100K</option>
<option value="$100K - 125K">$100K - $125K</option>
<option value="$125K - 150K">$125K - $150K</option>
<option value="$150K - 175K">$150K - $175K</option>
<option value="$175K - 200K">$175K - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div className='mb-4'>
<label className='block text-gray-700 font-bold mb-2'>
Location
</label>
<input
type='text'
id='location'
name='location'
className='border rounded w-full py-2 px-3 mb-2'
placeholder='Company Location'
required
/>
</div>
<h3 className="text-2xl mb-5">Company Info</h3>
<div className="mb-4">
<label htmlFor="company" className="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
type="text"
id="company"
name="company"
className="border rounded w-full py-2 px-3"
placeholder="Company Name"
/>
</div>
<div className="mb-4">
<label
htmlFor="company_description"
className="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
id="company_description"
name="company_description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="contact_email"
className="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
type="email"
id="contact_email"
name="contact_email"
className="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
/>
</div>
<div className="mb-4">
<label
htmlFor="contact_phone"
className="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
type="tel"
id="contact_phone"
name="contact_phone"
className="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
/>
</div>
<div>
<button
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
)
}
export default AddJobPage
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
import AddJobPage from './pages/AddJobPage';
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/add-job' element={<AddJobPage />} />
<Route path='/jobs/:id' element={<JobPage />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
const App = () => {
return <RouterProvider router={router} />;
}
export default App
Working With Forms
- 修改 AddJobPage.jsx 檔案
- 使用 React Developer Tools Chrome 擴充工具
- 簡單介紹 Multiple cursor case preserve VSCode 套件工具(非必要)
// AddJobPage.jsx
import { useState } from 'react';
const AddJobPage = () => {
const [title, setTitle] = useState('');
const [type, setType] = useState('');
const [location, setLocation] = useState('');
const [description, setDescription] = useState('');
const [salary, setSalary] = useState('');
const [companyName, setCompanyName] = useState('');
const [companyDescription, setCompanyDescription] = useState('');
const [contactEmail, setContactEmail] = useState('');
const [contactPhone, setContactPhone] = useState('');
return (
<section className="bg-indigo-50">
<div className="container m-auto max-w-2xl py-24">
<div
className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form>
<h2 className="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
id="type"
name="type"
className="border rounded w-full py-2 px-3"
required
value={type}
onChange={(e) =>setType(e.target.value)}
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
type="text"
id="title"
name="title"
className="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
value={title}
onChange={(e) =>setTitle(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
id="description"
name="description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
value={description}
onChange={(e) =>setDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
id="salary"
name="salary"
className="border rounded w-full py-2 px-3"
required
value={salary}
onChange={(e) =>setSalary(e.target.value)}
>
<option value="Under $50K">Under $50K</option>
<option value="$50K - 60K">$50K - $60K</option>
<option value="$60K - 70K">$60K - $70K</option>
<option value="$70K - 80K">$70K - $80K</option>
<option value="$80K - 90K">$80K - $90K</option>
<option value="$90K - 100K">$90K - $100K</option>
<option value="$100K - 125K">$100K - $125K</option>
<option value="$125K - 150K">$125K - $150K</option>
<option value="$150K - 175K">$150K - $175K</option>
<option value="$175K - 200K">$175K - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div className='mb-4'>
<label className='block text-gray-700 font-bold mb-2'>
Location
</label>
<input
type='text'
id='location'
name='location'
className='border rounded w-full py-2 px-3 mb-2'
placeholder='Company Location'
required
value={location}
onChange={(e) =>setLocation(e.target.value)}
/>
</div>
<h3 className="text-2xl mb-5">Company Info</h3>
<div className="mb-4">
<label htmlFor="company" className="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
type="text"
id="company"
name="company"
className="border rounded w-full py-2 px-3"
placeholder="Company Name"
value={companyName}
onChange={(e) =>setCompanyName(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="company_description"
className="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
id="company_description"
name="company_description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
value={companyDescription}
onChange={(e) =>setCompanyDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="contact_email"
className="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
type="email"
id="contact_email"
name="contact_email"
className="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
value={contactEmail}
onChange={(e) =>setContactEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="contact_phone"
className="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
type="tel"
id="contact_phone"
name="contact_phone"
className="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
value={contactPhone}
onChange={(e) =>setContactPhone(e.target.value)}
/>
</div>
<div>
<button
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
)
}
export default AddJobPage
Form Submission
- 修改 AddJobPage.jsx 檔案
// AddJobPage.jsx
import { useState } from 'react';
const AddJobPage = () => {
const [title, setTitle] = useState('');
const [type, setType] = useState('Full-Time');
const [location, setLocation] = useState('');
const [description, setDescription] = useState('');
const [salary, setSalary] = useState('Under $50K');
const [companyName, setCompanyName] = useState('');
const [companyDescription, setCompanyDescription] = useState('');
const [contactEmail, setContactEmail] = useState('');
const [contactPhone, setContactPhone] = useState('');
const submitForm = (e) => {
e.preventDefault();
const newJob = {
title,
type,
location,
description,
salary,
company: {
name: companyName,
description: companyDescription,
contactEmail,
contactPhone
}
}
console.log(newJob);
}
return (
<section className="bg-indigo-50">
<div className="container m-auto max-w-2xl py-24">
<div
className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form onSubmit={submitForm}>
<h2 className="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
id="type"
name="type"
className="border rounded w-full py-2 px-3"
required
value={type}
onChange={(e) =>setType(e.target.value)}
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
type="text"
id="title"
name="title"
className="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
value={title}
onChange={(e) =>setTitle(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
id="description"
name="description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
value={description}
onChange={(e) =>setDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
id="salary"
name="salary"
className="border rounded w-full py-2 px-3"
required
value={salary}
onChange={(e) =>setSalary(e.target.value)}
>
<option value="Under $50K">Under $50K</option>
<option value="$50K - 60K">$50K - $60K</option>
<option value="$60K - 70K">$60K - $70K</option>
<option value="$70K - 80K">$70K - $80K</option>
<option value="$80K - 90K">$80K - $90K</option>
<option value="$90K - 100K">$90K - $100K</option>
<option value="$100K - 125K">$100K - $125K</option>
<option value="$125K - 150K">$125K - $150K</option>
<option value="$150K - 175K">$150K - $175K</option>
<option value="$175K - 200K">$175K - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div className='mb-4'>
<label className='block text-gray-700 font-bold mb-2'>
Location
</label>
<input
type='text'
id='location'
name='location'
className='border rounded w-full py-2 px-3 mb-2'
placeholder='Company Location'
required
value={location}
onChange={(e) =>setLocation(e.target.value)}
/>
</div>
<h3 className="text-2xl mb-5">Company Info</h3>
<div className="mb-4">
<label htmlFor="company" className="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
type="text"
id="company"
name="company"
className="border rounded w-full py-2 px-3"
placeholder="Company Name"
value={companyName}
onChange={(e) =>setCompanyName(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="company_description"
className="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
id="company_description"
name="company_description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
value={companyDescription}
onChange={(e) =>setCompanyDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="contact_email"
className="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
type="email"
id="contact_email"
name="contact_email"
className="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
value={contactEmail}
onChange={(e) =>setContactEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="contact_phone"
className="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
type="tel"
id="contact_phone"
name="contact_phone"
className="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
value={contactPhone}
onChange={(e) =>setContactPhone(e.target.value)}
/>
</div>
<div>
<button
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
)
}
export default AddJobPage
Pass Function as Prop
- 修改 AddJobPage.jsx 檔案
- 修改 App.jsx 檔案
// AddJobPage.jsx
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
const AddJobPage = ({ addJobSubmit }) => {
const [title, setTitle] = useState('');
const [type, setType] = useState('Full-Time');
const [location, setLocation] = useState('');
const [description, setDescription] = useState('');
const [salary, setSalary] = useState('Under $50K');
const [companyName, setCompanyName] = useState('');
const [companyDescription, setCompanyDescription] = useState('');
const [contactEmail, setContactEmail] = useState('');
const [contactPhone, setContactPhone] = useState('');
const navigate = useNavigate();
const submitForm = (e) => {
e.preventDefault();
const newJob = {
title,
type,
location,
description,
salary,
company: {
name: companyName,
description: companyDescription,
contactEmail,
contactPhone
}
}
addJobSubmit(newJob);
return navigate('/jobs');
}
return (
<section className="bg-indigo-50">
<div className="container m-auto max-w-2xl py-24">
<div className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0">
<form onSubmit={submitForm}>
<h2 className="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Job Type
</label>
<select
id="type"
name="type"
className="border rounded w-full py-2 px-3"
required
value={type}
onChange={(e) =>setType(e.target.value)}
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2"
>Job Listing Name
</label>
<input
type="text"
id="title"
name="title"
className="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
value={title}
onChange={(e) =>setTitle(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-gray-700 font-bold mb-2">
Description
</label>
<textarea
id="description"
name="description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
value={description}
onChange={(e) =>setDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2">
Salary
</label>
<select
id="salary"
name="salary"
className="border rounded w-full py-2 px-3"
required
value={salary}
onChange={(e) =>setSalary(e.target.value)}
>
<option value="Under $50K">Under $50K</option>
<option value="$50K - 60K">$50K - $60K</option>
<option value="$60K - 70K">$60K - $70K</option>
<option value="$70K - 80K">$70K - $80K</option>
<option value="$80K - 90K">$80K - $90K</option>
<option value="$90K - 100K">$90K - $100K</option>
<option value="$100K - 125K">$100K - $125K</option>
<option value="$125K - 150K">$125K - $150K</option>
<option value="$150K - 175K">$150K - $175K</option>
<option value="$175K - 200K">$175K - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div className='mb-4'>
<label className='block text-gray-700 font-bold mb-2'>
Location
</label>
<input
type='text'
id='location'
name='location'
className='border rounded w-full py-2 px-3 mb-2'
placeholder='Company Location'
required
value={location}
onChange={(e) =>setLocation(e.target.value)}
/>
</div>
<h3 className="text-2xl mb-5">Company Info</h3>
<div className="mb-4">
<label htmlFor="company" className="block text-gray-700 font-bold mb-2"
>Company Name
</label>
<input
type="text"
id="company"
name="company"
className="border rounded w-full py-2 px-3"
placeholder="Company Name"
value={companyName}
onChange={(e) =>setCompanyName(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="company_description"
className="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
id="company_description"
name="company_description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
value={companyDescription}
onChange={(e) =>setCompanyDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="contact_email"
className="block text-gray-700 font-bold mb-2"
>Contact Email
</label>
<input
type="email"
id="contact_email"
name="contact_email"
className="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
value={contactEmail}
onChange={(e) =>setContactEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="contact_phone"
className="block text-gray-700 font-bold mb-2"
>Contact Phone
</label>
<input
type="tel"
id="contact_phone"
name="contact_phone"
className="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
value={contactPhone}
onChange={(e) =>setContactPhone(e.target.value)}
/>
</div>
<div>
<button
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
)
}
export default AddJobPage
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
import AddJobPage from './pages/AddJobPage';
const App = () => {
const addJob = (newJob) => {
console.log(newJob);
};
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/add-job' element={<AddJobPage addJobSubmit={addJob} />} />
<Route path='/jobs/:id' element={<JobPage />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
return <RouterProvider router={router} />;
}
export default App
POST Request to Add Job
- 修改 App.jsx 檔案
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
import AddJobPage from './pages/AddJobPage';
const App = () => {
const addJob = async (newJob) => {
const res = await fetch('/api/jobs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newJob),
});
return;
};
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/add-job' element={<AddJobPage addJobSubmit={addJob} />} />
<Route path='/jobs/:id' element={<JobPage />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
return <RouterProvider router={router} />;
}
export default App
Delete Job Button/function
- 修改 App.jsx 檔案
- 修改 JobPage.jsx 檔案
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
import AddJobPage from './pages/AddJobPage';
const App = () => {
// Add New Job
const addJob = async (newJob) => {
const res = await fetch('/api/jobs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newJob),
});
return;
};
// Delete Job
const deleteJob = async (id) => {
console.log('delete', id);
};
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/add-job' element={<AddJobPage addJobSubmit={addJob} />} />
<Route path='/jobs/:id' element={<JobPage deleteJob={deleteJob} />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
return <RouterProvider router={router} />;
}
export default App
// JobPage.jsx
import { useParams, useLoaderData, useNavigate } from 'react-router-dom';
import { FaArrowLeft, FaMapMarker } from 'react-icons/fa';
import { Link } from 'react-router-dom';
const JobPage = ({ deleteJob }) => {
const navigate = useNavigate();
const { id } = useParams();
const job = useLoaderData();
const onDeleteClick = (jobId) => {
const confirm = window.confirm('Are you sure you want to delete this listing?');
if (!confirm) return;
deleteJob(jobId);
navigate('/jobs');
};
return (
<>
<section>
<div className="container m-auto py-6 px-6">
<Link
to="/jobs"
className="text-indigo-500 hover:text-indigo-600 flex items-center"
>
<FaArrowLeft className="mr-2" /> Back to Job Listings
</Link>
</div>
</section>
<section className="bg-indigo-50">
<div className="container m-auto py-10 px-6">
<div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
className="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div className="text-gray-500 mb-4">{job.type}</div>
<h1 className="text-3xl font-bold mb-4">
{job.title}
</h1>
<div
className="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<FaMapMarker className='text-orange-700 mr-1' />
<p className="text-orange-700">{job.location}</p>
</div>
</div>
<div className="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 className="text-indigo-800 text-lg font-bold mb-6">
Job Description
</h3>
<p className="mb-4">
{job.description}
</p>
<h3 className="text-indigo-800 text-lg font-bold mb-2">Salary</h3>
<p className="mb-4">{job.salary} / Year</p>
</div>
</main>
<aside>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-6">Company Info</h3>
<h2 className="text-2xl">{job.company.name}</h2>
<p className="my-2">
{job.company.description}
</p>
<hr className="my-4" />
<h3 className="text-xl">Contact Email:</h3>
<p className="my-2 bg-indigo-100 p-2 font-bold">
{job.company.contactEmail}
</p>
<h3 className="text-xl">Contact Phone:</h3>
<p className="my-2 bg-indigo-100 p-2 font-bold">{job.company.contactPhone}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 className="text-xl font-bold mb-6">Manage Job</h3>
<Link
to={`/jobs/edit/${job.id}`}
className="bg-indigo-500 hover:bg-indigo-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job
</Link>
<button
onClick={ () => onDeleteClick(job.id) }
className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
</>
);
};
const jobLoader = async ({ params }) => {
const res = await fetch(`/api/jobs/${params.id}`);
const data = await res.json();
return data;
};
export { JobPage as default, jobLoader };
DELETE Request to Remove Job
- 修改 App.jsx 檔案
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
import AddJobPage from './pages/AddJobPage';
const App = () => {
// Add New Job
const addJob = async (newJob) => {
const res = await fetch('/api/jobs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newJob),
});
return;
};
// Delete Job
const deleteJob = async (id) => {
const res = await fetch(`/api/jobs/${id}`, {
method: 'DELETE',
});
return;
};
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/add-job' element={<AddJobPage addJobSubmit={addJob} />} />
<Route path='/jobs/:id' element={<JobPage deleteJob={deleteJob} />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
return <RouterProvider router={router} />;
}
export default App
React Toastify Package
- npm 套件安裝
npm i react-toastify - 修改 MainLayout.jsx 檔案
- 修改 JobPage.jsx 檔案
- 修改 AddJobPage.jsx 檔案
// MainLayout.jsx
import { Outlet } from 'react-router-dom';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/ReactToastify.css';
import Navbar from '../components/Navbar';
const MainLayout = () => {
return (
<>
<Navbar />
<Outlet />
<ToastContainer />
</>
)
}
export default MainLayout
// JobPage.jsx
import { useParams, useLoaderData, useNavigate } from 'react-router-dom';
import { FaArrowLeft, FaMapMarker } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';
const JobPage = ({ deleteJob }) => {
const navigate = useNavigate();
const { id } = useParams();
const job = useLoaderData();
const onDeleteClick = (jobId) => {
const confirm = window.confirm('Are you sure you want to delete this listing?');
if (!confirm) return;
deleteJob(jobId);
toast.success('Job deleted successfully');
navigate('/jobs');
};
return (
<>
<section>
<div className="container m-auto py-6 px-6">
<Link
to="/jobs"
className="text-indigo-500 hover:text-indigo-600 flex items-center"
>
<FaArrowLeft className="mr-2" /> Back to Job Listings
</Link>
</div>
</section>
<section className="bg-indigo-50">
<div className="container m-auto py-10 px-6">
<div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
className="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div className="text-gray-500 mb-4">{job.type}</div>
<h1 className="text-3xl font-bold mb-4">
{job.title}
</h1>
<div
className="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<FaMapMarker className='text-orange-700 mr-1' />
<p className="text-orange-700">{job.location}</p>
</div>
</div>
<div className="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 className="text-indigo-800 text-lg font-bold mb-6">
Job Description
</h3>
<p className="mb-4">
{job.description}
</p>
<h3 className="text-indigo-800 text-lg font-bold mb-2">Salary</h3>
<p className="mb-4">{job.salary} / Year</p>
</div>
</main>
<aside>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-6">Company Info</h3>
<h2 className="text-2xl">{job.company.name}</h2>
<p className="my-2">
{job.company.description}
</p>
<hr className="my-4" />
<h3 className="text-xl">Contact Email:</h3>
<p className="my-2 bg-indigo-100 p-2 font-bold">
{job.company.contactEmail}
</p>
<h3 className="text-xl">Contact Phone:</h3>
<p className="my-2 bg-indigo-100 p-2 font-bold">{job.company.contactPhone}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 className="text-xl font-bold mb-6">Manage Job</h3>
<Link
to={`/jobs/edit/${job.id}`}
className="bg-indigo-500 hover:bg-indigo-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job
</Link>
<button
onClick={ () => onDeleteClick(job.id) }
className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
</>
);
};
const jobLoader = async ({ params }) => {
const res = await fetch(`/api/jobs/${params.id}`);
const data = await res.json();
return data;
};
export { JobPage as default, jobLoader };
// AddJobPage.jsx
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
const AddJobPage = ({ addJobSubmit }) => {
const [title, setTitle] = useState('');
const [type, setType] = useState('Full-Time');
const [location, setLocation] = useState('');
const [description, setDescription] = useState('');
const [salary, setSalary] = useState('Under $50K');
const [companyName, setCompanyName] = useState('');
const [companyDescription, setCompanyDescription] = useState('');
const [contactEmail, setContactEmail] = useState('');
const [contactPhone, setContactPhone] = useState('');
const navigate = useNavigate();
const submitForm = (e) => {
e.preventDefault();
const newJob = {
title,
type,
location,
description,
salary,
company: {
name: companyName,
description: companyDescription,
contactEmail,
contactPhone
}
}
addJobSubmit(newJob);
toast.success('Job Added Successfully');
return navigate('/jobs');
}
return (
<section className="bg-indigo-50">
<div className="container m-auto max-w-2xl py-24">
<div className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0">
<form onSubmit={submitForm}>
<h2 className="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Job Type
</label>
<select
id="type"
name="type"
className="border rounded w-full py-2 px-3"
required
value={type}
onChange={(e) =>setType(e.target.value)}
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2"
>Job Listing Name
</label>
<input
type="text"
id="title"
name="title"
className="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
value={title}
onChange={(e) =>setTitle(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-gray-700 font-bold mb-2">
Description
</label>
<textarea
id="description"
name="description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
value={description}
onChange={(e) =>setDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2">
Salary
</label>
<select
id="salary"
name="salary"
className="border rounded w-full py-2 px-3"
required
value={salary}
onChange={(e) =>setSalary(e.target.value)}
>
<option value="Under $50K">Under $50K</option>
<option value="$50K - 60K">$50K - $60K</option>
<option value="$60K - 70K">$60K - $70K</option>
<option value="$70K - 80K">$70K - $80K</option>
<option value="$80K - 90K">$80K - $90K</option>
<option value="$90K - 100K">$90K - $100K</option>
<option value="$100K - 125K">$100K - $125K</option>
<option value="$125K - 150K">$125K - $150K</option>
<option value="$150K - 175K">$150K - $175K</option>
<option value="$175K - 200K">$175K - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div className='mb-4'>
<label className='block text-gray-700 font-bold mb-2'>
Location
</label>
<input
type='text'
id='location'
name='location'
className='border rounded w-full py-2 px-3 mb-2'
placeholder='Company Location'
required
value={location}
onChange={(e) =>setLocation(e.target.value)}
/>
</div>
<h3 className="text-2xl mb-5">Company Info</h3>
<div className="mb-4">
<label htmlFor="company" className="block text-gray-700 font-bold mb-2"
>Company Name
</label>
<input
type="text"
id="company"
name="company"
className="border rounded w-full py-2 px-3"
placeholder="Company Name"
value={companyName}
onChange={(e) =>setCompanyName(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="company_description"
className="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
id="company_description"
name="company_description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
value={companyDescription}
onChange={(e) =>setCompanyDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="contact_email"
className="block text-gray-700 font-bold mb-2"
>Contact Email
</label>
<input
type="email"
id="contact_email"
name="contact_email"
className="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
value={contactEmail}
onChange={(e) =>setContactEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="contact_phone"
className="block text-gray-700 font-bold mb-2"
>Contact Phone
</label>
<input
type="tel"
id="contact_phone"
name="contact_phone"
className="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
value={contactPhone}
onChange={(e) =>setContactPhone(e.target.value)}
/>
</div>
<div>
<button
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
)
}
export default AddJobPage
Edit Job Page/Form
- 在 pages 資料夾裡面建立 EditJobPage.jsx 檔案
- 使用 rafce 片段快速建立程式碼
修改 EditJobPage.jsx 檔案 - 修改 App.jsx 檔案
- 修改 JobPage.jsx 檔案
- 修改 EditJobPage.jsx 檔案
- 複製 AddJobPage.jsx 程式碼 <section> 部分、useState(”) 部分
修改 EditJobPage.jsx 檔案
// EditJobPage.jsx
import { useState } from 'react';
import { useParams, useLoaderData, useNavigate } from 'react-router-dom';
const EditJobPage = () => {
const job = useLoaderData();
const [title, setTitle] = useState(job.title);
const [type, setType] = useState(job.type);
const [location, setLocation] = useState(job.location);
const [description, setDescription] = useState(job.description);
const [salary, setSalary] = useState(job.salary);
const [companyName, setCompanyName] = useState(job.company.name);
const [companyDescription, setCompanyDescription] = useState(job.company.description);
const [contactEmail, setContactEmail] = useState(job.company.contactEmail);
const [contactPhone, setContactPhone] = useState(job.company.contactPhone);
const submitForm = (e) => {};
return (
<section className="bg-indigo-50">
<div className="container m-auto max-w-2xl py-24">
<div className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0">
<form onSubmit={submitForm}>
<h2 className="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Job Type
</label>
<select
id="type"
name="type"
className="border rounded w-full py-2 px-3"
required
value={type}
onChange={(e) =>setType(e.target.value)}
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2"
>Job Listing Name
</label>
<input
type="text"
id="title"
name="title"
className="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
value={title}
onChange={(e) =>setTitle(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-gray-700 font-bold mb-2">
Description
</label>
<textarea
id="description"
name="description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
value={description}
onChange={(e) =>setDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2">
Salary
</label>
<select
id="salary"
name="salary"
className="border rounded w-full py-2 px-3"
required
value={salary}
onChange={(e) =>setSalary(e.target.value)}
>
<option value="Under $50K">Under $50K</option>
<option value="$50K - 60K">$50K - $60K</option>
<option value="$60K - 70K">$60K - $70K</option>
<option value="$70K - 80K">$70K - $80K</option>
<option value="$80K - 90K">$80K - $90K</option>
<option value="$90K - 100K">$90K - $100K</option>
<option value="$100K - 125K">$100K - $125K</option>
<option value="$125K - 150K">$125K - $150K</option>
<option value="$150K - 175K">$150K - $175K</option>
<option value="$175K - 200K">$175K - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div className='mb-4'>
<label className='block text-gray-700 font-bold mb-2'>
Location
</label>
<input
type='text'
id='location'
name='location'
className='border rounded w-full py-2 px-3 mb-2'
placeholder='Company Location'
required
value={location}
onChange={(e) =>setLocation(e.target.value)}
/>
</div>
<h3 className="text-2xl mb-5">Company Info</h3>
<div className="mb-4">
<label htmlFor="company" className="block text-gray-700 font-bold mb-2"
>Company Name
</label>
<input
type="text"
id="company"
name="company"
className="border rounded w-full py-2 px-3"
placeholder="Company Name"
value={companyName}
onChange={(e) =>setCompanyName(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="company_description"
className="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
id="company_description"
name="company_description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
value={companyDescription}
onChange={(e) =>setCompanyDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="contact_email"
className="block text-gray-700 font-bold mb-2"
>Contact Email
</label>
<input
type="email"
id="contact_email"
name="contact_email"
className="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
value={contactEmail}
onChange={(e) =>setContactEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="contact_phone"
className="block text-gray-700 font-bold mb-2"
>Contact Phone
</label>
<input
type="tel"
id="contact_phone"
name="contact_phone"
className="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
value={contactPhone}
onChange={(e) =>setContactPhone(e.target.value)}
/>
</div>
<div>
<button
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
)
}
export default EditJobPage
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
import AddJobPage from './pages/AddJobPage';
import EditJobPage from './pages/EditJobPage';
const App = () => {
// Add New Job
const addJob = async (newJob) => {
const res = await fetch('/api/jobs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newJob),
});
return;
};
// Delete Job
const deleteJob = async (id) => {
const res = await fetch(`/api/jobs/${id}`, {
method: 'DELETE',
});
return;
};
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/add-job' element={<AddJobPage addJobSubmit={addJob} />} />
<Route path='/edit-job/:id' element={<EditJobPage />} loader={jobLoader} />
<Route path='/jobs/:id' element={<JobPage deleteJob={deleteJob} />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
return <RouterProvider router={router} />;
}
export default App
// JobPage.jsx
import { useParams, useLoaderData, useNavigate } from 'react-router-dom';
import { FaArrowLeft, FaMapMarker } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';
const JobPage = ({ deleteJob }) => {
const navigate = useNavigate();
const { id } = useParams();
const job = useLoaderData();
const onDeleteClick = (jobId) => {
const confirm = window.confirm('Are you sure you want to delete this listing?');
if (!confirm) return;
deleteJob(jobId);
toast.success('Job deleted successfully');
navigate('/jobs');
};
return (
<>
<section>
<div className="container m-auto py-6 px-6">
<Link
to="/jobs"
className="text-indigo-500 hover:text-indigo-600 flex items-center"
>
<FaArrowLeft className="mr-2" /> Back to Job Listings
</Link>
</div>
</section>
<section className="bg-indigo-50">
<div className="container m-auto py-10 px-6">
<div className="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
className="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div className="text-gray-500 mb-4">{job.type}</div>
<h1 className="text-3xl font-bold mb-4">
{job.title}
</h1>
<div
className="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<FaMapMarker className='text-orange-700 mr-1' />
<p className="text-orange-700">{job.location}</p>
</div>
</div>
<div className="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 className="text-indigo-800 text-lg font-bold mb-6">
Job Description
</h3>
<p className="mb-4">
{job.description}
</p>
<h3 className="text-indigo-800 text-lg font-bold mb-2">Salary</h3>
<p className="mb-4">{job.salary} / Year</p>
</div>
</main>
<aside>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-bold mb-6">Company Info</h3>
<h2 className="text-2xl">{job.company.name}</h2>
<p className="my-2">
{job.company.description}
</p>
<hr className="my-4" />
<h3 className="text-xl">Contact Email:</h3>
<p className="my-2 bg-indigo-100 p-2 font-bold">
{job.company.contactEmail}
</p>
<h3 className="text-xl">Contact Phone:</h3>
<p className="my-2 bg-indigo-100 p-2 font-bold">{job.company.contactPhone}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 className="text-xl font-bold mb-6">Manage Job</h3>
<Link
to={`/edit-job/${job.id}`}
className="bg-indigo-500 hover:bg-indigo-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job
</Link>
<button
onClick={ () => onDeleteClick(job.id) }
className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
</>
);
};
const jobLoader = async ({ params }) => {
const res = await fetch(`/api/jobs/${params.id}`);
const data = await res.json();
return data;
};
export { JobPage as default, jobLoader };
Update Form Submission
- 修改 EditJobPage.jsx 檔案
複製 AddJobPage.jsx 檔案 submitForm 程式碼部分並做修改 - 修改 App.jsx 檔案
// EditJobPage.jsx
import { useState } from 'react';
import { useLoaderData, useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
const EditJobPage = ({ updateJobSubmit }) => {
const job = useLoaderData();
const [title, setTitle] = useState(job.title);
const [type, setType] = useState(job.type);
const [location, setLocation] = useState(job.location);
const [description, setDescription] = useState(job.description);
const [salary, setSalary] = useState(job.salary);
const [companyName, setCompanyName] = useState(job.company.name);
const [companyDescription, setCompanyDescription] = useState(job.company.description);
const [contactEmail, setContactEmail] = useState(job.company.contactEmail);
const [contactPhone, setContactPhone] = useState(job.company.contactPhone);
const navigate = useNavigate();
const submitForm = (e) => {
e.preventDefault();
const updatedJob = {
id,
title,
type,
location,
description,
salary,
company: {
name: companyName,
description: companyDescription,
contactEmail,
contactPhone
}
}
updateJobSubmit(updatedJob);
toast.success('Job Updated Successfully');
return navigate(`/jobs/${id}`);
}
return (
<section className="bg-indigo-50">
<div className="container m-auto max-w-2xl py-24">
<div className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0">
<form onSubmit={submitForm}>
<h2 className="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Job Type
</label>
<select
id="type"
name="type"
className="border rounded w-full py-2 px-3"
required
value={type}
onChange={(e) =>setType(e.target.value)}
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2"
>Job Listing Name
</label>
<input
type="text"
id="title"
name="title"
className="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
value={title}
onChange={(e) =>setTitle(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-gray-700 font-bold mb-2">
Description
</label>
<textarea
id="description"
name="description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
value={description}
onChange={(e) =>setDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2">
Salary
</label>
<select
id="salary"
name="salary"
className="border rounded w-full py-2 px-3"
required
value={salary}
onChange={(e) =>setSalary(e.target.value)}
>
<option value="Under $50K">Under $50K</option>
<option value="$50K - 60K">$50K - $60K</option>
<option value="$60K - 70K">$60K - $70K</option>
<option value="$70K - 80K">$70K - $80K</option>
<option value="$80K - 90K">$80K - $90K</option>
<option value="$90K - 100K">$90K - $100K</option>
<option value="$100K - 125K">$100K - $125K</option>
<option value="$125K - 150K">$125K - $150K</option>
<option value="$150K - 175K">$150K - $175K</option>
<option value="$175K - 200K">$175K - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div className='mb-4'>
<label className='block text-gray-700 font-bold mb-2'>
Location
</label>
<input
type='text'
id='location'
name='location'
className='border rounded w-full py-2 px-3 mb-2'
placeholder='Company Location'
required
value={location}
onChange={(e) =>setLocation(e.target.value)}
/>
</div>
<h3 className="text-2xl mb-5">Company Info</h3>
<div className="mb-4">
<label htmlFor="company" className="block text-gray-700 font-bold mb-2"
>Company Name
</label>
<input
type="text"
id="company"
name="company"
className="border rounded w-full py-2 px-3"
placeholder="Company Name"
value={companyName}
onChange={(e) =>setCompanyName(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="company_description"
className="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
id="company_description"
name="company_description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
value={companyDescription}
onChange={(e) =>setCompanyDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="contact_email"
className="block text-gray-700 font-bold mb-2"
>Contact Email
</label>
<input
type="email"
id="contact_email"
name="contact_email"
className="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
value={contactEmail}
onChange={(e) =>setContactEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="contact_phone"
className="block text-gray-700 font-bold mb-2"
>Contact Phone
</label>
<input
type="tel"
id="contact_phone"
name="contact_phone"
className="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
value={contactPhone}
onChange={(e) =>setContactPhone(e.target.value)}
/>
</div>
<div>
<button
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
)
}
export default EditJobPage
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
import AddJobPage from './pages/AddJobPage';
import EditJobPage from './pages/EditJobPage';
const App = () => {
// Add New Job
const addJob = async (newJob) => {
const res = await fetch('/api/jobs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newJob),
});
return;
};
// Delete Job
const deleteJob = async (id) => {
const res = await fetch(`/api/jobs/${id}`, {
method: 'DELETE',
});
return;
};
// Update Job
const updateJob = async () => {
}
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/add-job' element={<AddJobPage addJobSubmit={addJob} />} />
<Route path='/edit-job/:id' element={<EditJobPage updateJobSubmit={updateJob} />} loader={jobLoader} />
<Route path='/jobs/:id' element={<JobPage deleteJob={deleteJob} />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
return <RouterProvider router={router} />;
}
export default App
PUT Request to Update Job
- 修改 App.jsx 檔案
- 修改 EditJobPage.jsx 檔案
- 簡單提到 authentication
// App.jsx
import {
Route,
createBrowserRouter,
createRoutesFromElements,
RouterProvider
} from 'react-router-dom';
import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import JobsPage from './pages/JobsPage';
import NotFoundPage from './pages/NotFoundPage';
import JobPage, { jobLoader } from './pages/JobPage';
import AddJobPage from './pages/AddJobPage';
import EditJobPage from './pages/EditJobPage';
const App = () => {
// Add New Job
const addJob = async (newJob) => {
const res = await fetch('/api/jobs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newJob),
});
return;
};
// Delete Job
const deleteJob = async (id) => {
const res = await fetch(`/api/jobs/${id}`, {
method: 'DELETE',
});
return;
};
// Update Job
const updateJob = async (job) => {
const res = await fetch(`/api/jobs/${job.id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(job),
});
return;
}
const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<MainLayout />}>
<Route index element={<HomePage />} />
<Route path='/jobs' element={<JobsPage />} />
<Route path='/add-job' element={<AddJobPage addJobSubmit={addJob} />} />
<Route path='/edit-job/:id' element={<EditJobPage updateJobSubmit={updateJob} />} loader={jobLoader} />
<Route path='/jobs/:id' element={<JobPage deleteJob={deleteJob} />} loader={jobLoader} />
<Route path='*' element={<NotFoundPage />} />
</Route>
)
);
return <RouterProvider router={router} />;
}
export default App
// EditJobPage.jsx
import { useState } from 'react';
import { useParams, useLoaderData, useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
const EditJobPage = ({ updateJobSubmit }) => {
const job = useLoaderData();
const [title, setTitle] = useState(job.title);
const [type, setType] = useState(job.type);
const [location, setLocation] = useState(job.location);
const [description, setDescription] = useState(job.description);
const [salary, setSalary] = useState(job.salary);
const [companyName, setCompanyName] = useState(job.company.name);
const [companyDescription, setCompanyDescription] = useState(job.company.description);
const [contactEmail, setContactEmail] = useState(job.company.contactEmail);
const [contactPhone, setContactPhone] = useState(job.company.contactPhone);
const navigate = useNavigate();
const { id } = useParams();
const submitForm = (e) => {
e.preventDefault();
const updatedJob = {
id,
title,
type,
location,
description,
salary,
company: {
name: companyName,
description: companyDescription,
contactEmail,
contactPhone
}
}
updateJobSubmit(updatedJob);
toast.success('Job Updated Successfully');
return navigate(`/jobs/${id}`);
}
return (
<section className="bg-indigo-50">
<div className="container m-auto max-w-2xl py-24">
<div className="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0">
<form onSubmit={submitForm}>
<h2 className="text-3xl text-center font-semibold mb-6">Update Job</h2>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2"
>Job Type
</label>
<select
id="type"
name="type"
className="border rounded w-full py-2 px-3"
required
value={type}
onChange={(e) =>setType(e.target.value)}
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2"
>Job Listing Name
</label>
<input
type="text"
id="title"
name="title"
className="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
value={title}
onChange={(e) =>setTitle(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="description"
className="block text-gray-700 font-bold mb-2">
Description
</label>
<textarea
id="description"
name="description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
value={description}
onChange={(e) =>setDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label htmlFor="type" className="block text-gray-700 font-bold mb-2">
Salary
</label>
<select
id="salary"
name="salary"
className="border rounded w-full py-2 px-3"
required
value={salary}
onChange={(e) =>setSalary(e.target.value)}
>
<option value="Under $50K">Under $50K</option>
<option value="$50K - 60K">$50K - $60K</option>
<option value="$60K - 70K">$60K - $70K</option>
<option value="$70K - 80K">$70K - $80K</option>
<option value="$80K - 90K">$80K - $90K</option>
<option value="$90K - 100K">$90K - $100K</option>
<option value="$100K - 125K">$100K - $125K</option>
<option value="$125K - 150K">$125K - $150K</option>
<option value="$150K - 175K">$150K - $175K</option>
<option value="$175K - 200K">$175K - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div className='mb-4'>
<label className='block text-gray-700 font-bold mb-2'>
Location
</label>
<input
type='text'
id='location'
name='location'
className='border rounded w-full py-2 px-3 mb-2'
placeholder='Company Location'
required
value={location}
onChange={(e) =>setLocation(e.target.value)}
/>
</div>
<h3 className="text-2xl mb-5">Company Info</h3>
<div className="mb-4">
<label htmlFor="company" className="block text-gray-700 font-bold mb-2"
>Company Name
</label>
<input
type="text"
id="company"
name="company"
className="border rounded w-full py-2 px-3"
placeholder="Company Name"
value={companyName}
onChange={(e) =>setCompanyName(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="company_description"
className="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
id="company_description"
name="company_description"
className="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
value={companyDescription}
onChange={(e) =>setCompanyDescription(e.target.value)}
></textarea>
</div>
<div className="mb-4">
<label
htmlFor="contact_email"
className="block text-gray-700 font-bold mb-2"
>Contact Email
</label>
<input
type="email"
id="contact_email"
name="contact_email"
className="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
value={contactEmail}
onChange={(e) =>setContactEmail(e.target.value)}
/>
</div>
<div className="mb-4">
<label
htmlFor="contact_phone"
className="block text-gray-700 font-bold mb-2"
>Contact Phone
</label>
<input
type="tel"
id="contact_phone"
name="contact_phone"
className="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
value={contactPhone}
onChange={(e) =>setContactPhone(e.target.value)}
/>
</div>
<div>
<button
className="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Update Job
</button>
</div>
</form>
</div>
</div>
</section>
)
}
export default EditJobPage
Build Static Assets For Production
- 停止 development sever
- 使用終端機執行指令
npm run build 編譯，會建立 dist 資料夾 - 使用終端機執行指令
npm run preview - 這是前端課程，後端資料在 deploy 無法正常運作