React js Darija Review App الجزء الأول

imadbelasri Reactjs
RS

فهاد ل 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>
    </>
  )
}
                                                        
                                                    

دروس ذات صلة

RS

Blog App ب react js الجزء الأول

فهاد ل projet الجديد لي غادي يبقى مفتوح على تحديث جديد كل مرة غادي نشوفوا كيفاش نقادو blog ب react j...


RS

BLOG APP ب REACT JS الجزء الثاني

فهاد الجزء الثاني من blog app ب react js غادي نزيدو ل header ول footer ل application ديالنا ولي فيه...


RS

BLOG APP ب REACT JS الجزء الثالت

فهاد الجزء الثالت من BLOG APP ب REACT JS غادي نكملو ل projet ديالنا غادي نشوفوا كيفاش نزيدو الق...


RS

Blog App ب react js الجزء الرابع

فهاد الجزء الرابع من Blog ب react js غادي نكملوا ال projet بعرض les articles كاملين فالصفحة الخاصة ب...


RS

Notes App ب react js & firebase الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو notes app ب react js & firebase فل app معروف شنو كتدير...


RS

NOTES APP ب REACT JS & FIREBASE الجزء الثاني

فهاد الجزء الثاني من notes app ب react js غادي نكملو ل projet وغادي نزيدوا القائمة ولي غادي تمكنا من...


RS

Notes App ب react js & firebase الجزء الثالت

فهاد الجزء الثالت من Notes App ب react js & firebase غادي نكملو ل projet ديالنا غادي نزيدو ل form دي...


RS

NOTES APP ب REACT JS & FIREBASE الجزء الرابع والأخير

فهاد الجزء الرابع والاخير من NOTES APP ب REACT JS & FIREBASE غادي نكملوا ل projet وغادي نزيدو ل...


RS

Twitter app ب laravel & react js الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو Twitter App لي هي application كتمكن من إضافة des tweets...


RS

Twitter app ب laravel & react js الجزء الثاني

فهاد الجزء الثاني من Twitter app ب laravel & react js غادي نكملوا ل projet ونزيدو الجزء الخاص بالمست...