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 до 5 кубиков
- отображать результаты с помощью изображений в кости
- показать сумму бросков.
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, поэтому, если он у вас не установлен, перейдите сюда:
После установки 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 !!!