Главная » Программирование » React

Изучение React (I): Три примера HelloWorld

На чтение 14 мин. Просмотров 25 Опубликовано
  • Изображение заголовка взято с Unsplash, пользователь Маркус Списке, @markusspiske.

Оглавление

  1. Введение.
  2. Hello World с использованием одного HTML-файла.
  3. Разделение файлов в Hello World.
  4. Hello World создание локальной среды.
  5. Подробнее.
Содержание
  1. 1. Введение
  2. 2. Hello World с использованием одного HTML-файла
  3. 3. Разделение файлов Hello World
  4. 4. Hello World построение локальной среды
  5. Создание локального окружения
  6. 1. Установите Node.js (Ubuntu)
  7. 2. Установить NPM // Обновить NPM (если необходимо) // Или установить Yarn
  8. 3. Установка // Использование инструмента create-react-app
  9. Создание компонента
  10. Осмотр отрисованного компонента
  11. 5. Читать далее

1. Введение

React или React.js — один из самых популярных ресурсов для создания интерфейсов на основе JavaScript, для SPA (Single Page Application), PWA (Progressive Web Application) или, возможно, «изоморфного JavaScript» (то есть выполнение части на сервере и части на клиенте). React был создан Facebook и открыт в 2013 году, с тех пор он доступен в репозиториях и библиотеках, которые могут быть полностью интегрированы в ваш проект.

В моем случае я не использовал React до недавнего времени и в связи с потребностями проекта: Я работаю с развязанными моделями Drupal (headless), а фронтенд был создан с помощью React. Я использовал Angular для некоторых домашних проектов, так что некоторые базовые концепции SPA мне уже были известны. Но теперь я работаю с React, и мне захотелось поделиться некоторыми базовыми шагами, которые можно выполнить, чтобы лучше понять некоторые фундаментальные концепции React.

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

2. Hello World с использованием одного HTML-файла

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

Как это работает? Для того чтобы создать новый базовый пример React, нам нужны только некоторые базовые ресурсы:

  1. Базовая библиотека React: Основная библиотека JavaScript для создания пользовательских интерфейсов.
  2. Базовая библиотека React Dom: Пакет, который предоставляет методы и ресурсы, специфичные для DOM.
  3. Инструмент Babel: Babel — это компилятор/транспилятор, который преобразует код в совместимые версии. Также работает с React и его родным синтаксисом, JSX. Вы пишете код на JSX, а Babel преобразует ваш код в пригодный для использования JavaScript. Вот и все.

Во-первых, мы создадим новый единственный и основной HTML-файл, названный react_hello_world.html с базовой схемой HTML-тегов внутри, что-то вроде:

<!doctype html>
  <html>
     <head>
           <title>My custom title</title>
     </head>
      <body>
         <p>Hello World!</p>
      </body>  
  </html>
Вход в полноэкранный режим Выход из полноэкранного режима

Не сложно, правда? Такой файл можно создать в вашем любимом текстовом редакторе или в выбранной вами IDE. А затем вам останется только открыть файл в браузере и увидеть на экране сообщение Hello World:

Помните: если вы не очень хорошо понимаете приведенные выше строки, возможно, вам будет интересно узнать основы HTML.

Во-вторых, мы добавим внешние ресурсы React, используя обычный HTML-тег <script>. При этом мы запросим все необходимые инструменты: React (базовый), React Dom (для работы с DOM в HTML) и Babel (компилятор / транспилятор для JSX, синтаксис React). Мы включим новые ссылки в наш раздел <body>:

<!-- Load React basic resources. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
Вход в полноэкранный режим Выход из полноэкранного режима

Наконец, мы создадим новый тег <div>, который станет как бы нашей новой «точкой входа» для нового компонента React: мы подключим наш пользовательский элемент из этого элемента и назовем его «root» внутри секции <body>:

<div id="root"></div>
Вход в полноэкранный режим Выйти из полноэкранного режима

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

<!-- Loading our new React component. -->
<script type="text/babel">
  <!-- 1- Description. -->
   class Greeting extends React.Component {
     render() {
  <!-- 2- Message to render. -->
       return (<p>This is a greeting generated from a unique               HTML local file!</p>);
     }
   }
  <!-- 3- Render Instructions. -->
  ReactDOM.render(
    <Greeting />,
      document.getElementById('root')
  );
</script>
Вход в полноэкранный режим Выход из полноэкранного режима
  1. Описание: Мы создали класс, расширяющий React.Component.
  2. Сообщение для рендеринга: Мы добавили строку в функцию возврата.
  3. Инструкции по рендерингу: Мы использовали библиотеку ReactDOM для запуска рендеринга нашего нового компонента/класса, подключив новый элемент внутри тега id="root", созданного <div>.

Наконец, наш HTML-файл будет выглядеть следующим образом:

<!doctype html>
  <html>
     <head>
       <title>Document title</title>
     </head>
     <body>
       <p>Hello World!</p>
       <div id="root"></div>
       <!-- Load React. -->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>

       <!-- Load our React component. -->
      <script type="text/babel">
         class Greeting extends React.Component {
           render() {
             return (<p>This is a greeting generated from a unique HTML local file!</p>);
         }
       }

       ReactDOM.render(
       <Greeting />,
       document.getElementById('root')
       );
     </script>  

    </body>  
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Мы уже закончили! Мы закончили! Запомните эти три основных шага, которые мы сделали (это будет основой любой базовой разработки с React): мы создали класс/компонент, мы попросили его рендерить и мы указали, из какого элемента DOM (HTML) мы хотим загрузить новый компонент. Вот и все!

И теперь, если вы откроете файл в браузере с помощью правой кнопки мыши или строчной команды (можно использовать $ xdg-open react_hello_world.html ), вы увидите новую версию нашего файла Greetings:

3. Разделение файлов Hello World

Теперь мы создали наш первый «Hello World» с помощью React унифицированным способом, в одном файле, загрузив внешние ресурсы и сгенерировав вывод на «корневой» элемент. Но обычно это не является повседневной реальностью, где мы работаем с отдельными файлами разной природы.

Чтобы сделать этот подход более «реальным», мы воспользуемся простой и интуитивно понятной платформой, которая позволит нам начать разделять ресурсы. Мы попробуем с CodePen.io, онлайн-платформой для тестирования фрагментов кода, особенно сфокусированных на HTML / CSS / JavaScript для веб.

Заведите учетную запись и создайте новый сниппет / перо. Затем нам останется только установить некоторые базовые конфигурации в нашем новом сниппете/ручке: выберите Babel в качестве препроцессора JavaScript (помните, что мы используем синтаксис JSX и это не чистый JavaScript) и добавьте внешние сценарии для основной библиотеки react и библиотеки react-dom (как в предыдущем примере).

  • https://unpkg.com/react/umd/react.development.js
  • https://unpkg.com/react-dom/umd/react-dom.development.js

CodePen загрузит скрипты в наш код перед рендерингом сниппета. Вот и все.

Во-первых, во вкладке HTML мы включим базовый оригинальный <div>, работающий как корневой элемент для нашего примера React:

<div id="root"></div>
Вход в полноэкранный режим Выход из полноэкранного режима

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

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);

class Button extends React.Component {
  render() {
    return (<div className="button">Hello World! this is a greeting generated from different files.</div>);
 }
}
root.render(<Button />);
Вход в полноэкранный режим Выход из полноэкранного режима

Что здесь происходит? Ну, теперь мы используем ReactDOM.createRoot вместо ReactDOM.render (как в первом случае), из-за изменений в версиях ReactDOM. Это то, что изменилось в последних версиях: ReactDOM.render больше не поддерживается в React 18, но я сохранил два разных примера для разных версий React (15.x vs 18.x). Вы можете прочитать больше информации об этом здесь:

  • https://blog.saeloun.com/2021/07/15/react-18-adds-new-root-api.html
  • https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

Наконец, мы добавим несколько (очень базовых) стилей для того, чтобы увидеть рендеринг. Мы добавили несколько цветов к конкретному <div> и сообщению на экране:

.button {
  padding: 40px;
  color: red;
  background: black;
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Три вкладки будут загружать пример React с использованием сообщения Hello World на нашей доске CodePen, показывая в консоли внутреннюю структуру:

4. Hello World построение локальной среды

Итак, хорошо. Мы построили первый пример, используя уникальный HTML-файл, затем мы построили другой пример Hello World, используя отдельные файлы во внешней среде (CodePen.io), и теперь нам нужно сделать еще один шаг: Мы собираемся построить новый пример из локальной среды, что включает в себя начальную и базовую установку и настройку локальной среды разработки для React.

Это действительно самая интересная часть данного блока: Что нам нужно для локальной работы с React? Давайте посмотрим.

Создание локального окружения

1. Установите Node.js (Ubuntu)

Node.js — это среда исполнения для выполнения JavaScript на стороне сервера. Для работы с React вам потребуется включить Node в ваше окружение. В Ubuntu вы можете установить Node.js просто из командной строки из официальных репозиториев:

$ sudo apt update
$ $ sudo apt upgrade -y
$ sudo apt install nodejs -y
Войти в полноэкранный режим Выйти из полноэкранного режима

Но это может установить более старую версию Node.js… поэтому нам нужно выполнить обновление.

2. Установить NPM // Обновить NPM (если необходимо) // Или установить Yarn

Нам понадобится менеджер пакетов для разрешения зависимостей, поэтому мы можем использовать npm и yarn (совместимый с npm). Используя npm, мы сможем обновить текущую версию Node.js до последней стабильной версии или нестабильной.

$ sudo apt install npm
$ sudo n latest
Вход в полноэкранный режим Выход из полноэкранного режима

Для обновления npm в качестве менеджера пакетов можно выполнить:

$ sudo npm install -g npm
Войти в полноэкранный режим Выйти из полноэкранного режима

Это установит или просто обновит вашу текущую версию npm и ресурсы:

Yarn — еще один менеджер пакетов JavaScript, совместимый с npm. Он помогает нам автоматизировать установку, обновление, настройку и удаление пакетов npm, ускоряя процесс установки.

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt install --no-install-recommends yarn

$ yarn --version
1.22.18
Вход в полноэкранный режим Выход из полноэкранного режима

3. Установка // Использование инструмента create-react-app

Create React App — это очень удобный инструмент для создания новых приложений на основе React в вашей локальной среде. Он работает на macOS, Windows и Linux, и вам не нужно устанавливать и настраивать такие ресурсы, как Babel или webpack: они уже настроены! Вам понадобится Node >= 14.0.0 и npm >= 5.6 в вашей среде.

Мы можем установить create-react-app как новую зависимость с помощью npm:

$ sudo npm install -g create-react-app
Войдите в полноэкранный режим Выйти из полноэкранного режима

Эта команда установит пакет как глобальный ресурс с флагом -g. Это позволит:

$ create-react-app --version
  5.0.1
Войти в полноэкранный режим Выйти из полноэкранного режима

И это будет нормально и может быть использовано для начального тестирования, но создатели рекомендуют удалить глобальный ресурс, чтобы заставить нас использовать последнюю версию create-react-app для конкретного проекта, как зависимость. Поэтому используйте следующие две версии:

$ npm uninstall -g create-react-app
[...]
$ yarn global remove create-react-app
Вход в полноэкранный режим Выход из полноэкранного режима

Создание компонента

Сейчас мы создадим наше первое React-приложение Hello World в локальном окружении, используя строительные леса, сгенерированные пакетом create-react-app. Также мы воспользуемся npx. npx — это инструмент для запуска пакетов, который поставляется вместе с npm.

$ npx create-react-app hello-world
$ cd hello-world
$ npm start
Вход в полноэкранный режим Выход из полноэкранного режима

Но вы можете использовать альтернативные варианты, такие как npm или yarn:

$ npm init react-app hello-world-2
$ cd hello-world-2
$ npm start
[...] 
$ yarn create react-app hello-world-3
$ cd hello-world-3
$ yarn start
Войти в полноэкранный режим Выйти из полноэкранного режима

Дело в том, что после запуска start, новое приложение будет запущено через предварительно настроенный веб-сервер, и приложение будет развернуто напрямую через порт 3000 (будьте осторожны, если он у вас используется), открываясь из вашего любимого браузера:

Теперь у нас есть новое React App, созданное с помощью scaffolding. …Но что у нас внутри?

Осмотр отрисованного компонента

И в конце, мы можем открыть только что созданную папку с нашим новым React App «Hello World» и посмотреть, как работает scaffolding, предоставленный create-react-app. Теперь откройте созданную папку в вашей любимой IDE // Editor и посмотрите содержимое внутри проекта:

Здесь вы можете увидеть все загруженные зависимости (папка «node_modules»), папку public со всеми ресурсами для веб-сервера, папку src с кодом нашего приложения и другими файлами, такими как базовое gitignore (create-react-app запускает git как систему управления версиями в новой папке) и файлы для регистрации зависимостей (package-lock.json и package.json). Среди всех этих ресурсов есть несколько важных файлов, которые мы должны рассмотреть:

  1. index.html: Основной файл HTML, с div под названием «root» в качестве точки входа для нашего приложения.
  2. App.js: Наш новый компонент, описанный в синтаксисе JSX и с центральным сообщением для экрана.
  3. index.js: Файл, загружающий компонент App и осуществляющий рендеринг из корневого div, присутствующего в файле index.html.

Мы изменим центральное сообщение, размещенное в App.js, и напишем следующее:

<p>Hello World! this is a React App from a local environment.</p>
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь, просто сохранив изменения и перезагрузив URL в браузере, вы увидите наше обновленное сообщение. Вот и все! Мы сделали это!

В заключение нам нужно просмотреть все мелочи, которые мы практиковали на протяжении этой статьи о начале работы с React. Мы хотели создать кейсы «Hello World» и, почти не осознавая этого, получили отличный снимок (общую картину) основ React.

Вы можете скачать два последних примера из этого поста из репозитория Github: используйте один HTML-файл, а для локального приложения React просто запустите $ npm install (это загрузит всю папку node_modules для зависимостей) и затем $ npm start, чтобы запустить приложение на сервере + браузер.

Что мы знаем сейчас?

  • Самые основные ресурсы для разработки React App: Библиотека react, библиотека react-dom и Babel Transpiler (помните, что вы используете синтаксис JSX).
  • Основные ресурсы для разработки кода React в локальной среде, а также как их установить и использовать:
    • Окружение: Node.js
    • Менеджеры пакетов: npm, yarn
    • Бегунок команд: npx
    • Пакет для базовых приложений React: create-react-app
  • Создание базовых приложений React Apps с помощью create-react-app

5. Читать далее

  • Основы HTML
  • Базовые примеры HTML — WC3 Schools
  • Начало работы с Create React App
  • Создание React App — быстрый старт
  • Добавление React на веб-сайт

Рекомендуем почитать:

Оцените статью
Procodings.ru
Добавить комментарий