React js Darija Review App الجزء الأول
فهاد ل projet الجديد غادي نقادو React js Darija Review App ل App غادي تكون simple فيها فورم لي كتمكن المستخدم من إضافة التقييمات تعديلها أو حذفها.
نظرة سريعة بالفيديو
1- إضافة les packages لي غادي نحتاجو
أول حاجة زيد react project setup ب
npx create-react-app project_name
من بعد فل package.json زيد les packages لي معندكش ودير
npm install
يمكنلك أيضا ت copier وت coller ل contenu عندك فنفس ل fichier ودير
npm install
الكود ديال الملف هو :
//
{
"name": "react_rating_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"framer-motion": "^6.3.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.1",
"react-simple-star-rating": "^4.0.5",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
2- إضافة Bootstrap 5 & Bootstrap 5 Icons
من بعد غادي نزيدو Bootstrap 5 & Bootstrap 5 Icons ل projet ديالنا بل les commandes :
npm install bootstrap
npm i bootstrap-icons
وفل ل fichier index.js غادي نزيد Bootstrap 5 ول Icons ل App.
الكود ديال الملف بعد التعديل :
//
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
3- إضافة ل Header Component
من بعد غادي تزيد dossier components وفيه زيد fichier Header.js لي فيه الكود التالي :
//
import React from 'react'
export default function Header() {
return (
<nav className="navbar navbar-light">
<div className="container d-flex justify-content-center">
<a className="navbar-brand" href="#">
<h3><i className="bi bi-star-half fs-2 text-danger"></i> React Review App</h3>
</a>
</div>
</nav>
)
}
4- إضافة ل Form Component
من بعد فنفس dossier components زيد fichier Form.js لي فيه غادي تكون الفورم ديالنا و لي فيه غادي يكون الكود التالي :
//
import React, { useContext, useEffect, useState } from 'react'
import { Rating } from 'react-simple-star-rating'
import { v4 as uuidv4 } from 'uuid';
import { ReviewContext } from './context/ReviewContext';
export default function Form() {
const [name,setName] = useState('');
const [message,setMessage] = useState('');
const [rating, setRating] = useState(0); // initial rating value
const {addReview, reviewToEdit, updateReview} = useContext(ReviewContext);
useEffect(() => {
if(reviewToEdit.updating){
setName(reviewToEdit.review.name);
setMessage(reviewToEdit.review.message);
setRating(reviewToEdit.review.rating * 20);
}
},[reviewToEdit])
const handleRating = (rate) => {
setRating(rate);
}
const formSubmit = (e) => {
e.preventDefault();
if(reviewToEdit.updating){
const review = {
id: reviewToEdit.review.id,
name,
message,
rating: rating > 5 ? rating / 20 : rating
}
updateReview(review);
}else{
const review = {
id: uuidv4(),
name,
message,
rating: rating / 20
}
addReview(review);
}
setName('');
setMessage('')
setRating(0);
}
const isDisabled = () => {
if(!name || !message || !rating > 0){
return true;
}
}
return (
<form className='mt-5' onSubmit={(e) => formSubmit(e)}>
<div className='mb-3'>
<label htmlFor='name' className='form-label'>Name</label>
<input
type='text'
name='name'
value={name}
onChange={(e) => setName(e.target.value)}
className='form-control'
placeholder='Name' />
</div>
<div className='mb-3'>
<label htmlFor='message' className='form-label'>Message</label>
<textarea
className='form-control'
name='message'
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder='Message'
rows='3'></textarea>
</div>
<div className='mb-3'>
<Rating
onClick={handleRating}
ratingValue={rating} /* Available Props */ />
</div>
<div className='mb-3'>
<button
disabled={isDisabled()}
type='submit'
className={`btn btn-${reviewToEdit.updating ? 'warning' : 'primary'}`}>
{
reviewToEdit.updating ? 'Update' : 'Submit'
}
</button>
</div>
</form>
)
}
5- إضافة ReviewList Component
من بعد فنفس dossier components زيد fichier ReviewList.js لي فيه غادي تكون la liste ديال التقييمات لي تزادو و لي فيه غادي يكون الكود التالي :
//
import React, { useContext } from 'react'
import AverageRating from './AverageRating'
import {ReviewContext} from './context/ReviewContext'
import ListItem from './ListItem'
export default function ReviewList({removeReview}) {
const {reviews} = useContext(ReviewContext);
return (
<>
<AverageRating/>
<ol className="mt-4 list-group list-group-numbered">
{
reviews.map(review => (
<ListItem key={review.id} removeReview={removeReview} review={review} />
))
}
</ol>
</>
)
}