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

Тема 13. React.js Polling App

Створення Polling App

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

Створення 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.js та іншими файлами

Інформація

Короткий опис: Цей код створює простий додаток для створення опитувань за допомогою React.js. Користувач може створювати опитування та добавляти варіанти голосування за допомогою кнопок.
1. Добавити новий компонент PollingApp.j одразу підключіть та виведіть їх в App.js
2. Нижче код кожного із файлів, вставте цей код у свої створені файли.

import React, { useState } from 'react';

import './App.css'; // імпортуємо файл зі стилями

function PollingApp() {

const [polls, setPolls] = useState([]);

const [newPoll, setNewPoll] = useState({ title: '', options: [] });

const [newOptionText, setNewOptionText] = useState('');

const handleNewPollTitleChange = (event) => {

setNewPoll({ ...newPoll, title: event.target.value });

};

const handleNewOptionTextChange = (event) => {

setNewOptionText(event.target.value);

};

const handleAddNewOption = () => {

if (newOptionText.trim() !== '') {

setNewPoll({

...newPoll,

options: [...newPoll.options, { text: newOptionText, votes: 0 }],

});

setNewOptionText('');

}

};

const handleCreateNewPoll = () => {

if (newPoll.title.trim() !== '' && newPoll.options.length > 0) {

setPolls([...polls, newPoll]);

setNewPoll({ title: '', options: [] });

}

};

const handleOptionVote = (pollIndex, optionIndex) => {

const updatedPolls = [...polls];

updatedPolls[pollIndex].options[optionIndex].votes++;

setPolls(updatedPolls);

};

const Poll = ({ poll, pollIndex }) => (

<h3>{poll.title}</h3>

<ul>

{poll.options.map((option, optionIndex) => (

<span>{option.text} - {option.votes} votes</span>

<button onClick={() => handleOptionVote(pollIndex, optionIndex)}>Vote</button>

</li>

))}

</ul>

</div>

);

return (

<h1>Polling App</h1>

<h2>Create a New Poll</h2>

<input

type="text"

placeholder="Enter Poll Title"

value={newPoll.title}

onChange={handleNewPollTitleChange}

<input

type="text"

placeholder="Enter Option"

value={newOptionText}

onChange={handleNewOptionTextChange}

<button onClick={handleAddNewOption}>Add Option</button>

<button onClick={handleCreateNewPoll}>Create Poll</button>

</div>

{newPoll.options.length > 0 && (

<h3>New Poll Options</h3>

<ul>

{newPoll.options.map((option, index) => (

<li key={index}>{option.text}</li>

))}

</ul>

</div>

)}

</div>

<h2>Polls</h2>

{polls.map((poll, index) => (

))}

</div>

);

}

export default PollingApp;

import React, { useState } from 'react';
import './App.css'; // імпортуємо файл зі стилями

function PollingApp() {
  const [polls, setPolls] = useState([]);
  const [newPoll, setNewPoll] = useState({ title: '', options: [] });
  const [newOptionText, setNewOptionText] = useState('');

const handleNewPollTitleChange = (event) => {
    setNewPoll({ ...newPoll, title: event.target.value });
  };

const handleNewOptionTextChange = (event) => {
    setNewOptionText(event.target.value);
  };

const handleCreateNewPoll = () => {
    if (newPoll.title.trim() !== '' && newPoll.options.length > 0) {
      setPolls([...polls, newPoll]);
      setNewPoll({ title: '', options: [] });
    }
  };

const handleOptionVote = (pollIndex, optionIndex) => {
    const updatedPolls = [...polls];
    updatedPolls[pollIndex].options[optionIndex].votes++;
    setPolls(updatedPolls);
  };

const Poll = ({ poll, pollIndex }) => (
    <div key={pollIndex} className="poll-sticker">
      <h3>{poll.title}</h3>
      <ul>
        {poll.options.map((option, optionIndex) => (
          <li key={optionIndex} className="poll-option">
            <span>{option.text} - {option.votes} votes</span>
            <button onClick={() => handleOptionVote(pollIndex, optionIndex)}>Vote</button>
          </li>
        ))}
      </ul>
    </div>
  );

return (
    <div className="polling-app">
      <h1>Polling App</h1>
      <div className="new-poll">
        <h2>Create a New Poll</h2>
        <input
          type="text"
          placeholder="Enter Poll Title"
          value={newPoll.title}
          onChange={handleNewPollTitleChange}
        />
        <div className="new-option">
          <input
            type="text"
            placeholder="Enter Option"
            value={newOptionText}
            onChange={handleNewOptionTextChange}
          />
          <button onClick={handleAddNewOption}>Add Option</button>
          <button onClick={handleCreateNewPoll}>Create Poll</button>
        </div>
        
        {newPoll.options.length > 0 && (
          <div className="new-poll-options">
            <h3>New Poll Options</h3>
            <ul>
              {newPoll.options.map((option, index) => (
                <li key={index}>{option.text}</li>
              ))}
            </ul>
          </div>
        )}
      </div>

<div className="polls">
        <h2>Polls</h2>
        {polls.map((poll, index) => (
          <Poll key={index} poll={poll} pollIndex={index} />
        ))}
      </div>
    </div>
  );
}

export default PollingApp;

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

.polling-app {
  background: linear-gradient(to bottom right, #f2f6fb, #d3e0f4);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.poll-sticker {
  background: linear-gradient(to bottom right, #e3e6e8, #bfc2c5);
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 8px;
  display: inline-block;
  width: 300px; /* Фіксована ширина для стікера опитування */
  height: auto; /* Автоматична висота */
}

.poll-option {
  margin-top: 10px;
}

.new-poll {
  background: linear-gradient(to bottom right, #e3e6e8, #bfc2c5);
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  display: inline-block;
}

.new-option {
  margin-top: 10px;
}

.new-poll-options {
  background: linear-gradient(to bottom right, #e3e6e8, #bfc2c5);
  padding: 20px;
  border-radius: 8px;
}

.polling-app h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

.polling-app h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.polling-app h3 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

input[type="text"] {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 30px;
  margin: 5px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

Інформація

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

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

Створення Polling App

Завдання 1

Інформація

Редагування та видалення опитувань: Додайте можливість редагувати та видаляти існуючі опитування.

Завдання 2

Інформація

Валідація введених даних: Додайте валідацію для перевірки коректності введених даних, наприклад, перевірку на те, чи введено назву опитування та опції перед їх додаванням.

Завдання 3

Інформація

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

Завдання 4

Інформація
Підказка

Міжнародна підтримка: Додайте можливість вибору мови для інтерфейсу користувача, щоб ваш додаток був доступним для користувачів з різних країн.

Ось кроки, які потрібно виконати:

Встановіть бібліотеку react-i18next:

Відкрийте термінал у вашому проекті і виконайте команду:
npm install i18next react-i18next

Створіть файли з перекладами:

Створіть теку з назвою locales у кореневій директорії вашого проекту. У цій текі створіть файли з перекладами для кожної мови, яку ви хочете підтримувати. Наприклад, для англійської мови створіть файл en.json, а для української мови - uk.json. У цих файлах визначте переклади для кожного тексту, який ви використовуєте у вашому додатку.
Приклад вмісту en.json:
{ "polling_app.title": "Polling App", "polling_app.create_poll": "Create a New Poll", "polling_app.enter_poll_title": "Enter Poll Title", "polling_app.enter_option": "Enter Option", "polling_app.add_option": "Add Option", "polling_app.create_poll_btn": "Create Poll", "polling_app.new_poll_options": "New Poll Options", "polling_app.polls": "Polls", "polling_app.edit": "Edit", "polling_app.delete": "Delete", "polling_app.vote": "Vote" }

Додайте компонент для вибору мови:

Створіть компонент, який дозволить користувачам вибирати мову. Наприклад, це може бути селектор мови у заголовку або в меню вашого додатку.

Використайте react-i18next для перекладу текстів:

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

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

Завдання 1
Завдання 2
Завдання 3
Завдання 4
Завдання 5

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

Графіки та діаграми: Візуалізуйте результати опитувань за допомогою графіків та діаграм, щоб зробити їх більш зрозумілими.

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

Опитування зі зворотним відліком: Дозвольте створювати опитування, які будуть активними лише протягом певного часу або до досягнення певної кількості голосів.

Інтерактивні елементи: Додайте інтерактивні елементи, такі як перетягування варіантів опитування для зміни їх порядку або відсоткові показники голосів на живому графіку.

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

Тема 13. React.js Polling App

Створення Polling App

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

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

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

Створення Polling App

Завдання 1

Завдання 2

Завдання 3

Завдання 4

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

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