7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Настройка среды React, часть 3

Read Time: 7 mins
This post is part of a series called Set Up a React Environment.
Set Up a React Environment, Part 2
Set Up a React Environment, Part 4

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

На протяжении всего этого урока мы сосредоточимся на React локализации. Первый из этих подходов аналогичен CodePen, где сценарии React были динамически вставлены в ваш HTML-файл, прежде чем отображаться в окне вывода.

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

Ручная настройка

Начните с создания документа index.html и добавления нескольких тегов <script> для библиотек React и ReactDOM.

Добавленные скрипты React - через CDN, а конкретные URI рекомендуются Facebook. Если вы хотите полностью работать в автономном режиме, вы можете загрузить эти сценарии локально и изменить ссылки на относительные.

Элемент <div id = 'app'> был добавлен как местоположение в DOM, на которое будет показано наше приложение React. Также был добавлен пустой тег <script>, который будет использован для быстрого добавления нашего кода React.

Однако на этот раз мы не сможем использовать JSX, так как нет возможности конвертировать его в JavaScript во время выполнения. Его нужно заранее компилировать с помощью препроцессора, такого как Babel. Мы не можем использовать классы или модули ES6, так как эти функции еще не имеют универсальной поддержки браузера.

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

Начиная только с компонента <App />:

Это то, как компонент React выглядит без JSX. Фактически, это то, во что код JSX фактически скомпилирован в Babel.

Давайте теперь добавим определения для двух дочерних компонентов и добавим ссылку на каждый из них в компоненте верхнего уровня <App />. Я также буду использовать props number из примера CodePen.

Вот как выглядит весь исходный код HTML.

Обратите внимание, что в компоненте <App /> мы можем создать столько элементов, сколько хотим, добавив больше вызовов в React.createElement(). Кроме того, props передается в дочерние компоненты через объект JavaScript props, который затем может быть доступен внутри компонентов через параметр функции props.

Откройте index.html в браузере, чтобы увидеть вывод React.

Reacts outputReacts outputReacts output

Я не буду вдаваться в подробности о React.createElement() и других темах, отличных от JSX, так как большинство пользователей React предпочитают писать свои компоненты с помощью JSX. Мы будем использовать JSX для наших компонентов React для оставшейся части этой серии уроков.

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

Создаём приложение React

Чтобы решить проблему сложных ручных установок React, Facebook представила приложение create-react-app, которое является удобным для пользователя способом начать работу с React. Оно обеспечивает полную настройку сборки, но не требует ручной настройки.

Давайте продолжим и установим приложение create-react-app. Введите следующий код в окне командной строки.

npm install -g create-react-app

Это установит приложение create-response-app глобально, чтобы вы могли получить к нему доступ из любого каталога.

Вам понадобится npm для запуска этой команды, а Node.js - для запуска приложения create-react-app. Поскольку npm поставляется в комплекте с Node.js, просто загрузите и установите последнюю версию Node.js с официального сайта.

Теперь мы создадим новое приложение React с именем my-first-components. Обратите внимание: create-response-app автоматически создает папку для вашего приложения, поэтому вам нужно только убедиться, что вы находитесь в каталоге, в котором вы хотите создать папку своего приложения.

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

Для завершения работы create-react-app может потребоваться минута или две, чтобы завершить установку всего. После этого введите команду npm start и откроется новое окно браузера, и через несколько секунд появится ваше приложение React.

The initial display of the React appThe initial display of the React appThe initial display of the React app

Самое приятное в использовании create-react-app - это то, что оно включает в себя мини-веб-сервер, а также отслеживает файлы в вашем приложении для изменений. Всякий раз, когда происходят изменения, ваше приложение пересобирается, и окно браузера автоматически перезагружается, чтобы отобразить обновленное приложение.

Во время процесса автоматической установки приложение create-response-app генерирует несколько файлов, а также следующие три папки:

  • node_modules
  • public
  • src

A React apps organizationA React apps organizationA React apps organization

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

Вывод по умолчанию для приложения предполагает, что мы редактируем App.js в качестве отправной точки, поэтому откройте этот файл и удалите вызовы импорта для логотипов и файлов CSS, поскольку нам это не понадобится. Мы также можем упростить компонент <App /> и добавить в наши дочерние компоненты.

Ваш файл App.js должен выглядеть следующим образом:

Сохраните изменения, и приложение create-react-app автоматически обновит ваше приложение в браузере. Это приводит к тому же результату, что и раньше. (Обратите внимание, что на этот раз он загружен в браузере через локальный веб-сервер.)

Your first React componentYour first React componentYour first React component

Давайте сделаем это более модульным, тем не менее, в соответствии с современными передовыми методами создания приложений React. Создайте два новых файла внутри папки src с именем MyFirstComponent.js и MySecondComponent.js.

Внутри MyFirstComponent.js добавьте следующий код:

И внутри MySecondComponent.js добавьте аналогичный код:

Наконец, нам нужно обновить App.js для импорта обоих дочерних компонентов, поскольку они теперь находятся в отдельных файлах:

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

Заключение

В этом учебном пособии мы рассмотрели два метода локальной настройки React : ручной подход и использование инструмента от Facebook - create-react-app .

Создание приложения React вручную с нуля и вставка зависимостей скрипта непосредственно в файле index.html довольно неэффективна. Поскольку ваше приложение масштабируется, и, когда выпущены разные версии ваших сценариев, ручное обновление скриптов быстро станет неуправляемым. Кроме того, мы не можем использовать функции ES6 или писать наши компоненты в JSX!

С другой стороны, использование приложения create-react-app - это очень плавный процесс. Он установливаетс и инициализируется всего несколькими командами. После запуска приложение create-response-app пересобирает ваше приложение и обновляет окно браузера каждый раз, когда вы редактируете файлы проекта. Это очень хороший рабочий процесс при внесении большого количества незначительных изменений, поскольку он помогает ускорить разработку приложений.

В следующем уроке мы создадим приложение React с нуля, которое использует Webpack и Babel для объединения и обработки нашего приложения в один файл JavaScript. В отличие от приложения create-react-app, где все сделано для вас, мы будем вручную настраивать все установочные файлы, и мы обсудим, почему вы выбрали именно такой подход.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.