Описание проекта React

Типичный проект React состоит из множества файлов и папок, и каждая часть выполняет свою определённую роль.

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

  • Проект React состоит из множества файлов и папок. К основным файлам относятся:index.html、index.jsиApp.js。

  • Компоненты React — это базовые строительные блоки приложения; они могут быть функциональными компонентами или классовыми компонентами.

  • JSX — это основной синтаксис React, используемый для описания пользовательского интерфейса.

  • Props и State — основные способы управления данными в компонентах React.

Структура проекта

Проект React обычно включает следующие файлы и папки:

my-react-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── App.js          # 主组件
│   ├── App.css         # 主组件的样式
│   ├── index.js        # 项目入口文件
│   ├── index.css       # 全局样式
│   └── ...             # 其他组件和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

Анализ основных файлов

public/index.html

public/index.htmlЯвляется HTML-шаблоном приложения React.

React отобразит компонент в<div id="root"></div>внутри.

React отобразит компонент в
внутри.

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Приложение React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

src/index.jsЯвляется входным файлом приложения React.

src/index.jsОтвечает за рендеринг корневого компонента (обычно App) в div#root в index.html.

Пример

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

ReactDOM.render(
  <React.StrictMode>
    <Приложение />
  </React.StrictMode>,
  document.getElementById('root')
);

src/App.js

src/App.jsЯвляется корневым компонентом приложения React.

src/App.jsОбычно содержит основную логику и структуру приложения.

Пример

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Привет, React!</h1>
    </div>
  );
}

export default App;

src/App.css

src/App.css Это файл стилей для компонента App.

Пример

.App {
  text-align: center;
  margin-top: 50px;
}

src/index.css

src/index.cssЭто глобальный файл стилей, обычно используемый для определения глобальных стилей или сброса стилей браузера по умолчанию.

Пример

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

package.json

package.jsonЭто файл конфигурации проекта, содержащий метаданные проекта, зависимости и скрипты.

Пример

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start", // Запуск сервера разработки
    "build": "react-scripts build", // Сборка production-кода
    "test": "react-scripts test",   // Запуск тестов
    "eject": "react-scripts eject"  // Извлечь конфигурацию (для опытных пользователей)
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

Базовая структура React-компонентов

React-компоненты — это основные строительные блоки React-приложений.

Обычно компонент содержит следующие части:

1. Функциональные компоненты

Компоненты, определённые с помощью функций.

Пример

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h2>Это компонент, определённый с помощью функции.</h2>
    </div>
  );
}

export default MyComponent;

Пояснение:

  • import React from 'react';: Импортирована библиотека React; React — это JavaScript-библиотека для создания пользовательских интерфейсов.

  • function MyComponent() { ... }: Это функциональный компонент. Функциональный компонент — это функция JavaScript, которая возвращает JSX.

  • return (...): КомпонентаreturnИнструкция возвращает JSX-элемент. JSX — это расширение синтаксиса JavaScript, позволяющее писать HTML-подобный код на JavaScript.

  • export default MyComponent;: УказанныйMyComponentкомпонент экспортируется как экспорт по умолчанию. Таким образом, другие файлы могутimport MyComponent from './MyComponent';импортировать и использовать этот компонент.

2. Классовые компоненты

Компоненты, определяемые с помощью классов (сейчас менее распространены; рекомендуются функциональные компоненты).

Пример

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h2>Это классовый компонент.</h2>
      </div>
    );
  }
}

export default MyComponent;

Пояснение:

  • import React from 'react';: Импортируйте библиотеку React; это основа для использования React.

  • import { Component } from 'react';: Из библиотеки React импортируйтеComponentclass.ComponentЯвляется базовым классом для классовых компонентов React; все классовые компоненты должны наследовать его.

  • class MyComponent extends Component { ... }: Определён именованныйMyComponentклассовый компонент. Он наследуетComponentкласс, поэтому он может использовать возможности классовых компонентов React (такие как методы жизненного цикла, управление состоянием и т. д.).

  • render() { ... }: renderЭто метод, который должен быть реализован в класс-компоненте. Он отвечает за возврат структуры UI компонента (JSX).

    • return (...): Возвращает элемент JSX, описывающий UI компонента.

    • <div><h2>这是一个类组件</h2></div>: Это простая структура JSX, содержащаяdivиh2заголовок.

  • export default MyComponent;: УказанныйMyComponentкомпонент экспортируется как экспорт по умолчанию. Таким образом, другие файлы могутimport MyComponent from './MyComponent';импортировать и использовать этот компонент.

3、JSX

JSX — это расширение синтаксиса JavaScript, позволяющее писать HTML-подобный код на JavaScript.

Пример

const element = <h1>Hello, JSX!</h1>;

4、Пропсы

Пропсы — это входные параметры компонента, используемые для передачи данных от родительского компонента к дочернему.

Пример

function Welcome(props) {
  return <h1>Привет, {props.name}</h1>;
}

function App() {
  return <Welcome name="React" />;
}

5、Состояние

Состояние — это внутреннее состояние компонента, используемое для управления данными компонента.

Пример (использование хука useState)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Количество: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

export default Counter;

Процесс запуска проекта React

Запустите сервер разработки

Запуститеnpm startилиyarn start, чтобы запустить сервер разработки.

Откройте браузер и перейдите по адресу http://localhost:3000, чтобы просмотреть приложение.

Сборка production-кода

Запуститеnpm run buildилиyarn build, чтобы сгенерировать оптимизированный production-код.

Запуск тестов

Запуститеnpm testилиyarn test, чтобы выполнить тестовые сценарии проекта.

Другие расширения