Как подключить и установить React JS. Простой способ.
Хотите начать пользоваться библиотекой React JS? Для этого ее сначала нужно подключить и установить на те страницы, где вы планируете ее применять.
Прежде чем начать, если вы хотите подробнее погрузиться в работу с библиотекой React, рекомендую посмотреть мой курс «Философия React для начинающих»
Эта статья о простом способе, как это можно сделать. Это подойдет вам если у вас небольшой и несложный проект, который состоит из нескольких веб-страниц.
Итак, вот как вы можете подключить и попробовать в работе React JS.
1 способ. Использование «песочницы».
Чтобы просто посмотреть возможности React JS можно воспользоваться так называемой «песочницей» — онлайн страницей, где уже эта библиотека подключена и вам остается только вводить команды в соответствующую вкладку и наблюдать результат в другой.
Не нужно ничего подключать или устанавливать.
Вот страница, где это можно сделать:
После внесения изменений в код, просто нажимайте кнопку «Change View», чтобы посмотреть результат.
Этот способ использования библиотеки React JS идеально подходит, если вы просто хотите поэкспериментировать с ее возможностями. Также это удобный инструмент для обучения.
2 способ.Подключение Javascript файлов вручную.
Если вы хотите использовать React JS на своих веб-страницах, к ним нужно подключить несколько javascript файлов.
Вы можете скачать эти файлы и подключить их указав локальный путь до них.
Также можно подключать библиотеку указав путь до Javascript-файлов на удаленном сервере (на так называемых CDN серверах).
О том как можно подключить javascript файлы к веб-страницам, можно почитать здесь:
Библиотека React JS представляет собой два javascript файла.
1) Сама библиотека и ее основные функции (ядро).
2) Функции для работы с DOM-деревом. Нужна для использования на веб-страницах и работы react в браузере.
Для полноценной работы со всеми возможностями React, также рекомендуется подключить javascript транспайлер Babel. Он будет обеспечивать, чтобы ваш код поддерживал новый синтаксис Javascript и поддерживался в старых браузерах.
Пример веб-страницы, где подключена библиотека React JS можно здесь:
Это пример от разработчиков библиотеки.
Скрипты можно подключить между открывающим и закрывающим тэгом
. вашей веб-страницы.
Например, подключение скриптов для разработки (development).
Можно вместо этого подключить сжатые версии этих файлов для размещения на рабочем сервере (production):
Актуальные версии ссылок CDN всегда можно посмотреть здесь:
Вот таким способом, вы можете быстро подключить React JS и уже начать его использовать.
И еще раз. Курс более подробный курс по работе с React «Философия React для начинающих» здесь .
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Создаём новое React-приложение
These docs are old and won’t be updated. Go to react.dev for the new React docs.
See Start a New React Project for the recommended ways to create an app.
Используйте встроенный набор инструментов для лучшего взаимодействия пользователя и разработчика.
На этой странице описано несколько популярных наборов инструментов React, которые помогают в таких задачах как:
Масштабирование до большого количества файлов и компонентов.
Использование сторонних библиотек из npm.
Раннее обнаружение распространённых ошибок.
Отражение изменений CSS и JS на лету в процессе разработки.
Оптимизация кода для продакшена.
Рекомендованные на этой странице инструменты не требуют дополнительной настройки для начала работы.
Возможно, вам не нужен дополнительный набор инструментов
Если у вас нет проблем, описанных выше, или пока не чувствуете себя уверенно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега на HTML-странице, при необходимости с JSX.
Также это самый простой способ добавить React в существующий веб-сайт. Вы всегда можете расширить набор инструментов, если посчитаете это нужным.
Рекомендуемый набор инструментов
Команда React в первую очередь рекомендует следующие решения:
Если вы изучаете React или создаёте новое одностраничное приложение, используйте Create React App.
Если вы создаёте серверный сайт с Node.js, попробуйте Next.js.
Если вы создаёте статический контент-ориентированный сайт, попробуйте Gatsby.
Если вы создаёте библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов.
Create React App
Create React App — удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.
Инструмент настраивает среду для использования новейших возможностей JavaScript, оптимизирует приложение для продакшена и обеспечивает комфорт во время разработки. Вам понадобятся Node.js не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:
npx create-react-app my-app cd my-app npm start
Create React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них.
Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build . Вы можете узнать больше о Create React App из его README и его пользовательского руководства.
Next.js — это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды.
Gatsby — лучший способ для создания статических сайтов с помощью React. Он позволяет использовать React-компоненты, но выводит предварительно отрендеренный HTML и CSS, чтобы гарантировать минимальное время загрузки.
Более гибкие наборы инструментов
Следующие наборы инструментов предлагают больше гибкости и выбора. Мы рекомендуем их более опытным разработчикам:
Neutrino сочетает в себе возможности webpack и простоту пресетов. Инструмент включает в себя пресеты для React-приложений и React-компонентов.
Nx — набор инструментов для ведения фулстэк разработки в монорепозиториях, который обладает встроенной поддержкой React, Next.js, Express и так далее.
Parcel — быстрый упаковщик веб-приложений с нулевой конфигурацией, который работает с React.
Razzle — это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.
Создание набора инструментов с нуля
В набор инструментов для сборки JavaScript обычно входят:
Менеджер пакетов, такой как Yarn или npm. Он позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
Сборщик, такой как webpack или Parcel. Он позволяет писать модульный код и объединять его в небольшие пакеты, чтобы оптимизировать время загрузки.
Компилятор, такой как Babel. Он позволяет писать современный код JavaScript, который будет работать даже в старых браузерах.
Если вы предпочтёте создать свой собственный набор JavaScript-инструментов с нуля, ознакомьтесь с этим руководством, в котором воссоздаются некоторые функции Create React App.
Не забудьте убедиться, что ваш набор инструментов правильно настроен для продакшена.
Добавляем React на сайт
These docs are old and won’t be updated. Go to react.dev for the new React docs.
See Add React to an Existing Project for the recommended ways to add React.
Используйте React в том объёме, в котором вам хочется.
Для внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.
Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.
Добавляем React за одну минуту
Необязательно: Используем React с JSX (без каких-либо бандлеров!)
Добавляем React за одну минуту
В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML-файл.
Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.
Шаг 1: Добавляем DOM-контейнер в HTML
Для начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег в месте, где вы хотите отобразить что-нибудь с помощью React. Например:
divid="like_button_container">div>
Затем назначьте созданному уникальный атрибут id . Это позволит впоследствии найти тег из JavaScript-кода и отобразить React-компоненты внутри него.
Совет
«Контейнер» можно поместить где угодно внутри тега . Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.
Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.
Шаг 3: Создаём React-компонент
Создайте файл с именем like_button.js рядом с вашим HTML-файлом.
Возьмите этот стартовый код и вставьте его в созданный ранее файл.
Совет
В данном коде создаётся React-компонент с именем LikeButton . Не беспокойтесь, если что-то кажется вам непонятным — мы подробно разберём принципы разработки на React позже, в нашем практическом руководстве и во введении в основные понятия. Пока же мы просто посмотрим, как это выглядит на экране.
Добавьте ещё 3 строки в конец файла like_button.js , после стартового кода:
Эти три строки кода ищут элемент , который мы добавили в HTML на первом шаге, а затем отображают React-компонент с кнопкой «Нравится» внутри него.
Вот и всё! Вы только что добавили свой первый React-компонент на страницу.
Перейдите к следующим разделам, если хотите узнать о других способах добавить React.
Совет: Повторное использование компонентов
Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:
Примечание
Этот способ лучше всего подходит для страниц, содержащих несколько изолированных участков кода, написанных на React. Внутри чистого React-кода проще использовать композицию компонентов.
Совет: Минификация JavaScript для продакшена
Публикуя ваш сайт на продакшен, имейте в виду, что несжатый JavaScript значительно замедляет страницу для ваших пользователей.
Если вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на React на production.min.js :
Если же вы не настроили минификацию для ваших скриптов, то вот один из вариантов, как это сделать.
Необязательно: Используем React с JSX
В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:
const e = React.createElement;// Отобразить с текстом «Нравится»returne('button',onClick:()=>this.setState(liked:true>)>,'Нравится');
Однако, React позволяет использовать специальный синтаксис, называющийся JSX:
// Отобразить с текстом «Нравится»return(buttononClick=()=>this.setState(liked:true>)>>Нравитсяbutton>);
Эти два примера делают одно и то же. Несмотря на то, что JSX является совершенно необязательным, многие разработчики считают его удобным для разработки UI — как с React, так и с другими библиотеками.
Вы можете попробовать JSX в этом онлайн-конвертере.
Быстрый старт с JSX
Чтобы быстро попробовать JSX, добавьте такой -тег на страницу:
Теперь синтаксис JSX доступен внутри каждого -тега, у которого есть атрибут type=»text/babel» . Скачайте пример HTML-кода с JSX, чтобы поэкспериментировать.
Такой подход удобен для обучения или создания быстрых демо, но следует помнить, что работа сайта при этом сильно замедляется. Поэтому для продакшена JSX лучше добавить по-другому. Если вам интересно попробовать, удалите добавленный ранее -тег и все атрибуты type=»text/babel» . Вместо них мы будем пользоваться препроцессором JSX, который автоматически трансформирует весь код внутри -тегов.
Добавляем JSX в проект
JSX можно добавить в существующий проект и без разных сложных инструментов вроде бандлера или сервера для разработки. По сути, добавление JSX напоминает добавление препроцессора CSS. Необходимо лишь убедиться, что на вашем компьютере установлен Node.js.
С помощью терминала перейдите в директорию вашего проекта и запустите следующие команды:
Шаг 1: Запустите команду npm init -y (если появляются ошибки, попробуйте этот способ)
Шаг 2: Запустите команду npm install babel-cli@6 babel-preset-react-app@3
Совет
Мы используем npm только для установки препроцессора JSX. React и код приложения всё ещё остаются в -тегах.
Поздравляем! Вы только что добавили в ваш проект поддержку JSX, готовую к продакшену.
Запускаем препроцессор JSX
Создайте директорию с названием src и наберите в терминале следующую команду:
npx не является опечаткой. Это инструмент запуска пакетов, появившийся в npm версии 5.2+.
Если у вас появляется сообщение об ошибке, похожее на «You have mistakenly installed the babel package», то это означает, что вам нужно пройти предыдущий шаг, а затем повторить запуск команды.
Дожидаться завершения работы команды не нужно — она работает в режиме наблюдения за изменениями в JSX-коде.
Попробуйте создать файл с названием src/like_button.js и вставить в него этот стартовый JSX-код. Препроцессор автоматически трансформирует новый код в чистый JavaScript, пригодный для выполнения в браузере, и сохранит его в новый файл like_button.js . При редактировании JSX-кода в существующих файлах трансформация также происходит автоматически.
Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из его документации.
Если вы неплохо разбираетесь в инструментах сборки и хотите создавать приложения на React с их помощью, обратитесь к следующему разделу, где описаны некоторые из наиболее популярных способов. Если нет — не беспокойтесь, уже знакомые нам script-теги ничуть не хуже!
Добавление React в существующий проект¶
Если вы хотите добавить интерактивности в существующий проект, вам не нужно переписывать его на React. Добавьте React к существующему стеку и выводите интерактивные компоненты React в любом месте.
Для локальной разработки необходимо установить Node.js.
Хотя вы можете попробовать React онлайн или с помощью простой HTML-страницы, в реальности большинство инструментов JavaScript, которые вы захотите использовать для разработки, требуют Node.js.
Использование React для целого подмаршрута существующего сайта¶
Допустим, у вас есть существующее веб-приложение по адресу example.com , построенное на другой серверной технологии (например, Rails), и вы хотите реализовать все маршруты, начинающиеся с example.com/some-app/ , полностью с помощью React.
Вот как мы рекомендуем это сделать:
Создайте React-часть вашего приложения, используя один из React-based frameworks.
Укажите /some-app в качестве базового пути в конфигурации вашего фреймворка (вот как: Next.js, Gatsby).
Настройте ваш сервер или прокси так, чтобы все запросы по адресу /some-app/ обрабатывались вашим React-приложением.
Это гарантирует, что React-часть вашего приложения сможет воспользоваться лучшими практиками, заложенными в эти фреймворки.
Многие фреймворки на основе React являются полнофункциональными и позволяют вашему React-приложению использовать преимущества сервера. Однако вы можете использовать тот же подход, даже если вы не можете или не хотите запускать JavaScript на сервере. В этом случае вместо этого обслуживайте экспорт HTML/CSS/JS ( next export output для Next.js, по умолчанию для Gatsby) в /some-app/ .
Использование React для части существующей страницы¶
Допустим, у вас есть существующая страница, построенная на другой технологии (либо серверной, как Rails, либо клиентской, как Backbone), и вы хотите отобразить интерактивные компоненты React где-то на этой странице. Это распространенный способ интеграции React — фактически, именно так большинство пользователей React смотрели на Meta в течение многих лет!
Вы можете сделать это в два шага:
Установите среду JavaScript, которая позволяет вам использовать JSX синтаксис, разделить ваш код на модули с помощью синтаксиса импорт / экспорт , и использовать пакеты (например, React) из реестра пакетов npm.
Рендерите ваши компоненты React там, где вы хотите видеть их на странице.
Точный подход зависит от существующей настройки страницы, поэтому давайте рассмотрим некоторые детали.
Шаг 1: Создайте модульную среду JavaScript¶
Модульная среда JavaScript позволяет писать компоненты React в отдельных файлах, в отличие от написания всего кода в одном файле. Она также позволяет использовать все замечательные пакеты, опубликованные другими разработчиками в реестре npm — включая сам React! Как вы это сделаете, зависит от вашей существующей настройки:
Если ваше приложение уже разбито на файлы, использующие операторы import , попробуйте использовать уже имеющуюся настройку. Проверьте, не приводит ли написание в вашем JS-коде к синтаксической ошибке. Если это приводит к синтаксической ошибке, вам может понадобиться преобразовать ваш JavaScript код с помощью Babel, и включить предустановку Babel React для использования JSX.
Если в вашем приложении нет существующей настройки для компиляции модулей JavaScript, установите ее с помощью Vite. Сообщество Vite поддерживает множество интеграций с бэкенд-фреймворками, включая Rails, Django и Laravel. Если вашего бэкенд-фреймворка нет в списке, следуйте этому руководству, чтобы вручную интегрировать сборки Vite с вашим бэкендом.
Чтобы проверить, работает ли ваша настройка, выполните эту команду в папке проекта:
npm install react react-dom
Затем добавьте эти строки кода в начало вашего основного файла JavaScript (он может называться index.js или main.js ):
index.js Результат
12345678
importcreateRoot>from'react-dom/client';// Clear the existing HTML contentdocument.body.innerHTML=';// Render your React component insteadconstroot=createRoot(document.getElementById('app'));root.render(h1>Hello,world/h1>);
Если все содержимое вашей страницы заменить на «Привет, мир!», все заработает! Продолжайте читать.
Интеграция модульной среды JavaScript в существующий проект в первый раз может показаться пугающей, но оно того стоит!
Шаг 2: Рендеринг компонентов React в любом месте страницы¶
В предыдущем шаге вы поместили этот код в начало вашего основного файла:
12345678
importcreateRoot>from'react-dom/client';// Clear the existing HTML contentdocument.body.innerHTML=';// Render your React component insteadconstroot=createRoot(document.getElementById('app'));root.render(h1>Hello,world/h1>);
Конечно, на самом деле вы не хотите очищать существующий HTML-контент!
Удалите этот код.
Вместо этого вы, вероятно, хотите отобразить компоненты React в определенных местах HTML. Откройте вашу HTML-страницу (или шаблоны сервера, которые ее генерируют) и добавьте уникальный атрибут id к любому тегу, например:
123
navid="navigation">nav>
Это позволит вам найти этот элемент HTML с помощью document.getElementById и передать его в createRoot , чтобы вы могли создать внутри него свой собственный компонент React:
index.js index.html Результат
12345678910
importcreateRoot>from'react-dom/client';functionNavigationBar()// TODO: Actually implement a navigation barreturnh1>HellofromReact!/h1>;>constdomNode=document.getElementById('navigation');constroot=createRoot(domNode);root.render(NavigationBar/>);
1234567891011
html>head>title>My apptitle>head>body>p>This paragraph is a part of HTML.p>navid="navigation">nav>p>This paragraph is also a part of HTML.p>body>html>
Обратите внимание, что оригинальное содержимое HTML из index.html сохраняется, но ваш собственный React-компонент NavigationBar теперь появляется внутри из вашего HTML. Прочитайте документацию по использованию createRoot , чтобы узнать больше о рендеринге компонентов React внутри существующей HTML-страницы.
Когда вы внедряете React в существующий проект, обычно начинают с небольших интерактивных компонентов (например, кнопок), а затем постепенно продолжают «двигаться вверх», пока в конечном итоге вся ваша страница не будет построена на React. Если вы когда-нибудь достигнете этого момента, мы рекомендуем сразу после этого перейти на фреймворк React, чтобы получить максимальную отдачу от React.
Использование React Native в существующем нативном мобильном приложении¶
React Native также может быть интегрирован в существующие нативные приложения постепенно. Если у вас есть существующее нативное приложение для Android (Java или Kotlin) или iOS (Objective-C или Swift), следуйте этому руководству, чтобы добавить в него экран React Native.
