Человека связанного с современным фронтендом, чаще всего, отпугивает не сложность фреймворка, а сложность его конфигурации. К счастью, в мире React все не так страшно, как кажется. В этой части рассмотрим несколько путей быстрой инициализации минимального React-приложения.

React-зависимости

React – является обычной js-библиотекой, которую возможно подключить через тег <script>. Для старта react-приложения на html-странице необходимо скачать два файла react и react-dom. Еще есть вариант использовать CDN, либо установить через пакетный менеджер NPM или Yarn.

<!-- использование CDN -->

<script src="https://unpkg.com/[email protected]{версия react}/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]{версия 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

CodePen

See the Pen RMPgKy by Zverit (@Zverit) on CodePen.

JSFiddle

JSFiddle

CodeSandbox

CodeSandbox - онлайн редактор кода с упором на React. Редактор который умеет автоматизировать такие вещи как транспайлинг, пакетирование и управление зависимостями.

Резюме

Были рассмотрены основные способы для создания React-приложения “на горячую”. Наличие широкого выбора способов и инструментов для старта, позволяет преодолеть психологический барьер страха конфигурации приложения и приступить к разработке здесь и сейчас.

Приложения с более сложной конфигурацией будут представлены в следующих публикациях.

Удачного старта!

Оглавление

  1. Введение
  2. Функциональное программирование
  3. Установка
  4. JSX