La premisa es que ha instalado el andamio de reacción, si no sabe cómo buscar aquí, créelo ~
Tabla de contenido
Pregunta 1: ¿Cómo crear un componente de saludo simple?
Pregunta 3: ¿Cómo agregar estilos?
Pregunta 1: ¿Cómo crear un componente de saludo simple?
1. Definir un hola.js
// 引入react库，创建“外壳”组件app
import React, { Component } from "react";
// 定义hello组件并暴露
export default class Hello extends Component {
render() {
return <h3>hello,这是我的 第一个react组件！</h3>
}
}2. Introducir en app.js
mira el efecto
Pregunta 2, qué hacer si hay demasiados componentes, se ve desorganizado directamente debajo de src. ¿Como lidiar con?
Respuesta: cree una carpeta de componentes y coloque los componentes de reacción en esta carpeta.
Al mismo tiempo, la ruta importada también debe modificarse.
Pregunta 3: ¿Cómo agregar estilos?
Crear un nuevo archivo css
Luego impórtelo en hello.js. Tenga en cuenta que el nombre del sufijo no se puede omitir al introducir css. Solo los archivos js o jsx pueden omitir el sufijo.
Por lo tanto, hello.css debe introducirse así , lo anterior es una introducción incorrecta
Pregunta 4: Cuando hay más y más componentes, los js y css de todos los componentes se mezclan, lo que se ve muy desordenado. ¿Cómo lidiar con eso?
Respuesta: Puede volver a crear la subcarpeta Hello en components y poner los js y css relacionados con el componente hello. El nombre del archivo se escribe mejor en mayúscula, lo que significa que es un componente , lo cual es mucho más conveniente.Podemos crear múltiples carpetas para administrar múltiples componentes
Pregunta 5: El archivo js del componente en reaccionar y el archivo js de función pura ambos terminan con js, ¿cómo distinguirlos?
Método (1): nombrar, poner en mayúscula la primera letra del archivo del componente js, que representa el componente js
Método (2): nombre del sufijo, puede cambiar directamente el nombre del sufijo del archivo js del componente a jsx, por supuesto, los sufijos js y jsx se pueden omitir al importar
Pregunta 6: Podemos ver que es problemático introducir componentes en el archivo app.js y hay muchos nombres duplicados ¿Cómo solucionarlo?
Es muy simple, cambie el nombre y cambie uniformemente el nombre del componente debajo de la carpeta para indexar
En este momento, se puede omitir el índice al introducirlo, lo cual es mucho más conciso.
Pregunta 7: Cuando dos componentes contienen el mismo nombre de clase y se introducen en app.js al mismo tiempo, se producirá un conflicto de estilo. ¿Cómo solucionarlo?
Primero creamos otro componente de Prueba
Al igual que el componente hola, agregue una clase llamada título y defínala como amarilla
Introducido en app.js
Guarde y mire el efecto, vemos que los colores de fondo de los dos componentes se han vuelto iguales, y se prefiere el estilo del nombre de la clase introducido más adelante.
¿Cómo resolver? Esto implica el problema de los conflictos de estilo .
Método (1): puede nombrar directamente el nombre css del componente hello como index.module.css
Luego, el método cambiará cuando se presente, y debe prestar atención al usarlo.
Es normal después de actualizar
Método (2): use less para definir un nombre de clase general para cada componente y luego anide y escriba estilos. Por supuesto, el segundo método se usa a menudo en el desarrollo real, y el primer método es relativamente engorroso.
.hello {
.title {
background: red;
}
}Pregunta 8: Cuando escribimos un componente, debemos introducir manualmente la biblioteca de reacción cada vez y luego usar la clase class para definir el componente, lo cual es bastante problemático. ¿Cómo resolverlo?
Respuesta: instale un complemento de vsocde y busque en vscode
Después de la instalación, haga clic en rcc (componente de clase de reacción significa el componente de clase en reacción) y aparecerá la plantilla del componente de clase
Después del retorno de carro, modifique el nombre del componente
Knock rfc (componente de función de reacción significa componente funcional en reacción)
