Готовы ли вы начать работу с 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, оно должно дать вам прочную основу, на которую можно опираться, продолжая учиться и развивать свои навыки. Удачного кодирования!