🚀 Как да структурирате проект в React 📄

Въведение:

React е популярна JavaScript библиотека за изграждане на потребителски интерфейси и е важно да структурирате проекта си по начин, който го прави лесен за управление и поддръжка. В това ръководство ще ви покажем как да структурирате React проект, използвайки подход с три изгледа, който ще ви помогне да визуализирате различните компоненти на вашия проект. Ще разгледаме и някои най-добри практики за организиране на вашия код и ресурси.

Изглед 1: Структура на проекта

1. Основна директория

Основната директория на вашия React проект трябва да съдържа всички основни файлове, включително:

package.json: Този файл съдържа метаданни за вашия проект, като неговото име, версия и зависимости.
README.md: Този файл предоставя преглед на вашия проект и включва информация как да го инсталирате и използвате.

2. Директория на компонентите

Директорията на компонентите трябва да съдържа всички компоненти на React във вашия проект. Всеки компонент трябва да бъде отделна папка със собствен index.js файл, който експортира компонента. Например:

// components/Button.js
import React from 'react';
const Button = () => {
  return <button>Click me!</button>;
};
export default Button;

3. Директория с помощни средства

Директорията utils трябва да съдържа всички помощни функции и помощници във вашия проект. Те могат да включват неща като валидиране на формуляр, манипулиране на данни или други различни функции. Например:

// utils/validateForm.js
function validateForm(formData) {
  const errors = {};
  if (!formData.name) {
    errors.name = 'Required';
  }
  if (!formData.email) {
    errors.email = 'Required';
  }
  return errors;
}

4. Директория за стилове

Директорията за стилове трябва да съдържа всички CSS файлове във вашия проект, включително глобални стилове и специфични за компонентите стилове. Например:

// styles/global.css
body {
  font-family: Arial, sans-serif;
}

// styles/button.css
button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

5. Директория със скриптове

Директорията със скриптове трябва да съдържа всички JavaScript файлове във вашия проект, включително библиотеки на доставчици и специфичен за приложението код. Например:

// scripts/vendor.js
import React from 'react';
import ReactDOM from 'react-dom';

export default function() {
  return <div>Vendor library</div>;
}

6. Индекс файл

Файлът index.html трябва да съдържа входната точка за вашето приложение, което обикновено е ReactDOM.render() извикване. Например:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="scripts/index.js"></script>
</body>
</html>

Изглед 2: Структура на компонента

Сега, след като разгледахме цялостната структура на React проект, нека да разгледаме по-отблизо как да структурираме отделните компоненти. Ето някои най-добри практики, които да следвате:

1. Използвайте папка за всеки компонент

Всеки компонент трябва да бъде отделна папка със собствен index.js файл, който експортира компонента. Това улеснява управлението и поддържането на вашия код, както и поддържането на свързаните файлове заедно. Например:

// components/Button.js
import React from 'react';

const Button = () => {
  return <button>Click me!</button>;
};

export default Button;

2. Използвайте описателно име за папката на компонента

Името на папката трябва да е описателно и да показва какво прави компонентът. Например: components/Button за компонент на бутон.

3. Запазете кода на компонента във файла `index.js`

Файлът index.js трябва да съдържа целия код за компонента, включително всички функции за изобразяване или реквизити. Това улеснява управлението и поддържането на вашия код, както и поддържането на свързаните файлове заедно. Например:

// components/Button.js
import React from 'react';

const Button = () => {
  return <button>Click me!</button>;
};

export default Button;

4. Използвайте последователна конвенция за именуване на компонентни файлове

Използвайте последователна конвенция за именуване на index.js файловете във вашия проект, като например използване на ComponentName за името на файла и ComponentName за името на променливата. Например:

// components/Button.js
import React from 'react';

const Button = () => {
  return <button>Click me!</button>;
};

export default Button;

5. Използвайте описателно име за компонента във файла `index.js`

Името на компонента във файла index.js трябва да е описателно и да показва какво прави компонентът. Например: Button за компонент на бутон.

Изглед 3: Заключение

В това ръководство разгледахме как да структурирате React проект, като използвате подход с три изгледа. Също така обсъдихме най-добрите практики за организиране на вашия код и ресурси. Като следвате тези указания, можете да създадете добре структуриран и поддържаем React проект, който отговаря на нуждите на вашите потребители.

👉 Референции:

„Реагиране на документация“

Вижте също:

Нови материали

Как да предотвратите влизането на някой от вашата кодова база

// TLDR TypeScript добавя статично въвеждане към JavaScript, улавяйки грешки като препращане към променливи извън обхвата или извикване на функции с грешни аргументи. Той е несъвършен и има..

Анализ на настроението с помощта на логистична регресия и наивен Бейс

Нека сравним кой алгоритъм е по-добър за класифициране на туитовете въз основа на техните чувства. Наблюдаван ML При контролираното машинно обучение обикновено имате вход X, който влиза във..

Нови тенденции в AI и спорта

Изкуственият интелект е авангардна технология, която дава възможност на машините да изпълняват задачи, които обикновено изискват човешки интелект, като вземане на решения, разпознаване на реч и..

Графични теоретични алгоритми

Автори:- Yash Gaherwar , Tanishq Deshpande , Devanshu Dalal , Avinash Dhakne В тази статия ще обсъдим една от най-важните теми на „ Анализ на дизайна на алгоритми“ , т.е. Графика . Ще..

Samsung и услугата Polyfill

Като разработчик харесвам услугата polyfill. Използвайки го, поправих стари проблеми със съвместимостта на IE, като добавих един маркер за скрипт. Полифилът е скрипт, внедряващ функция от..

Оцветяване на графика Sudoku с Neo4j

Бях щастлив да видя, че скорошна версия на графичните алгоритми Neo4j съдържа алгоритъма за оцветяване K-1 . Този алгоритъм се опитва да присвои цветове на възлите на графика по такъв начин, че..

Как преподавате физика на модели за машинно обучение?

Хибридни анализи: Комбиниране на най-доброто от два свята В другите си публикации съм обхванал теми като: Машинно обучение за откриване на аномалии и мониторинг на състоянието , как..

Етикети

Machine Learning JavaScript Data Science Artificial Intelligence Coding Software Development Web Development Python Deep Learning AI React Java Software Engineering Computer Science Algorithms Nodejs Typescript Data Productivity Development Programming Languages Computer Vision Neural Networks Reactjs Front End Development Learning To Code NLP Javascript Tips CSS Tutorial ChatGPT Angular Tech Mathematics Golang DevOps Statistics Business