Привет, выглядывает,

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

В моем путешествии по разработке было разработано крупномасштабное реагирующее приложение, в котором ваша файловая структура очень важна.

Перед запуском, почему файловая структура важна?

  1. Поможет вам быстро найти ваши файлы в будущем.
  2. Другие разработчики могут понять ваши файлы и не столкнутся с большими трудностями
  3. Легко для отладки
  4. Что еще более важно, чистый код, поскольку он позволяет вам четко общаться со следующим человеком, который будет работать с тем, что вы написали.

Начнем с приложения для реагирования

Шаг: 1 Создайте приложение React

npx create-react-app catalysts
cd catalysts

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

Шаг 2. Удалите ненужное

когда вы создаете приложение для реагирования, используя приложение create response, которое вы

Пока нам не нужно

в источнике

  • Приложение.test.js
  • логотип.svg
  • отчетWebVitals.js
  • setupTests.js

В App.js удалите каждый предварительно написанный код, вы получите app.js, как показано ниже.

Шаг 3. Создайте папки для улучшения файловой структуры

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

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

  1. страницы

Разделите страницы на папки, которые снова содержат файлы js и css/scss этой конкретной страницы.

2. компоненты

Эта папка содержит папку js и css/scss конкретного компонента реагирующего приложения.

3. маршрутизатор

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

4. активы

Содержит различные активы, необходимые для проекта, разделенные по папкам в зависимости от типа актива, будь то изображение, видео, шрифт и т. д.,

5. утилиты

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

6. крючки

иногда бывает, что вам нужно создать свой собственный хук, доступ к которому будет глобальным, если мы создадим его как отдельный файл. Например: useLocalStorage()

7. помощники

В этой папке мы храним вспомогательные функции, которые можно использовать в реагирующем приложении.

8. scss (необязательно)

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

После разделения файлов на основе папки, на которую вы реагируете, приложение должно выглядеть так

Шаг 4: настройка router.js и routerConfig.js

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

ваш файл routerConfig.js будет выглядеть так после завершения настройки этого файла

export const ROUTES = {
Home:'/home',
About:'/about'
}

и переходим к router.js

перед настройкой установите react router dom здесь мы использовали react-router-dom v6

npm i react-router-dom

Тогда ваш router.js держит

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import About from '../pages/About/About';
import Home from '../pages/Home/Home';
import { ROUTES } from './RouterConfig';
const Router = () => {

const RouteWithRole = ({ Element }) => {
return (
<>
  <Element/>
</>        
);}   
return ( 
   
<div>   
     
  <Routes> 
           
    <Route exact path={ROUTES.Home} element={<RouteWithRole 
     Element={Home} />}></Route>     
       
    <Route exact path={ROUTES.About} element={<RouteWithRole
     Element={About} />}></Route>  
      
   </Routes>  
  
</div>  
)} 

export default Router

Шаг 5. Начните использовать свое приложение

вы можете начать использовать приложение, запустив

npm start

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

нажмите здесь, чтобы перейти в репозиторий.

Подпишитесь, если считаете эту статью полезной.