Как установить React

Как установить React?

React – это библиотека, поэтому слово “установить” может показаться немного странным. Возможно, “установить” – более подходящее слово, но суть вы поняли.

Существуют различные способы установки React, чтобы его можно было использовать в вашем приложении или на сайте.

Загрузить React непосредственно в веб-страницу

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

В этом случае вы добавляете 2 тега script в конец тега body:

<html>
  ...
  <body>
    ...
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"
      crossorigin
    ></script>
  </body>
</html>

Версия 16.7.0-alpha.2 в ссылках указывает на последнюю Alpha-версию 16.7 (на момент написания статьи), в которой доступны Hooks. Пожалуйста, измените ее на последнюю доступную версию React.

Здесь мы загрузили и React, и React DOM. Почему две библиотеки? Потому что React на 100% независим от браузера и может использоваться вне его (например, на мобильных устройствах с помощью React Native). Отсюда возникает необходимость в React DOM, чтобы добавить обертки для браузера.

После этих тегов вы можете загружать свои JavaScript-файлы, использующие React, или даже inline JavaScript в теге script:

<script src="app.js"></script>

<!-- or -->

<script>
  //my app
</script>

Чтобы использовать JSX, необходимо выполнить дополнительный шаг: загрузить Babel

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

и загружать свои скрипты со специальным MIME-типом text/babel:

<script src="app.js" type="text/babel"></script>

Теперь вы можете добавить JSX в свой файл app.js:

const Button = () => {
  return <button>Click me!</button>
}

ReactDOM.render(<Button />, document.getElementById('root'))

Посмотрите на этот простой пример Glitch: https://glitch.com/edit/#!/react-example-inline-jsx?path=script.js

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

Используйте create-react-app

create-react-app – это проект, цель которого – быстро освоить React, и любое приложение на React, которому нужно перерасти одну страницу, найдет, что create-react-app отвечает этим требованиям.

Вы начнете с использования npx, который представляет собой простой способ загрузки и выполнения команд Node.js без их установки. npx поставляется с npm (начиная с версии 5.2), и если у вас еще не установлен npm, сделайте это прямо сейчас с сайта https://nodejs.org (npm устанавливается вместе с Node).

Если вы не уверены, какая версия npm у вас установлена, запустите npm -v, чтобы проверить, нужно ли вам обновить версию.

Когда вы запускаете npx create-react-app <имя приложения>, npx загрузит последний релиз create-react-app, запустит его, а затем удалит его из вашей системы. Это замечательно, потому что в вашей системе никогда не будет устаревшей версии, и каждый раз, когда вы запускаете эту программу, вы получаете самый последний и самый лучший код.

Итак, давайте начнем:

npx create-react-app todolist

В этот момент он закончил работу:

create-react-app создал структуру файлов в указанной вами папке (в данном случае todolist) и инициализировал Git-репозиторий.

Он также добавил несколько команд в файл package.json, так что вы можете сразу же запустить приложение, зайдя в папку и выполнив npm start.

В дополнение к npm start, create-react-app добавил еще несколько команд:

npm run build: для сборки файлов React-приложения в папке build, готовых к развертыванию на сервере
npm test: для запуска набора тестов с использованием Jest
npm eject: для извлечения из create-react-app.

Извлечение – это акт принятия решения о том, что create-react-app сделал для вас достаточно, но вы хотите сделать больше, чем он позволяет.

Так как create-react-app – это набор соглашений общего знаменателя и ограниченное количество опций, вполне вероятно, что в какой-то момент ваши потребности потребуют чего-то уникального, что перерастет возможности create-react-app.

При извлечении вы теряете возможность автоматического обновления, но получаете большую гибкость в конфигурации Babel и Webpack.

При извлечении действие необратимо. В каталоге приложения появятся две новые папки – config и scripts. Они содержат конфигурации – и теперь вы можете начать их редактировать.

Если у вас уже установлено приложение React, использующее старую версию React, сначала проверьте версию, добавив console.log(React.version) в ваше приложение, затем вы можете обновить его, выполнив yarn add react@16.7, и yarn предложит вам обновиться (выберите последнюю доступную версию). Повторите для yarn add react-dom@16.7 (замените “16.7” на любую самую новую версию React на данный момент).

CodeSandbox

Простой способ получить структуру create-react-app, не устанавливая ее, – зайти на https://codesandbox.io/s и выбрать “React“.

CodeSandbox – это отличный способ начать проект React без необходимости его локальной установки.

Codepen

Еще одним отличным решением является Codepen.

Вы можете использовать этот стартовый проект Codepen, который уже поставляется с предустановленным React, с поддержкой Hooks: https://codepen.io/flaviocopes/pen/VqeaxB.

“Ручки” Codepen отлично подходят для быстрых проектов с одним файлом JavaScript, а “проекты” – для проектов с несколькими файлами, как те, которые мы чаще всего используем при создании приложений React.

Следует отметить, что в Codepen, в силу его внутренней работы, вы не используете обычный синтаксис импорта ES-модулей, а для импорта, например, useState, вы используете

const { useState } = React

и не

import { useState } from 'react'

Оригинал: “https://flaviocopes.com/react-installation/”

Загрузить React непосредственно в веб-страницу

Используйте create-react-app

CodeSandbox

Codepen

Читайте ещё по теме: