Notas de estudio de React-day01

Resumen de reacción

reaccionar-introducción

biblioteca javascript para construir interfaces de usuario,

https://reactjs.org/

https://react.docschina.org/ (chino)

React es una biblioteca de JavaScript para crear interfaces de usuario (IU, simplemente entendida como: páginas HTML)
Si lo mira desde la perspectiva de mvc, React es solo una solución para la capa de visualización (V). Es decir, solo es responsable de la representación de la vista y no proporciona funciones completas de M y C.
reaccionar/reaccionar-dom/reaccionar-enrutador/redux: 框架
React se originó a partir del proyecto interno de Facebook (News Feed, 2011) y luego se usó para crear el sitio web de Instagram (2012) y se presentó en mayo de 2013.
React es uno de los marcos de desarrollo front-end más populares, otros: Comparación de Vue, Angular y otros marcos
La diferencia con vue: tengo entendido que vue proporciona más componentes y encapsulación funcional, mientras que React tiende a ser de más bajo nivel y requiere habilidades js más altas

características de reacción

1. IU declarativa

Solo necesita describir cómo se ve la interfaz de usuario (HTML), al igual que escribir HTML

const aa = <div className="app">
    <h1>Hello React! 动态数据变化:{count}</h1>
</div>

El estilo declarativo corresponde al estilo imperativo, el estilo declarativo se enfoca en qué y el estilo imperativo se enfoca en cómo

2. Componentización

Los componentes son el contenido más importante en reaccionar
Los componentes se utilizan para representar partes del contenido de una página.
Combine y reutilice múltiples componentes para realizar funciones de página completas

inserte la descripción de la imagen aquí

(todo en reaccionar es un componente)

3. Aprende una vez, úsalo en cualquier lugar

Use react/rect-dom para desarrollar aplicaciones web
Use react/react-native para desarrollar aplicaciones móviles nativas (react-native) RN Flutter de aplicaciones para Android e ios
Use reaccionar para desarrollar aplicaciones VR (realidad virtual) (react360)

Reaccionar andamiaje (CLI)

Introducción al andamiaje React
Crear un proyecto usando el andamio de React
Ajuste de la estructura del directorio del proyecto
npm i -g @vue/cli Reaccionar andamiaje (CLI)
- Introducción al andamiaje React
- Crear un proyecto usando el andamio de React
- Ajuste de la estructura del directorio del proyecto
- npm i -g @vue/cli (vue) => npm i -g crear-reaccionar-aplicación(reaccionar)
- vue crear xxx (vue) => crear-reaccionar-aplicación xxx(reaccionar)
Introducción al andamiaje React
- Andamio: una plataforma de trabajo preparada para garantizar el buen desarrollo de cada proceso de construcción
- Para el desarrollo de proyectos front-end, scaffolding es una plataforma de desarrollo configurada para garantizar el progreso sin problemas del proceso de desarrollo de proyectos front-end.
- El significado de andamio:
  - El desarrollo front-end moderno se está volviendo cada vez más maduro y necesita depender de varias herramientas, como webpack, babel, eslint, sass/less/postcss, etc.
  - La configuración de herramientas es engorrosa y repetitiva, y las configuraciones entre proyectos son similares
  - Etapa de desarrollo, lanzamiento del proyecto, diferentes configuraciones
    - Antes de que comience el proyecto, ayúdelo a configurar un estante, ahorrando la engorrosa configuración del paquete web
    - Durante el desarrollo del proyecto, la actualización en caliente, el formato del código, la verificación automática del formato del código cuando se envía git, etc.
    - Cuando se lanza el proyecto, el empaquetado automático con un clic, que incluye: compresión de código, optimización, carga bajo demanda, etc.
Crear un proyecto usando el andamio de React
- Orden:npx create-react-app react-basic
  - npx create-react-app es un comando fijo y create-react-appes el nombre del andamio React
  - react-basic representa el nombre del proyecto, que se puede modificar
- Iniciar el proyecto: yarn startonpm run start
- npxEs un nuevo comando agregado en npm v5.2 para simplificar el uso de kits de herramientas en npm
  - Original: 1 instalación global npm i -g create-react-app2 creación de un proyecto React a través de comandos de scaffolding
  - Ahora: npx llama a la última aplicación create-react-app para crear directamente proyectos React
Descripción y ajuste de la estructura del directorio del proyecto
- ilustrar:
  - srcEl directorio es el directorio donde escribimos el código para el desarrollo del proyecto.
  - Echa un vistazo package.jsona las dos bibliotecas principales: react, react-dom(el scaffolding se ha instalado para nosotros, podemos usarlo directamente)
- Ajustamiento:
  1. Eliminar todos los archivos en el directorio src
  2. Cree un archivo index.js como el archivo de entrada del proyecto y escriba el código React en este archivo
Uso básico de React

Los pasos básicos
- Pasos para el uso
```
- 导入react和react-dom     
- 创建react元素(虚拟DOM)
- 渲染react元素到页面中
```
- importar reaccionar y reaccionar-dom
```
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
```
- crear elemento de reacción
```
// 创建元素
const title = React.createElement('h1', null, 'hello react')
```
- Renderizar elementos de reacción a la página.
```
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
```
entero
```
import React from "react";
import ReactDom from "react-dom"

// 创建 虚拟DOM
// React.createElement('标签名',{标签属性：class建议写成className}，标签内容)
const vNode= React.createElement('div',{
      
      id:'aa'},'盒子')

//渲染到页面中
// ReactDom.render（元素，挂载对象）
ReactDom.render(vNode,document.getElementById("root"))
```
Uso básico de JSX

El problema con createElement
- engorroso y poco conciso
- No intuitivo, incapaz de ver la estructura descrita de un vistazo
- No elegante, mala experiencia de desarrollo.

inserte la descripción de la imagen aquí

JSX

JSXSí JavaScript XML, abreviatura, lo que significa escribir código en formato XML (HTML) en código Javascript

Ventajas: La sintaxis declarativa es más intuitiva y tiene la misma estructura que HTML, lo que reduce los costos de aprendizaje y mejora la eficiencia del desarrollo.

JSX es el contenido central de reaccionar

Nota: JSX no es una sintaxis JS estándar, sino una extensión de sintaxis de JS. El paquete @babel/plugin-transform-react-jsx integrado en el scaffolding se usa para analizar la sintaxis.
inserte la descripción de la imagen aquí

Pasos para el uso

- 导入react和reactDOM包
- 使用jsx语法创建react元素
- 把react元素渲染到页面中

importar reaccionar y reaccionarDOM

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

crear elemento de reacción

// 创建元素
const title = <h1 title="哈哈"></h1>

renderizar elemento

// 渲染元素
ReactDOM.render(title, document.getElementById('root'))

Notas sobre JSX

La sintaxis jsx solo se puede usar en scaffolding
- Porque JSX necesita ser compilado y procesado por babel antes de que pueda usarse en el navegador. El andamio ya tiene esta configuración por defecto.
JSX debe tener un nodo raíz,<></> <React.Fragment></React.Fragment>
Los elementos sin hijos pueden />terminar de usar
La sintaxis en JSX está más cerca de JavaScript
- class=====>className
- for========>htmlFor
JSX puede envolver líneas. Si JSX tiene varias líneas, se recomienda envolver ()JSX para evitar el error de insertar puntos y comas automáticamente.

Use el complemento más bonito para formatear el código de reacción

instalar complemento
Añadir una configuración más bonita

// 保存到额时候用使用prettier进行格式化
"editor.formatOnSave": true,
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",