Разработка на React. Установка
Человека связанного с современным фронтендом, чаще всего, отпугивает не сложность фреймворка, а сложность его конфигурации. К счастью, в мире React все не так страшно, как кажется. В этой части рассмотрим несколько путей быстрой инициализации минимального React-приложения.
React-зависимости
React – является обычной js-библиотекой, которую возможно подключить через тег <script>.
Для старта react-приложения на html-странице необходимо скачать два файла react и react-dom. Еще есть вариант использовать CDN, либо установить через пакетный менеджер NPM или Yarn.
<!-- использование CDN -->
<script src="https://unpkg.com/react@{версия react}/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@{версия react}/dist/react-dom.js"></script>
Заменить {версия react} на нужную (либо новейшую) версию React. Нужно учесть, что библиотека была разбита на два файла после выхода 14 версии.
npm install --save react react-dom
yarn add react react-dom
React.js
Файл react.js является ядром React, он необходим для создания React-элементов и компонентов.
При импорте через тег <script> API React будет доступен глобально. Средствами ES5 и ES6 можно импортировать иным способом:
// ES5
var ReactDOM = require('react')
// ES6
import ReactDOM from 'react'
React-dom.js
Для рендеринга компонентов в HTML (т.е. в DOM) требуется react-dom.js. Он также зависит от файла react.js.
Чтобы не перегружать статью по установке React, описание работы виртуального DOM будут представлены в отдельной статье. А пока перейдем к созданию минимального HTML шаблона React-приложения.
Также как и файл react.js импортируя через тег <script> доступен глобально и имеются другие способы импортирования:
// ES5
var ReactDOM = require('react-dom')
// ES6
import ReactDOM from 'react-dom'
Минимальный HTML шаблон
Быстрый способ познакомиться с данной библиотекой – это подключить ее к пустому HTML файлу. Подключим эти файлы в html одним из вышеуказанных способов.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React App</title>
<script src="./scripts/react.development.js"></script>
<script src="./scripts/react-dom.development.js"></script>
<script src="./scripts/app.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Необходимо создать div с идентификатором, по которому будет происходить биндинг всего приложения, обычно это идентификатор ‘root’.
Далее создадим файл app.js и добавим следующий код, который, при помощи React выведет сообщение «First React App».
// app.js
ReactDOM.render(
React.createElement('h1', null, 'First React App'),
document.getElementById('root')
);
ReactDOM.reander принимает два параметра, первый принимает React-компонент, во второй передается корневой элемент для рендеринга.
Таким образом мы можем внедрить React в приложение, написанное на любом другом фреймворке.
Создание одностраничного React-приложения
Create React App
Create React App - это один из лучших способов быстро создать минимальное одностраничное приложение на React. Он позволяет создавать уже сконфигурированные и готовые к разработке React-приложения. И лишь в дальнейшем корректировать конфигурации (Webpack, Babel, TSLint и т.д.) по мере необходимости, а не писать их с “нуля”. Этим инструментом пользуются как новички, так и профессионалы.
Для того, чтобы начать использовать create-react-app его необходимо установить.
npm install -g create-react-app
После установки перейдите в нужную директорию для инициализации нового проекта приложения и выполните следующие команды:
create-react-app hello-world
cd hello-world
npm start
Starter kits
На официальном сайте имеется список всевозможных бойлерплейтов с React. Требующие лишь клонирование репозитория и установки пакетов. reactjs.org/community/starter-kits
Онлайн сервисы
Несомненно, онлайн среды разработки очень удобны, так как можно работать с кодом имея под рукой лишь браузер. Также, можно с легкостью делиться или одновременно работать с этим кодом.
CodePen
See the Pen RMPgKy by Zverit (@Zverit) on CodePen.
JSFiddle
CodeSandbox
CodeSandbox - онлайн редактор кода с упором на React. Редактор который умеет автоматизировать такие вещи как транспайлинг, пакетирование и управление зависимостями.
Резюме
Были рассмотрены основные способы для создания React-приложения “на горячую”. Наличие широкого выбора способов и инструментов для старта, позволяет преодолеть психологический барьер страха конфигурации приложения и приступить к разработке здесь и сейчас.
Приложения с более сложной конфигурацией будут представлены в следующих публикациях.
Удачного старта!