React - это библиотека для создания динамических HTML-представлений с использованием Javascript. Create React App - отличный способ начать использовать React с минимальной конфигурацией. В этом уроке я буду создавать симулятор броска костей с помощью приложения Create React.

Для начала убедитесь, что у вас установлен Node.

Ссылка на установку узла

После установки узла выберите свой project-name, откройте командную строку и введите:

npx create-react-app project-name

это создаст основные файлы для вашего проекта

Начальная настройка

Папка вашего проекта должна выглядеть так:

Приложение Create React создает множество файлов для настройки. Поскольку нам нужна только базовая настройка, мы можем удалить следующие файлы:

  • App.test.js
  • index.css
  • logo.svg
  • serviceWorker.js

Поскольку мы удалили файлы, которые были импортированы в index.js и App.js, мы очистим эти файлы, заменив их следующим кодом

In index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

In App.js

import React, { Component } from "react";
import "./App.css";
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Dice Roll Demo</h1>
      </div>
    );
  }
}
export default App;

Теперь мы можем просмотреть приложение в нашем браузере, набрав:

npm start

Приложение

Приложение, которое мы создаем, будет:

  1. позволить пользователю бросить от 1 до 5 кубиков
  2. отображать результаты с помощью изображений в кости
  3. показать сумму бросков.

1. Разрешите пользователю бросить от 1 до 5 кубиков.

Мы будем использовать React для хранения следующих данных в состоянии компонента:

  • numberOfDice: количество выбранных игральных костей
  • rolls: результаты (бросок) каждого кубика
  • rollSum: сумма бросков

Мы можем сохранить все эти данные с помощью одной функции diceRoll, которая принимает число от 1 до 5 в качестве аргумента. А пока просто посмотрите на функцию diceRoll, мы добавим код в следующий блок кода.

diceRoll = numberOfDice => {
  let rolls = [];
  let rollSum = 0;
  for (let i = 0; i < numberOfDice; i++) {
    rolls[i] = Math.floor(Math.random() * 6) + 1;
    rollSum += rolls[i];
  }
};

Сначала мы инициализируем пустой массив для rolls (результатов) и устанавливаем rollSum в 0. Поскольку функция имеет число от 1 до 5 в качестве аргумента, мы можем перебрать это число. На каждой итерации цикла мы можем сохранить случайное целое число от 1 до 6 в массив rolls и добавить его к переменной rollSum.

Эта функция написана исключительно на javascript, но нам нужен React для хранения наших данных, чтобы мы могли отображать их пользователю. Мы будем использовать метод setState для хранения наших переменных numberOfDice, rolls и rollSum в состоянии компонента.

Чтобы добавить эту функциональность, добавьте следующий код в App.js внутри класса App и над методом рендеринга.

state = {
  numberOfDice: null,
  rolls: [],
  rollSum: null
};
diceRoll = numberOfDice => {
  let rolls = [];
  let rollSum = 0;
  for (let i = 0; i < numberOfDice; i++) {
    rolls[i] = Math.floor(Math.random() * 6) + 1;
    rollSum += rolls[i];
  }
  this.setState({
    numberOfDice,
    rolls,
    rollSum
  });
};

Теперь, когда функциональность настроена, нам нужен способ запуска функции diceRoll. Далее мы подключим 5 разных кнопок, по одной для каждой numberOfDice опции.

React позволяет нам отображать массивы и возвращать JSX (HTML, созданный с помощью javascript) в нашем компоненте. Мы сопоставим целые числа 1–5 и создадим кнопки, которые запускают метод diceRoll, передавая количество кубиков для текста кнопки. Добавьте следующий код под заголовком в App.js

<div className="buttons">
  {[1, 2, 3, 4, 5].map(number => {
    let text = number === 1 ? "die" : "dice";
    return (
      <button
        key={number}
        onClick={() => this.diceRoll(number)}
        className="button"
      >
        {number} {text}
      </button>
    );
  })}
</div>

В этом коде для каждого числа в массиве map возвращает кнопку с key (уникальный идентификатор для React), функцию onClick, вызывающую diceRoll с number, переданным в качестве аргумента, number из массива и метку text, поэтому что наше приложение не говорит «1 кубик».

Теперь мы можем протестировать наше приложение, запустив его в браузере с помощью npm start.

На этом этапе используется React Devtools, поэтому, если он у вас не установлен, перейдите сюда:

React Devtools

После установки Devtools откройте инструменты разработчика вашего браузера (f12 для chrome) и перейдите на вкладку React.

Когда вы нажимаете одну из кнопок, ваш браузер должен выглядеть примерно так.

2. Отобразите результаты с помощью изображений в кости.

Теперь, когда у нас есть наша логика броска костей, работающая с использованием кнопок и наши результаты, сохраненные в состоянии, мы можем рендерить разные изображения в зависимости от того, какой был бросок.

Для этого я создал папку с именем assets в каталоге src и добавил 6 файлов изображений (по одному для каждого результата). Чтобы скачать изображения, запустите размещенное приложение и скопируйте их в свою папку.

Чтобы импортировать файлы изображений, добавьте следующий код вверху App.js

import one from "./assets/one.png";
import two from "./assets/two.png";
import three from "./assets/three.png";
import four from "./assets/four.png";
import five from "./assets/five.png";
import six from "./assets/six.png";

Убедитесь, что имена папок и файлов совпадают, и тогда мы сможем работать над их отображением на странице.

Теперь нам нужно связать каждый файл изображения с номером 1–6. Один из способов сделать это - создать отдельный компонент, который будет получать number в качестве реквизита и соответственно рендерить изображение для этого числа. Добавьте следующий код под компонентом App в App.js

const DiceImage = ({ roll }) => {
  if (roll === 1) {
    return <img className="dice-image" src={one} alt="1" />;
  } else if (roll === 2) {
    return <img className="dice-image" src={two} alt="2" />;
  } else if (roll === 3) {
    return <img className="dice-image" src={three} alt="3" />;
  } else if (roll === 4) {
    return <img className="dice-image" src={four} alt="4" />;
  } else if (roll === 5) {
    return <img className="dice-image" src={five} alt="5" />;
  } else if (roll === 6) {
    return <img className="dice-image" src={six} alt="6" />;
  }
};

Здесь у нас есть функциональный компонент без состояния, называемый DiceImage, который получает свойство roll и проверяет, каждое ли оно имеет значение 1-6. Компонент возвращает изображение (JSX), которое может быть отображено в компоненте App.

В нашем App.js файле под div с className=buttons добавьте следующее:

{
  this.state.rolls.map((roll, index) => <DiceImage roll={roll} key={index} />);
}

Мы сопоставляем наш rolls массив с DiceImage компонентами, которые имеют значение roll и уникальный key, переданный в качестве свойств.

Показать сумму бросков

Наконец, нам нужно отобразить сумму рулонов, которые мы сохранили в this.state.rollSum. Мы также можем отобразить общий возможный бросок с учетом количества игральных костей. Добавьте следующий код под изображения игральных костей в компоненте App в App.js

{
  this.state.numberOfDice ? (
    <h2>
      Roll Total: <span className="sum">{this.state.rollSum}</span> /{" "}
      {this.state.numberOfDice * 6}
    </h2>
  ) : null;
}

В этот код я включаю тернарный оператор, чтобы h2 отображался только в том случае, если this.state.numberOfDice не равно нулю. Когда пользователь нажимает кнопку, numberOfDice переключается со значения по умолчанию null на число 1-5. Каждая сторона двоеточия выше представляет JSX, который нужно вернуть, если условие равно true или false. Если количество кубиков null, мы не хотим ничего отображать.

3. Стилизация приложения.

Теперь, когда у нас есть встроенная функциональность приложения для игры в кости, мы можем добавить CSS в проект. Вот несколько основных стилей, которые я создал, вы можете создавать свои собственные или изменять свои.

.App {
  text-align: center;
  border: 1px solid grey;
  background-color: rgb(250, 250, 250);
  margin: auto;
  width: 1000px;
  height: 450px;
  margin-top: 50px;
}
.buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
}
.button {
  background-color: rgb(27, 136, 27);
  border: 2px solid black;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
  margin-right: 10px;
}
.dice-image {
  margin: 10px;
}
.sum {
  font-size: 48px;
}

Развернуть на Github Pages

Теперь, когда у нас есть работающее приложение, мы можем отправить его на Github и развернуть на Github Pages. Первое, что нужно сделать, это убедиться, что у вас есть учетная запись Github и git на вашем компьютере.

Перед развертыванием приложения убедитесь, что в браузере все работает и все файлы сохранены.

Создать репозиторий

Войдите в Github и создайте новый репозиторий для своего приложения. Github предоставит вам ссылку на ваш репозиторий при его создании. Скопируйте эту ссылку.

Перенести проект в Github

Затем введите следующие команды, чтобы зафиксировать проект:

git init  
// creates a new git repository
git add .  
adds changed files to staged changes
git commit -m "initial commit"  
commits staged changes

Затем подключите репозиторий git к Github, вставив пульт с помощью следующей команды:

git remote add origin https://github.com/peterdurham/dice-roll-demo.git  
// adds remote repository
// replace my remote with your own
git push origin master  
// pushes your project to the master branch on Github

Настроить страницы Github

Далее в папке проекта запускаем команду:

yarn add gh-pages  
// installs Github Pages package

В файле package.json добавьте следующую строку над строкой зависимостей, заменив user-name и repo-name своим именем github и именами репо.

"homepage": "https://user-name.github.io/repo-name/",

Также добавьте следующие 2 строки в список скриптов в package.json

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Это сообщает Github Pages, как настроить ваш проект.

Наконец, выполните следующую команду, чтобы опубликовать приложение React:

yarn run deploy

Поздравляем, вы только что создали и развернули простое приложение React с помощью create-react-app и Github Pages !!!