React.js – Тема 8 – Courses WebSkill

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

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

Новий додаток
Форматування
Файли та папки

Створення 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

/* 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

// 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;

// 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. Можливість перегляду усіх відгуків окремо за допомогою кнопки(або приховування)
2. Можливість видалення відгуків
3. Добавити рейтинг під назвою продукту на основі рейтингу відгуків, щоб усі бачили середній рейтинг

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

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

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