Aprenda la serie de reacciones desde 0 - Sección 2: Cree la página de inicio del blog con componentes

Aprenda la serie de reacciones desde 0 - Sección 1 Se ha y luego, comenzando desde la página de inicio, agregue gradualmente componentes para el desarrollo.

Antes de comenzar, instale las herramientas de desarrollo de reacción

Antes de comenzar, instalemos las herramientas de desarrollo de reacción del navegador. Cuando abramos el proyecto de reacción antes de la instalación, aparecerá un mensaje en la consola que nos permitirá instalar las herramientas de desarrollo. Para ver mejor los componentes de React y las propiedades de los componentes, el estado y otra información.

Primero, abrimos el sitio web oficial , https://react.dev/learn/react-developer-tools, y lo instalamos de acuerdo con el navegador que uses. Si haces clic en el navegador Chrome, puedes instalarlo directamente en la extensión. página. Después de la instalación, cierre la herramienta de desarrollo y ábrala nuevamente con F12, y podrá ver las dos nuevas herramientas de desarrollo de React en la última pestaña.

inserte la descripción de la imagen aquí

1. Análisis de la estructura de la página de inicio

Barra de navegación del logotipo superior
Banner descripción gráfica o carrusel
Lista de los últimos artículos
barra lateral
- Tabla de clasificación de artículos
- Últimos artículos de revisión
pie de página

2. Preparación de herramientas relacionadas con el estilo.

Cómo funcionan las variables CSS var()

Consulte el sitio web oficial para las variables CSS3 : https://www.w3school.com.cn/css/css3_variables.asp

Lo primero es lo primero: las variables CSS pueden tener un alcance global o local.

Las variables globales se pueden acceder/usar en todo el documento, mientras que las variables locales solo se pueden usar dentro del selector que lo declara.

Para crear una variable con alcance global, declárela en el selector :root. El selector :root coincide con el elemento raíz del documento.

Para crear una variable con alcance local, declárela en el selector que la usará.

:root {
    
    
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
    
     background-color: var(--blue); }

h2 {
    
     border-bottom: 2px solid var(--blue); }

.container {
    
    
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
    
    
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Preprocesador Sass, instalar y usar sass

Para usar sass en React, primero debe instalar node-sass. Abra una terminal e ingrese el comando

$ npm i [email protected] -D

Debido a problemas de compatibilidad, instalamos la versión 4.14.1. Tenga en cuenta que debe verificar la versión correspondiente de node.js.

Si la instalación no tiene éxito y se informa un error, puede intentar desinstalar el nodo-sass existente en el proyecto primero y luego instalar

$ npm uninstall node-sass
$ npm i [email protected] -D

Solía usar una versión node.js18 del terminal que era demasiado alta. Después de informar un error, instalé una versión node.js14 usando nvm e intenté nuevamente.

Tutorial de gramática de Sass: https://www.sass.hk/guide/, el uso de sass puede facilitar el anidamiento de estilos, definir variables y otras operaciones.

3. La siguiente sección comienza a entrar formalmente en el desarrollo de componentes

Tomó mucho tiempo instalar herramientas y node-sass, ¡vamos aquí primero y comencemos el desarrollo de componentes en la siguiente sección!

Se seguirán registrando más artículos en esta serie.
Imagen de portada