Unetway

React JS - Введение и установка

ReactJS - это открытая JavaScript библиотека для создания интерфейсов, которая призвана решать проблемы частичного обновления содержания веб-страницы, с которыми сталкиваются в разработке одностраничных приложений. Бибилиотека разрабатывается компанией Facebook и сообществом индивидуальных разработчиков. 

Для установки React для начала понадобится установить и настроить локальную среду разработки. Если вы занимаетесь разработкой, то у вас уже явно установлен локальный сервер. Также, можно попробовать React онлайн, прямо в браузере, подключив внешние файлы библиотеки и использовав следующий код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
  </body>
</html>

Для установки React на локальном сервере, потребуется установка Node JS >= 6 версии.

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

cd my-app
npm start

Если у вас установлен npm 5.2.0+, вы можете использовать npx вместо этого.

npx create-react-app my-app

cd my-app
npm start

Установленное React приложение создает конвейер сборки frontend и его можно использховать с любым backend.
В React используеются такие frontend инструменты, как Babel и webpack, но вы также можете использовать другие инструменты и настраивать конфигурацию приложения по своему усмотрению.

Когда приложение готово к развертыванию в производство, то запуск следующей команды приведет к созданию оптимизированной сборки вашего приложения в build каталоге.

npm run build

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

Хоть React и можно использовать без набора стартовой сборки, рекомендуется установить следующий набор для разработки:

  • Менеджер пакетов , таких как  Yarn or npm . Это позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
  • Бандлы (пакетирование) такие как WebPack или Browserify . Он позволяет писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.
  • Компилятор, таких как Babel. Он позволяет писать современный JavaScript-код, который по-прежнему работает в старых браузерах.

Установка React

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

npm init
npm install --save react react-dom

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

yarn init
yarn add react react-dom

Включение ES6 и JSX

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

В инструкции по установке Babel объясняется , как настроить Babel во многих различных средах сборки. Убедитесь, что вы устанавливаете babel-preset-react и babel-preset-env и включаете их в свою .babelrc конфигурацию.

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')
);

Этот код превращается в элемент DOM с идентификатором root и содержимым внутри него:

<div id="root">
<h1>Hello, world!</h1>
</div>

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

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

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

Тем не менее, они делают версию разработки React более крупной и медленной, поэтому вы должны использовать производственную версию при развертывании приложения.

Узнайте, как определить, работает ли ваш сайт в правильной версии React , и как наиболее эффективно настроить процесс сборки продукции:

  • Создание производственной сборки с помощью приложения «React App»
  • Создание производственной сборки с однофазными сборками (Single-File Builds)
  • Создание производственной сборки с помощью Brunch
  • Создание сборки сборки с помощью Browserify
  • Создание производственной сборки с Rollup
  • Создание производственной сборки с помощью webpack

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

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

UMD-сборки React и ReactDOM доступны через CDN.

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

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

Почему crossorigin атрибут?

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

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

Также рекомендуется проверить, что используемый CDN задает Access-Control-Allow-Origin: * HTTP-заголовок. Это позволяет улучшить обработку ошибок в React 16 и более поздних версиях.