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

Шаг 1: Установите библиотеку React и создайте новый проект

Чтобы создать новое приложение React, на вашем компьютере должна быть установлена ​​библиотека React. Вы можете установить React с помощью диспетчера пакетов Node (npm), который входит в состав Node.js. Если у вас еще не установлен Node.js, вам необходимо сначала загрузить и установить его.

После установки npm и Node.js откройте окно терминала и введите следующую команду:

npm install -g create-react-app

Это установит инструментcreate-react-app, который вы можете использовать для создания нового проекта React с помощью одной команды.

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

create-react-app my-app

Замените my-app именем, которое вы хотите дать своему проекту. Инструмент create-react-app создаст новый каталог с указанным именем и сгенерирует в нем базовый проект React.

Шаг 2: Изучите структуру проекта

После создания проекта перейдите в каталог проекта и откройте его в редакторе кода. Вы должны увидеть следующую структуру каталогов:

my-app/
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Каталог node_modules содержит библиотеки, необходимые для проекта. Каталогpublic содержит файлы HTML, CSS и JavaScript, из которых состоит приложение. Каталогsrc содержит исходный код приложения.

Шаг 3: Измените корневой компонент

Корневой компонент приложения React — это компонент, который отображается на странице. В этом случае корневой компонент определяется в файле App.js, который находится в папке src file.

Откройте файлApp.js и измените методrender, включив в него собственное содержимое. Вы можете использовать синтаксис JSX для определения структуры и стиля компонента, а JavaScript — для определения его поведения.

Например, вот как можно изменить компонентApp, чтобы он отображал простую надпись «Hello, World!». сообщение:

import React from 'react';

function App() {
  return (
    <div>
      Hello, World!
    </div>
  );
}

export default App;

Шаг 4: Запустите сервер разработки

Чтобы увидеть ваши изменения в действии, вам нужно запустить сервер разработки. Для этого откройте окно терминала и перейдите в каталог проекта. Затем введите следующую команду:

npm start

Это скомпилирует приложение и откроет его в окне браузера, где вы сможете увидеть свои изменения в режиме реального времени. Когда вы вносите изменения в приложение, сервер разработки автоматически перезагружает страницу, чтобы отразить изменения.

Шаг 5. Создайте приложение для производства

Когда вы будете готовы создать приложение для производства, вам нужно будет создать готовую к производству сборку приложения. Для этого введите в терминал следующую команду:

npm run build

Это создаст готовую к производству сборку приложения в каталоге build. Затем вы можете развернуть приложение на хостинговой платформе, такой как GitHub Pages или Heroku, чтобы сделать его доступным в Интернете.

Заключение

Поздравляем! Вы успешно создали свое первое приложение React! Хотя это руководство лишь поверхностно описывает возможности React, оно должно дать вам прочную основу, на которую можно опираться, продолжая учиться и развивать свои навыки. Удачного кодирования!