Приветствую посетитель!
Я front-end разработчик и начинающий javascript программист, с немалым опытом создания сайтов на различных платформах. Давно планировал бесплатно изучить React. А что бы разобраться в какой-либо технологии — лучше всего это написать что-то на ней, поэтому решил написать статью на тему изучение React.
Эта статья будет полезна разработчикам, которые уже имеют определенный опыт в JS и верстке и хотели бы написать React приложение, но не знают, как к нему подступиться.

Как пример, давайте начнем изучение React и напишем простое одностраничное приложение, после чего зальем результат на сервер.
Итак, определим скоуп задач:

  1. Создание нового приложения
  2. Добавление React в готовое приложение
  3. Использование ES6 и JSX
  4. Hello World с ES6 и JSX
  5. Разработка и производство
  6. Использование CDN
  7. Пример одностраничного SPA приложения

Создание нового Реакт приложения, изучение React основ#

Перед созданием одностраничного ReactJs приложения давайте немного почитаем и настроим среду разработки.

Подготовка, материалы#

SPA и одностраничное приложение.
Что такое React и отличие от Angular.
Нам понадобятся: Node.js, NPM (менеджер установки пакетов идет в комплекте с Node).

Среда разработки#

Тут целое море продуктов на разный вкус и цвет.
Для разработки малых проектов подойдут все: Sublime, Atom, NotePad++, Visual, WebStorm.
WebStorm — мощная среда разработки рассчитана для средних и больших проектов, но также подходит и для изучение React.

Работа с терминалом (командной строкой)#

В linux есть терминал горячие клавиши как правило CTRL+ALT+T.
В windows — командная строка, предпочитаю Far.

Установка и изучение React#

Перед созданием одностраничного Реакт приложения настроим окружение.
Минусом можно считать сложность старта из-за необходимости конфигурирования babel и webpack. Однако есть способ облегчить себе жизнь для создания приложения с нуля — Create React App. Откройте терминал:

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

Приложение Create React App не обрабатывает логику или базы данных бэкэнд; Он просто создает конвейер для сборки frontend, поэтому вы можете использовать его с любым бэкэнд, который вы хотите. Он использует инструменты построения, такие как Babel и webpack под капотом, но работает с нулевой конфигурацией.
Когда Вы будете готовы к выходу в продакшн запустите терминале npm run build, сборщик подготовит папку build, которую можно скопировать на Ваш FTP.

Добавление React в готовое приложение#

Вам не нужно переписывать свое приложение, чтобы начать использовать Реакт.

Мы рекомендуем добавить Реакт в небольшую часть вашего приложения, например отдельный виджет, чтобы вы могли видеть, хорошо ли он подходит для вашего случая использования.

Хотя во время изучение React можно использовать без конвейера сборки, мы рекомендуем настроить его, чтобы вы могли быть более продуктивными. Проект для создания SPA приложения обычно включает в себя:

  • Менеджер пакетов, например, Yarn или npm. Позволяет использовать сторонние пакеты, легко устанавливать и обновлять их.
  • Пакет, такой как webpack или Browserify. Он позволяет писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.
  • Компилятор, такой как Babel. Он позволяет писать современный JavaScript-код, который работает как в новых, так и в старых браузерах.

Мы рекомендуем использовать npm для управления внешними зависимостями. Если вы новичок в менеджерах пакетов, документация по Yarn — хорошее место для начала работы.

Чтобы установить Реакт with Yarn, запустите:

yarn init
yarn add react react-dom

Чтобы установить React с npm, запустите:

pm init
npm install --save react react-dom

Использование ES6 и JSX#

Мы советуем использование и изучение React вместе с Babel, чтобы вы могли использовать ES6 и JSX в своем JavaScript-коде. ES6 (EcmaScript 6) — это набор современных функций JavaScript, которые упрощают разработку, а JSX является расширением языка JavaScript, который отлично работает с Реакт.

Инструкции по настройке Babel во многих разных средах сборки. Убедитесь, что вы устанавливаете babel-preset-response и babel-preset-es2015 и включаете их в свою конфигурацию .babelrc, и можно двигаться дальше.

Hello World с ES6 и JSX#

При изучение React мы рекомендуем использовать пакет, например webpack или Browserify, чтобы вы могли писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.

Самый маленький пример React выглядит так:

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Этот код превращается в DOM-элемент с идентификатором root, поэтому вам нужно добавить <div id="root"></div> где-нибудь в вашем HTML-файле.

Аналогично, вы можете отобразить компонент Реакт внутри элемента DOM где-то внутри вашего существующего приложения, написанного с помощью любой другой библиотеки JavaScript UI.

Разработка и производство#

По умолчанию ReactJs содержит много полезных предупреждений. Эти предупреждения очень полезны в разработке.
Тем не менее, они делают версию разработки Реакт более крупной и медленной, поэтому вы должны использовать производственную версию при развертывании приложения.
Узнайте, как определить, работает ли ваш сайт в правильной версии Реакт, и как настроить процесс сборки продукта наиболее эффективно:

Использование CDN#

Если вы не хотите использовать npm для управления клиентскими пакетами, react и react-dom npm пакеты также предоставляют однофайловые дистрибутивы в папках dist, которые размещаются на CDN:


<script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Вышеупомянутые версии предназначены только для разработки и не подходят для производства. Разработанные и оптимизированные производственные версии React доступны по адресу:


<script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

Чтобы загрузить определенную версию react и react-dom, замените 15 номер версии на нужную.

Если вы используете Bower, React доступен через react пакет.
Почему атрибут crossorigin?

Если вы используете Реакт из CDN, мы рекомендуем сохранить атрибут crossorigin:

<script crossorigin src="..."></script>

Мы также рекомендуем проверить, что используемый вами CDN устанавливает HTTP-заголовок Access-Control-Allow-Origin: *:

Для загрузки и изучение React нужен HTTP-заголовок Access-Control-Allow-Origin: *

Это позволяет улучшить обработку ошибок в React 16 и более поздних версиях.

Пример приложения#

See the Pen ZJXLZQ by amixen (@amixen) on CodePen.light

Вывод

Как видите, нет ничего сложного в написании простой программы на Реакте и изучение React вцелом, дальше будет интереснее!