Установка
React довольно гибок, что позволяет использовать его в самых различных проектах. С его помощью можно создавать новые приложения, но также можно ничего не переписывая вписать его в уже существующий код.
Знакомство с React
Если вы хотите просто ознакомиться с React, вы можете использовать CodePen. Попробуйте начать с традиционного Привет, мир. Вам не нужно ничего устанавливать; вы можете просто изменить код и посмотреть как он будет работать.
Если вы предпочитаете использовать свой собственный текстовый редактор, вы можете скачать этот HTML файл, отредактировать и открыть его из локальной файловой системы в адресной строке браузера. Это запустит медленную трансформацию кода, поэтому старайтесь не использовать такой метод при разработках.
Создание одностраничного приложения
Create React App - это лучший способ начать создание нового одностраничного приложения на React. Он предоставляет вам необходимую среду для разработки приложений, так что вы сможете использовать новые функции JavaScript и получите возможность оптимизировать ваше приложение.
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Create React App не привязан к бекенду или базам данных, он просто создает фронтенд, с которым вы можете работать с любым бекендом. В процессе сборки он использует такие расширения, как Webpack, Babel и ESLint, которые предварительно необходимо сконфигурировать.
Добавление React к приложению
Вам не нужно переписывать приложение, чтобы начать использовать React. Мы рекомендуем добавить React на небольшую часть вашего приложения, такого как отдельный виджет, чтобы увидеть как React справляется со своей работой.
В то время как React может быть использован без билд-алгоритмов, лучше их использовать в целях повышения продуктивности. Современный алгоритм обычно состоит из:
- Менеджер пакетов Yarn или npm. Он позволяет пользоваться обширными пакетам третьих лиц, а также с легкостью устанавливать и обновлять их.
- Менеджер для управления зависимостями (бандлер) webpack или Browserify. Это позволяет писать модульный код и связать его вместе в небольшие пакеты для оптимизации времени загрузки.
- Компилятор Babel. Он позволяет писать современный JavaScript-код, работающий в старых браузерах.
Установка React
Мы рекоммендуем использовать Yarn или npm для управления зависимостями.
Для установки React с помощью Yarn наберите в консоли:
yarn add react react-dom
Для установки React с помощью npm наберите в консоли:
npm install --save react react-dom
Активируем ES6 и JSX
Мы рекоммендуем использовать React с Babel, чтобы можно было использовать ES6 и JSX в коде JavaScript. ES6 представляет собой набор современных JavaScript-функций, которые ускоряют и упрощают работу над фронтендом. JSX является расширением языка JavaScript и великолепно работает с React.
В инструкции по установке Babel указано как настроить Babel в различных средах. Убедитесь, что вы установили babel-preset-react и babel-preset-es2015, подключили их в вашем .babelrc и принимайтесь за работу.
"Привет, мир" с ES6 и JSX
Мы рекомендуем использовать упаковщик webpack, или Browserify, чтобы можно было написать модульный код и связать его вместе в небольшие пакеты для оптимизации времени загрузки.
Простейший пример на React выглядит следующим образом:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Привет, мир!</h1>,
document.getElementById('root')
);
Этот код работает с DOM-элементом с идентификатором root
, поэтому строка <div id="root"></div>
должна присутствовать в вашем HTML-файле.
Подобным образом, можно рендерить React-компонент внутри DOM-элемента в уже существующем приложении написанным с любой другой JavaScript UI-библиотекой.
Версии React для разработки и продакшена
По умолчанию, React включает в себя множество полезных предупреждений. Эти предупреждения очень полезны в процессе разработки приложения. Тем не менее, они делают React больше и медлительнее, так что вы должны убедиться в том, что вы используете продакшен-версию при развертывании приложения.
- Create React App
Если вы используете Create React App, то npm run build
создаст оптимизированную сборку вашего приложения в папке build
.
- Webpack
Включите DefinePlugin
и UglifyJsPlugin
в конфигурацию Webpack как описано в этом руководстве.
- Browserify
Запустите Browserify с NODE_ENV
в значении production
и используйте UglifyJS a качестве последнего шага так, чтобы только код «для разработчика» был убран.
Использование CDN
Если вы не хотите управлять клиентским пакетом с помощью npm, то react
и react-dom
пакеты позволяют использовать UMD-распределения в dist папках, которые размещены в CDN:
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
Версии выше предназначены только для разработки, и не подходят для продакшена. Уменьшенные и оптимизированные версия React для продакшена доступны по адресу:
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
Для загрузки требуемой версии react
и react-dom
, замените 15
на нужный номер версии.
Если вы используете Bower, React доступен через пакет react
.