После установки React, он может гибко применяться для различных проектов. Вы можете создать как новые приложение с ним, так и интегрировать его в существующий код без переписывания проекта.
Попробовать React
Вы можете попробовать работать с React, используя CodePen (там есть быстрые ссылки для подключения библиотеки). Попробуйте код this Hello World example code. Вам не нужно ничего устанавливать, просто меняйте код и знакомьтесь с тем как это работает.
Если вы предпочитаете работать со своим текстовым редактором, то можно загрузить этот HTML файл, редактировать их в локальной файловой системе в своём браузере. Это замедляет разработку, потому не используйте такой подход в продакшене.
Создание одностраничного (Single Page) приложения
Create React App — лучший путь, с которого начинается построение нового одностраничного приложения на React. Код устанавливает среду разработки, так что можно будет использовать новые функции JavaScript, обеспечить хороший опыт для разработчиков, и оптимизировать приложение для работы. .
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Создание Реагировать App не обрабатывает серверной логики или баз данных; он просто создает сборки трубопровода во внешнем интерфейсе, так что вы можете использовать его с любым бэкэндом вы хотите. Он использует WebPack, Бабель и ESLint под капотом, но настраивает их для вас..
Добавление React к существующему приложению
Начиная работать с React, вы можете не переписывать своё приложение.
Рекомендуется добавлять React маленькими кусочками в ваше приложение, подобно отдельным виджетам, чтобы можно было видеть насколько хорошо они работают (Примечание http://htmllab.ru: на курсах HTML таким же способом рекомендую знакомиться с PHP).
Пока React может применяться без сборок, мы рекомендуем установить их, чтобы быть более продуктивными. Современные сборочные системы содержат::
- Менеджер пакетов (package manager), такие как Yarn или npm. Они позволяют воспользоваться обширной экосистемой сторонних пакетов; легко устанавливать или обновлять их.
- Упаковщик (bundler), такой как webpack или Browserify. Это позволит писать модульный код и связывать его вместе в небольшие пакеты для оптимизации времени загрузки.
- Компилятор (compiler) такой как Babel. Он позволяет писать современный JavaScript-код , который до сих пор работает в старых браузерах.
Процесс установки React
Рекомендуется использовать Yarn или npm для управления зависимостями на фронт-энде. Если у вас уже есть новый пакетный менеджер Yarn documentation — это хорошее вариант для старта.
Для установки React через Yarn, запустите:
yarn add react react-dom
Для установки React через npm, запустите:
npm install --save react react-dom
И Yarn, и npm загружают пакеты с npm registry.
Поддержка ES6 и JSX
Рекомендуется использовать React с Babel для использования ES6 и JSX в вашем JavaScript коде. ES6 — это новые возможности JavaScript, облегчающие жизнь разработчика, а JSX — расширение языка JavaScript language которое работает только с React.
Инструкции по установке Babel объясняют как сконфигурировать Babel в большинстве случаев для разных окружений. Убедитесь, что установлен babel-preset-react и babel-preset-es2015 и они включены .babelrc configuration, в этому случае можно продолжать.
Привет, Мир! (Hello World) с ES6 и JSX
Рекомендуется использовать упаковщики подобные webpack или Browserify, так вы сможете писать свой код модульно, оптимизируя время загрузки.
Крошечный пример на React выглядит так:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Этот код отрисовываеся/отражается (renderes) в DOM элемента с идентификатором root, потому нужен <div id="root"></div> в существующем HTML файле.
Кроме того, вы можете отрисовывать React компонент внутри DOM элемента существующего приложения, написанного любой другой библиотекой JavaScript UI.
Разработка и выпуск версий
По умолчанию, React включает много полезных предупреждений. Эти предупреждения очень удобны при разработке. Однако, они делают React бОльше и медленней, потому надо подумать прежде чем решить использовать их на рабочем варианте.
Создание React приложения
Если используете Create React App, npm run build будет создавать оптимизированные сборки вашего приложения в папке build.
Webpack
Включает в себя DefinePlugin и UglifyJsPlugin в рабочем варианте конфигурации Webpack как описано в этом руководстве.
Browserify
Запустите Browserify с переменной окружения NODE_ENV установленной в production и используйте UglifyJS как последний шаг разработки.
Использование CDN
Если вы не хотите использовать npm для управления клиентскими пакетами, react и react-dom npm пакеты поставляются в виде простого файла в папке 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.