React Начало работы

Для запуска React-приложений в рабочей среде потребуется установка пакета npm, поставляемого вместе с Node.js.

Для поверхностного ознакомления с React, достаточно написать соответствующий код прямо внутри HTML-документа.

Однако для полноценного использования React в рабочей среде обязательно следует установить npm и Node.js.

Запуск React через HTML

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

Подключение скриптов

Для использования React в HTML-файле необходимо подключить три скрипта:

React: Основной скрипт, предоставляющий API для работы с компонентами.
React DOM: Скрипт, который позволяет взаимодействовать с DOM (Document Object Model) браузера.
Babel: Транслятор, который преобразует современный синтаксис JavaScript (ES6 и JSX) в код, совместимый с большинством браузеров.

Пример


<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>

    <div id="mydiv"></div>

    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }

      const container = document.getElementById('mydiv');
      const root = ReactDOM.createRoot(container);
      root.render(<Hello />)
    </script>

  </body>
</html>

Как это работает?

Подключение библиотек: Скрипты подключаются в разделе <head> HTML-документа.
Создание компонента: В разделе <script> определяется функция Hello, которая возвращает React-компонент <h1>.
Отрисовка компонента: Компонент Hello рендерится в элемент с id mydiv с помощью ReactDOM.createRoot.

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

Настройка среды разработки React

Если вы установили npx и Node.js, то вы можете создать приложение React.

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

Удаление старой версии: Если у вас ранее была установлена глобальная версия create-react-app, рекомендуется удалить ее, чтобы использовать последнюю версию через npx:
```
npm uninstall -g create-react-app
```
Создание приложения: Создайте новое приложение React с помощью следующей команды:
```
npx create-react-app my-react-app
```
Эта команда создаст директорию my-react-app с готовой к использованию структурой проекта.

Запуск приложения

Теперь вы готовы запустить настоящее приложение React.

Переход в директорию: Перейдите в созданную директорию:
```
cd my-react-app
```
Запуск приложения: Запустите приложение с помощью команды:
```
npm start
```

Это откроет браузер с вашим приложением React! Если этого не произошло, то перейдите по адресу localhost:3000.

Результат:

Что дальше?

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

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

Пример


// index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';

const myFirstElement = <h1>Hello React!</h1>

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