Главная » React & Redux » Создаём первое приложение на React

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


11.10.2021, 00:07

Create React App (CRA) - это официально поддерживаемый способ создания одностраничных приложений React. Он предлагает современную настройку сборки без конфигурации.

Если вы успели установить ранее утилиту create-react-app глобально, используя команду npm install -g create-react-app, рекомендуется её деинсталлировать с помощью команды npm uninstall -g create-react-app

Для создания нового приложения достаточно в терминале запустить команду:

npx create-react-app my-app

где my-app - это произвольное название вашего приложения

для перехода в созданную папку приложения используется команда:

cd my-app

теперь, находясь уже в папке приложения, мы можем его запустить командой:

npm start


Наше приложение открылось и работает в браузере

Самые главные файлы приложения: App.js и index.js, общая структура приложения получается такой:


Структура созданного после запуска create-react-app приложения

Index.js - это главный наш файл, в который мы будем собирать всё наше приложение. В нём импортируются сам React, а также ReactDOM

Так выглядит его содержимое в базовой версии:

Код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
);

reportWebVitals();

В папке public находится файл index.html, в теле которого есть единственный блок div c идентификатором id = "root", именно в него и будет рендериться наше приложение:

Код

<div id="root"></div>

Таким образом, базовая структура нашего приложения готова.

КОММЕНТАРИИ (0)

ТЕГИ МАТЕРИАЛА
Create React App
РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)