Изучение структуры папок Create-React-App: подробное руководство

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

  1. Каталог src:
    В каталоге src находится большая часть кода вашего приложения. Он содержит следующие важные файлы и папки:

  • index.js: точка входа вашего приложения, где отображается компонент React.
    Пример кода:

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

  • App.js: основной компонент вашего приложения, служащий корневым компонентом.
    Пример кода:

    import React from 'react';
function App() {
return (
<div>
  {/* Your application content */}
</div>
);
}
export default App;

  • Компоненты: каталог для хранения повторно используемых компонентов React.
    Пример кода:

    import React from 'react';
function MyComponent() {
return <div>My Component</div>;
}
export default MyComponent;

  • Стили: каталог для хранения файлов CSS или SCSS для стилизации ваших компонентов.
    Пример кода:

    .myComponent {
/* Styles for MyComponent */
}
  1. Общественный каталог:
    Общий каталог содержит файлы, общедоступные для вашего приложения. Он включает в себя следующие файлы:

  • index.html: основной HTML-файл, который служит точкой входа для вашего приложения.
    Пример кода:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

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

  1. Каталог node_modules:
    В каталоге node_modules устанавливаются зависимости вашего проекта. Он создается автоматически при запуске npm installили yarn installдля установки зависимостей проекта.

  2. Файл package.json:
    Файл package.json содержит метаданные о вашем проекте и список его зависимостей.
    Пример кода:

    {
"name": "my-react-app",
"version": "1.0.0",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}

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