Descripción del proyecto React

Un proyecto React típico está compuesto por múltiples archivos y carpetas, y cada parte tiene su función específica.

Este capítulo dará una explicación básica del código de un proyecto React, para ayudar a todos a comprender la estructura del proyecto y las funciones de cada parte.

  • Un proyecto React está compuesto por varios archivos y carpetas; los archivos centrales incluyen:index.html、index.jsyApp.js。

  • Los componentes de React son los bloques de construcción básicos de una aplicación; pueden ser componentes de función o componentes de clase.

  • JSX es la sintaxis central de React, utilizada para describir la interfaz de usuario (UI).

  • Props y State son las principales formas de gestionar datos en los componentes de React.

Estructura del proyecto

Un proyecto React normalmente incluye los siguientes archivos y carpetas:

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           # 项目说明文档

Análisis de archivos centrales

public/index.html

public/index.htmlEs el archivo de plantilla HTML de la aplicación React.

React renderiza los componentes en<div id="root"></div>.

React renderiza los componentes en
.

Ejemplo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

src/index.jsEs el archivo de entrada de la aplicación React.

src/index.jsSe encarga de renderizar el componente raíz (normalmente App) en el div#root de index.html.

Ejemplo

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

src/App.js

src/App.jsEs el componente raíz de la aplicación React.

src/App.jsNormalmente contiene la lógica y la estructura principal de la aplicación.

Ejemplo

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

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

src/App.css

src/App.css Es el archivo de estilos del componente App.

Ejemplo

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

src/index.css

src/index.cssEs el archivo de estilos globales, normalmente utilizado para definir estilos globales o restablecer los estilos predeterminados del navegador.

Ejemplo

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

package.json

package.jsonEste es el archivo de configuración del proyecto, que contiene los metadatos, dependencias y scripts del proyecto.

Ejemplo

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start", // Iniciar el servidor de desarrollo
    "build": "react-scripts build", // Compilar el código de producción
    "test": "react-scripts test",   // Ejecutar pruebas
    "eject": "react-scripts eject"  // Expulsar configuración (uso avanzado)
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

Estructura básica de los componentes de React

Los componentes de React son los bloques de construcción centrales de una aplicación React.

Un componente normalmente contiene las siguientes partes:

1. Componente de función

Un componente definido mediante una función.

Ejemplo

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h2>Este es un componente definido por función.</h2>
    </div>
  );
}

export default MyComponent;

Explicación:

  • import React from 'react';: Se importa la librería React, que es una librería de JavaScript para construir interfaces de usuario.

  • function MyComponent() { ... }: Este es un componente de función. Un componente de función es una función de JavaScript que devuelve JSX.

  • return (...): del componentereturnLa sentencia devuelve un elemento JSX. JSX es una extensión de sintaxis de JavaScript que te permite escribir código similar a HTML en JavaScript.

  • export default MyComponent;: ExportaMyComponentel componente como exportación predeterminada. De esta manera, otros archivos puedenimport MyComponent from './MyComponent';importar y usar este componente.

2. Componente de clase

Ejemplo

Ejemplo

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h2>Ejemplo</h2>
      </div>
    );
  }
}

export default MyComponent;

State es el estado interno de un componente, utilizado para gestionar los datos del componente.

  • import React from 'react';Ejemplo (usando el Hook useState)

  • import { Component } from 'react';Flujo de ejecución del proyecto ReactComponentIniciar el servidor de desarrolloComponentEjecuta

  • class MyComponent extends Component { ... }, iniciando el servidor de desarrollo.MyComponentAbre el navegador y visita http://localhost:3000 para ver la aplicación.ComponentCompilar el código de producción

  • render() { ... }: renderEjecuta

    • return (...), generando el código de producción optimizado.

    • <div><h2>这是一个类组件</h2></div>Ejecutar pruebasdivEjecutah2, ejecutando los casos de prueba del proyecto.

  • export default MyComponent;Otras extensionesMyComponentIA pensando...import MyComponent from './MyComponent';React: crear el primer proyecto

3、JSX

Cuestionario de React

Ejemplo

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

4、Props

Haz clic para compartir notas

Ejemplo

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

5、State

Cancelar

Ejemplo (usando el Hook useState)

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Flujo de ejecución del proyecto React

Iniciar el servidor de desarrollo

Correo electróniconpm startoyarn startCorreo electrónico (obligatorio)

Dirección de referencia

Compilar el código de producción

se ejecutanpm run buildoyarn build, generando el código de producción optimizado.

Ejecutar pruebas

se ejecutanpm testoyarn test, ejecutando los casos de prueba del proyecto.

Otras extensiones