React.js – Тема 8 – Результат – Courses WebSkill

Слідкуйте за нами:

Facebook Instagram Youtube

Тема 8. React.js Review & Ratings

Теорія
Завдання
Теми React.js
Готовий код

Створення Платформи відгуків та рейтингів

Створення React.js додатку, введення команд в консоль
D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку
npx create-react-app назва додатку - створення нового React.js проєкту
npx create-react-app - сама команда створення
назва додатку - назва папки в якій буде додаток
cd назва додатку - переходимо в створену папку

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли: setupTests.js,repor,WebVitals.js,logo.svg,index.css,App.test.js
З файлу index.js видаляємо такі рядки
import './index.css'; import reportWebVitals from './reportWebVitals'; reportWebVitals();
Та коментарі: // If you want...
З файлу App.js видаляємо import logo from './logo.svg';
Тег <div className="app"> і все що всередині нього

В папці src залишаємо лише такі файли:
App.js, App.css, index.js
Одразу можете створити папку Components - папка для компонентів наших файлів

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Подивитись стилізацію App.css
Стилізація App.css
/* src/App.css */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.container {
  max-width: 800px;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #333;
}

.product {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
}

.product h2 {
  color: #333;
}

.product button {
  background-color: #4caf50;
  color: #fff;
  border: none;
  padding: 8px 16px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}

.review {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.review h3 {
  color: #333;
}

.review p {
  margin: 10px 0;
}

.reviewForm form {
  display: flex;
  flex-direction: column;
}

.reviewForm label {
  margin-bottom: 10px;
}

.reviewForm textarea,
.reviewForm input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.reviewForm button {
  background-color: #4caf50;
  color: #fff;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
}
/* src/ReviewForm.css */
.reviewForm {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.reviewForm label {
  display: block;
  margin-bottom: 10px;
}

.reviewForm input,
.reviewForm textarea,
.reviewForm button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.reviewForm button {
  background-color: #4caf50;
  color: #fff;
  border: none;
  cursor: pointer;
}

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Початок роботи із App.js та іншими файлами

1. Створити папку components та добавити нові компоненти Product.js, Review.js, ReviewForm.js одразу підключіть та виведіть їх в App.js

2. Нижче код кожного із файлів, вставте цей код у свої створені файли.

3. Добавлено лише 2 продукти, за бажанням можете збільшити їх кількість в файлі App.js

Файл App.js
App.js
// src/App.js
import React, { useState } from 'react';
import './App.css';
import Product from './components/Product';
import Review from './components/Review';
import ReviewForm from './components/ReviewForm';

const App = () => {
  // Створення стану для зберігання відгуків
  const [reviews, setReviews] = useState({});

  // Функція для додавання нового відгуку до конкретного продукту
  const addReview = (productId, newReview) => {
    setReviews({
      ...reviews,
      [productId]: [...(reviews[productId] || []), newReview],
    });
  };

  // Список продуктів
  const products = [
    { id: 1, name: 'Product A' },
    { id: 2, name: 'Product B' },
    // Додайте додаткові продукти, якщо потрібно
  ];

  return (
    <div className="container">
      <h1>Платформа відгуків</h1>
      {products.map((product) => (
        <div key={product.id} className="product">
          {/* Компонент продукту з можливістю додавання відгуку */}
          <Product product={product} onAddReview={(review) => addReview(product.id, review)} />
          {/* Виведення відгуків для конкретного продукту */}
          {(reviews[product.id] || []).map((review, index) => (
            <Review key={index} review={review} />
          ))}
          {/* Форма для додавання нового відгуку */}
          <ReviewForm onSubmit={(review) => addReview(product.id, review)} />
        </div>
      ))}
    </div>
  );
};

export default App;
Файл Product.js
Product.js
// src/components/Product.js
import React from 'react';

 

const Product = ({ product, onAddReview }) => {
  return (
    <div>
      {/* Виведення назви продукту */}
      <h2>{product.name}</h2>
      {/* Кнопка для додавання нового відгуку для продукту */}
      <button onClick={() => onAddReview(product)}>Додати відгук</button>
    </div>
  );
};

 

export default Product;
Файл Review.js
Review.js
// src/components/Review.js
import React from 'react';

 

const Review = ({ review }) => {
  return (
    <div>
      {/* Виведення назви продукту, що має відгук */}
      <h3>{review.product}</h3>
      {/* Виведення коментаря до відгуку */}
      <p>{review.comment}</p>
      {/* Виведення рейтингу відгуку */}
      <p>Рейтинг: {review.rating}</p>
    </div>
  );
};

 

export default Review;
Файл ReviewForm.js
ReviewForm.js
// src/components/ReviewForm.js
import React, { useState } from 'react';
import '../App.css';

 

const ReviewForm = ({ onSubmit }) => {
  // Стан для збереження введених даних форми
  const [product, setProduct] = useState('');
  const [comment, setComment] = useState('');
  const [rating, setRating] = useState('');

 

  // Обробник подання форми
  const handleSubmit = (e) => {
    e.preventDefault();
    // Виклик функції зовнішнього компонента для передачі введених даних
    onSubmit({ product, comment, rating });
    // Скидання значень полів форми після подання
    setProduct('');
    setComment('');
    setRating('');
  };

 

  return (
    <form className="reviewForm" onSubmit={handleSubmit}>
      {/* Поле для введення назви продукту */}
      <label>
        Product:
        <input type="text" value={product} onChange={(e) => setProduct(e.target.value)} />
      </label>
      {/* Поле для введення коментарю */}
      <label>
        Comment:
        <textarea value={comment} onChange={(e) => setComment(e.target.value)} />
      </label>
      {/* Поле для введення рейтингу */}
      <label>
        Rating:
        <input type="number" value={rating} onChange={(e) => setRating(e.target.value)} />
      </label>
      {/* Кнопка для подання відгуку */}
      <button type="submit">Відправити відгук</button>
    </form>
  );
};

 

export default ReviewForm;

Скріншоти усіх файлів в нашому додатку

Завдання 1

Перше завдання зв'язане з вдосконаленням коду, добавляючи валідацію введених даних. 

1. Працюємо в файлі ReviewForm.js.
2. Не дозволяйте появлятись відгукам з пустими полями. 
3. Не дозволяйте виходити рейтингу за межі діапазону.

Завдання 2

Друге завдання зв'язане з вдосконаленням коду, для реалізації вибору зірочок чи сердечок замість числового рейтингу можна використовувати власний компонент оцінки.

1. Створення компонента оцінки (Rating.js): Створіть новий компонент, який буде відповідати за відображення оцінки вибраним елементом, таким як зірочка чи сердечко.
2. Створення стилів для компонента оцінки (Rating.css): Створіть стилі для компонента оцінки, де буде можливість вибору типу оцінки (зірка чи серце) та стилізація для вибраних оцінок
3. Оновлення компонента відгуку (ReviewForm.js): Використовуйте новий компонент Rating у формі відгуку та оновіть стейт для відстеження обраного типу оцінки.
4. Оновіть головний компонент App.js, щоб включити модальне вікно та передавати дані відгуків для відображення у модальному вікні.

Модальне вікно автоматично відкриється при успішному додаванні відгуку і буде містити всі відгуки для поточного продукту.

Завдання 3

Ці зміни дозволяють користувачам обирати між зірочками та серцями для відображення свого вибору у відгуках. У коді використовується новий компонент Rating, який відображається у вигляді обраного типу оцінки та дозволяє користувачеві вибрати кількість оцінок.

ВАЖЛИВО!
Якщо діти виконали усі завдання швидше аніж закінчилось заняття - додайте додаткові завдання:
1. Можливість перегляду усіх відгуків окремо за допомогою кнопки(або приховування)
2. Можливість видалення відгуків
3. Добавити рейтинг під назвою  продукту на основі рейтингу відгуків, щоб усі бачили середній рейтинг

Додаткові завдання

1. Можливість перегляду усіх відгуків окремо за допомогою кнопки(або приховування)
2. Можливість видалення відгуків
3. Добавити рейтинг під назвою  продукту на основі рейтингу відгуків, щоб усі бачили середній рейтинг

Система відповідей на відгуки: Дозвольте користувачам відповідати на відгуки і створювати дискусії навколо певного продукту чи послуги.

Пошук та сортування: Додайте можливість пошуку відгуків за ключовими словами та сортування їх за різними критеріями.

Посилання на пройдені теми

Тема 1. ToDoList
Тема 2. Quiz, Temp
Тема 3. MemoryGame
Тема 4. ProductCatalog
Тема 5. Самостійна
Тема 6. Готовий код
Тема 7. Local Chat App
Тема 8. Review & Ratings

Завдання 1. Обов'язкові поля

Файл ReviewForm.js
ReviewForm.js
// src/components/ReviewForm.js
import React, { useState } from 'react';
import '../App.css';

const ReviewForm = ({ onSubmit }) => {
  // Стан для збереження введених даних форми
  const [product, setProduct] = useState('');
  const [comment, setComment] = useState('');
  const [rating, setRating] = useState('');
  // Стан для збереження помилок валідації форми
  const [errors, setErrors] = useState({});

  // Функція валідації форми
  const validateForm = () => {
    const newErrors = {};

    // Перевірка, чи введено назву продукту
    if (!product.trim()) {
      newErrors.product = 'Назва продукту обов\'язкова';
    }

    // Перевірка, чи введено коментар
    if (!comment.trim()) {
      newErrors.comment = 'Коментар обов\'язковий';
    }

    // Перевірка, чи рейтинг є числом в діапазоні від 1 до 5
    const ratingNumber = parseFloat(rating);
    if (isNaN(ratingNumber) || ratingNumber < 1 || ratingNumber > 5) {
      newErrors.rating = 'Рейтинг повинен бути числом від 1 до 5';
    }

    // Збереження помилок та повернення результату валідації
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // Обробник подання форми
  const handleSubmit = (e) => {
    e.preventDefault();

    // Перевірка валідності форми перед поданням
    if (validateForm()) {
      // Виклик функції зовнішнього компонента для передачі введених даних
      onSubmit({ product, comment, rating });
      // Скидання значень полів та помилок після подання
      setProduct('');
      setComment('');
      setRating('');
      setErrors({});
    }
  };

  return (
    <form className="reviewForm" onSubmit={handleSubmit}>
      {/* Поле для введення назви продукту */}
      <label>
        Product:
        <input type="text" value={product} onChange={(e) => setProduct(e.target.value)} />
        {errors.product && <span className="error">{errors.product}</span>}
      </label>
      {/* Поле для введення коментарю */}
      <label>
        Comment:
        <textarea value={comment} onChange={(e) => setComment(e.target.value)} />
        {errors.comment && <span className="error">{errors.comment}</span>}
      </label>
      {/* Поле для введення рейтингу */}
      <label>
        Rating:
        <input type="number" value={rating} onChange={(e) => setRating(e.target.value)} />
        {errors.rating && <span className="error">{errors.rating}</span>}
      </label>
      {/* Кнопка для подання відгуку */}
      <button type="submit">Подати відгук</button>
    </form>
  );
};

export default ReviewForm;

Для валідації полів введення відгуку та виведення спливаючих повідомлень можна використовувати стейт для збереження помилок та відобразити їх поблизу відповідного поля вводу. Давайте оновимо ReviewForm.js та додамо логіку валідації та відображення повідомлень про помилки
Тепер валідація проводиться перед відправленням відгуку, і помилки відображаються поруч з відповідними полями вводу у вигляді червоних повідомлень про помилки. Замість alert використовується елемент <span> для відображення повідомлень про помилки під кожним полем вводу.

Завдання 2. Добавлення модального вікна

Файл ReviewModal.js
ReviewModal.js
// src/components/ReviewModal.js
import React from 'react';
import './ReviewModal.css';

const ReviewModal = ({ reviews, onCloseModal }) => {
  return (
    <div className="modalOverlay" onClick={onCloseModal}>
      <div className="modalContent" onClick={(e) => e.stopPropagation()}>
        <h2>Reviews</h2>
        {reviews.map((review, index) => (
          <div key={index} className="modalReview">
            <p>{review.product}</p>
            <p>{review.comment}</p>
            <p>Rating: {review.rating}</p>
          </div>
        ))}
        <button onClick={onCloseModal}>Close</button>
      </div>
    </div>
  );
};

export default ReviewModal;
Файл ReviewModal.css
ReviewModal.css
/* src/ReviewModal.css */
.modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .modalContent {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-align: center;
  }
 
  .modalReview {
    margin-bottom: 20px;
  }
 
  .modalReview p {
    margin: 5px 0;
  }
 
  .modalReview p:last-child {
    margin-bottom: 0;
  }
 
  .modalReview button {
    background-color: #4caf50;
    color: #fff;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
  }
 
Файл ReviewForm.js
ReviewForm.js
//src/components/ReviewForm.js
import React, { useState } from 'react';
import '../App.css';
const ReviewForm = ({ onSubmit, onOpenModal }) => {
  // Стан для збереження введених даних форми
  const [product, setProduct] = useState('');
  const [comment, setComment] = useState('');
  const [rating, setRating] = useState('');
  // Стан для збереження помилок валідації форми
  const [errors, setErrors] = useState({});
  const [isModalOpen, setIsModalOpen] = useState(false);
  // Функція валідації форми
  const validateForm = () => {
    const newErrors = {};
    // Перевірка, чи введено назву продукту
    if (!product.trim()) {
      newErrors.product = 'Назва продукту обов\'язкова';
    }
    // Перевірка, чи введено коментар
    if (!comment.trim()) {
      newErrors.comment = 'Коментар обов\'язковий';
    }
    // Перевірка, чи рейтинг є числом в діапазоні від 1 до 5
    const ratingNumber = parseFloat(rating);
    if (isNaN(ratingNumber) || ratingNumber < 1 || ratingNumber > 5) {
      newErrors.rating = 'Рейтинг повинен бути числом від 1 до 5';
    }
    // Збереження помилок та повернення результату валідації
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  // Обробник подання форми
  const handleSubmit = (e) => {
    e.preventDefault();
    // Перевірка валідності форми перед поданням
    if (validateForm()) {
      // Виклик функції зовнішнього компонента для передачі введених даних
      onSubmit({ product, comment, rating });
      // Скидання значень полів та помилок після подання
      setProduct('');
      setComment('');
      setRating('');
      setErrors({});
      onOpenModal(); // Викликати функцію для відкриття модального вікна
    }
  };
  return (
    <form className="reviewForm" onSubmit={handleSubmit}>
      {/* Поле для введення назви продукту */}
      <label>
        Product:
        <input type="text" value={product} onChange={(e) => setProduct(e.target.value)} />
        {errors.product && <span className="error">{errors.product}</span>}
      </label>
      {/* Поле для введення коментарю */}
      <label>
        Comment:
        <textarea value={comment} onChange={(e) => setComment(e.target.value)} />
        {errors.comment && <span className="error">{errors.comment}</span>}
      </label>
      {/* Поле для введення рейтингу */}
      <label>
        Rating:
        <input type="number" value={rating} onChange={(e) => setRating(e.target.value)} />
        {errors.rating && <span className="error">{errors.rating}</span>}
      </label>
      {/* Кнопка для подання відгуку */}
      <button type="submit">Подати відгук</button>
    </form>
  );
};
export default ReviewForm;
Файл App.js
App.js

// src/App.js
import React, { useState } from 'react';
import './App.css';
import Product from './components/Product';
import Review from './components/Review';
import ReviewForm from './components/ReviewForm';
import ReviewModal from './components/ReviewModal';

const App = () => {
const [reviews, setReviews] = useState({});
const [isModalOpen, setIsModalOpen] = useState(false);

const addReview = (productId, newReview) => {
setReviews({
...reviews,
[productId]: [...(reviews[productId] || []), newReview],
});
};

const openModal = () => {
setIsModalOpen(true);
};

const closeModal = () => {
setIsModalOpen(false);
};

const products = [
{ id: 1, name: 'Product A' },
{ id: 2, name: 'Product B' },
// Add more products as needed
];

return (
<div className="container">
<h1>Review Platform</h1>
{products.map((product) => (
<div key={product.id} className="product">
<Product product={product} onAddReview={(review) => addReview(product.id, review)} />
{(reviews[product.id] || []).map((review, index) => (
<Review key={index} review={review} />
))}
<ReviewForm onSubmit={(review) => addReview(product.id, review)} onOpenModal={openModal} />
</div>
))}
{isModalOpen && (
<ReviewModal reviews={reviews[1] || []} onCloseModal={closeModal} />
{/* Опціонально, використовуйте Reviews для поточного продукту */}
)}
</div>
);
};

export default App;

Оновлення ReviewForm.js: Додайте стейт для відстеження того, чи відгук має бути показаний у модальному вікні, і функції для відкриття та закриття модального вікна.
Створення нового компонента ReviewModal.js: Створіть новий компонент для модального вікна, яке буде відображати відгуки.
Оновлення App.js: Оновіть головний компонент App.js, щоб включити модальне вікно та передавати дані відгуків для відображення у модальному вікні.
Створення стилів для модального вікна ReviewModal.css: Створіть стилі для модального вікна.

Завдання 3. Заміна оцінки рейтингу

Файл Rating.js
Rating.js
// src/components/Rating.js
import React from 'react';
import './Rating.css';

const Rating = ({ type, selected, onClick }) => {
  const icons = {
    star: '⭐️',
    heart: '❤️',
  };

  return (
    <span className={`ratingIcon ${type} ${selected ? 'selected' : ''}`} onClick={onClick}>
      {icons[type]}
    </span>
  );
};

export default Rating;
Файл Rating.css
Rating.css
/* src/Rating.css */
.ratingIcon {
    cursor: pointer;
    font-size: 24px;
    margin-right: 5px;
  }
 
  .ratingIcon.selected {
    color: #ff6363; /* Колір для вибраних оцінок */
  }
 
Файл ReviewForm.js
ReviewForm.js
// src/components/ReviewForm.js
import React, { useState } from 'react';
import Rating from './Rating';
import '../App.css';

const ReviewForm = ({ onSubmit, onOpenModal }) => {
  const [product, setProduct] = useState('');
  const [comment, setComment] = useState('');
  const [ratingType, setRatingType] = useState('star');
  const [selectedRating, setSelectedRating] = useState(null);
  const [errors, setErrors] = useState({});
  const [isModalOpen, setIsModalOpen] = useState(false);

  const validateForm = () => {
    const newErrors = {};

    if (!product.trim()) {
      newErrors.product = 'Product name is required';
    }

    if (!comment.trim()) {
      newErrors.comment = 'Comment is required';
    }

    if (selectedRating === null) {
      newErrors.rating = 'Rating is required';
    }

    setErrors(newErrors);

    return Object.keys(newErrors).length === 0;
  };

  const handleRatingClick = (type) => {
    setRatingType(type);
  };

  const handleStarClick = (index) => {
    setSelectedRating(index + 1);
  };

  const getRatingText = () => {
    if (ratingType === 'star') {
      return `${selectedRating} ⭐️`;
    } else if (ratingType === 'heart') {
      return `${selectedRating} ❤️`;
    }
    return '';
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    if (validateForm()) {
      onSubmit({ product, comment, rating: getRatingText(), ratingType });
      setProduct('');
      setComment('');
      setSelectedRating(null);
      setErrors({});
      onOpenModal();
    }
  };

  return (
    <form className="reviewForm" onSubmit={handleSubmit}>
      <label>
        Product:
        <input type="text" value={product} onChange={(e) => setProduct(e.target.value)} />
        {errors.product && <span className="error">{errors.product}</span>}
      </label>
      <label>
        Comment:
        <textarea value={comment} onChange={(e) => setComment(e.target.value)} />
        {errors.comment && <span className="error">{errors.comment}</span>}
      </label>
      <label>
        Rating:
        {[...Array(5)].map((_, index) => (
          <Rating
            key={index}
            type={ratingType}
            selected={selectedRating !== null && index < selectedRating}
            onClick={() => handleStarClick(index)}
          />
        ))}
        {errors.rating && <span className="error">{errors.rating}</span>}
      </label>
      <div className="ratingTypeSelector">
        <span>Rating Type:</span>
        <Rating type="star" selected={ratingType === 'star'} onClick={() => handleRatingClick('star')} />
        <Rating type="heart" selected={ratingType === 'heart'} onClick={() => handleRatingClick('heart')} />
      </div>
      <button type="submit">Submit Review</button>
    </form>
  );
};

export default ReviewForm;

Ці зміни дозволяють користувачам обирати між зірочками та серцями для відображення свого вибору у відгуках. У коді використовується новий компонент Rating, який відображається у вигляді обраного типу оцінки та дозволяє користувачеві вибрати кількість оцінок.

ВАЖЛИВО!
Якщо діти виконали усі завдання швидше аніж закінчилось заняття - додайте додаткові завдання:
1. Можливість перегляду усіх відгуків окремо за допомогою кнопки(або приховування)
2. Можливість видалення відгуків
3. Добавити рейтинг під назвою  продукту на основі рейтингу відгуків, щоб усі бачили середній рейтинг

Copyright © 2023 Courses WebSkill | Powered by WebSkill
Scroll to Top