Структурирование - самая важная часть перед началом любого проекта. Лучше всего структурировать код по модульному принципу. Так как если у вас несколько страниц - вы создаете для них модули, а на странице у вас есть разные блоки, вы должны создавать для них компоненты для возможность повторного использования.

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

Давайте начнем с создания приложения React JS и того, как мы можем структурировать код внутри нашего приложения.

npm install -g create-react-app

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

Для получения дополнительной информации: документация

create-react-app react-structure
Перейти в созданную им папку. Для этого мы использовали структуру реакции имени приложения, следовательно,

cd react-structure
Следующая команда запустит приложение в режиме разработки.
npm start
Это запустит приложение в вашем браузере. Вы можете редактировать App.js и видеть изменения в браузере.
Теперь возникает вопрос: как вы структурируете свой код? Это зависит от требований проекта, но есть несколько распространенных способов, которые вы должны использовать для улучшения и поддерживаемого кода.
Здесь я рассмотрю несколько требований, которые являются общими для некоторых приложений.

  • Добавление маршрутов в ваше приложение
  • Добавление Bootstrap
  • Конфигурация Webpack

Добавление маршрутов в приложение

Для навигации вы должны интегрировать маршруты, и в реакции react-router - это тот.
Вы можете добавить его, запустив:
npm i react-router — save
 Для сложного приложения я предлагаю создать другой файл маршрутов, определить их все и вставить в основной файл.
Здесь я использовал маршруты Switch для response-router. Для дополнительных опций Switch.

 <Switch>
   <Route exact path=’/’ component={Home}/>
   <Route exact path=’/login’ component={Login}/>
 </Switch>

Таким образом, компонент по умолчанию на маршруте «/» будет отображать компонент Home, и если маршрут изменится на «/ login», будет отображаться компонент входа в систему.

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

<Header />
   <Switch>
     <Route exact path=’/’ component={Home}/>
     <Route exact path=’/login’ component={Login}/>
    </Switch>
 <Footer />

Теперь ваш компонент имеет простой HTML-код без стилизации. Итак, давайте начнем с добавления стиля.

Добавление Bootstrap

Доступен модуль для реакции, поэтому нам просто нужно добавить его в наше приложение.
npm i react-bootstrap — save
Теперь вы можете использовать компоненты и стили начальной загрузки в компонентах. А перед этим вам нужно добавить загрузочный css в свое приложение, и это можно сделать, добавив следующую строку в index.html
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />

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

Для лучшего понимания я реализовал Table, Login и Sign in Form с маршрутами, реализованными ранее. (Ссылка на Github находится в конце статьи.)

Конфигурация Webpack

Теперь первый вопрос: почему мы должны использовать webpack? И как?
Давайте сначала обсудим, почему.
Webpack - это сборщик модулей для приложений JavaScript, который выполняет минификацию вашего кода, который может быть JS-файлами, CSS, изображениями или HTML. И все может быть модулем с использованием веб-пакета, который разделяет код на куски и загружает их, когда вам это нужно.

В create-response-app, webpack или babel они предварительно настроены, поэтому вам не нужно устанавливать его, просто извлеките его. Вы можете выбросить его

npm run eject

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

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

npm run-script build

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

Вот код для демонстрации: github

Далее я настрою веб-пакет с нуля для приложения React.
Следите за обновлениями !!