1. Andamios para crear proyectos
1.node -v
2.npm install -g create-react-app 安装脚手架
3.create-react-app my-react
4.cd my-react
5.npm startEjecutar exitosamente
2 Ver catálogo
archivo de entrada index js
3. Se introduce el componente app.js y el lugar donde está escrita la página.
3. Escriba valores dinámicamente
4.Introducir componentes
1. Cree componentes y coloque en ellos los componentes necesarios. También utilice componentes funcionales.
2.Introducido en app.js
Muy simple, solo importa y llama a <Home/>
5. Valor de aprobación del componente
componente principal app.js
Subconjunto
Controlar el tipo de valor pasado por el componente, verificación de tipo
7.Ranura para componentes
8. Componentes funcionales y componentes de clase
Todo lo anterior está escrito a través de componentes funcionales, entonces, ¿cómo lo convertimos en un componente de clase?
Primero, echemos un vistazo a las diferencias entre los dos:
1. Un componente de función es una función pura que recibe un objeto de accesorios y devuelve un elemento de reacción, mientras que un componente de clase necesita heredar React.Component y crear una función de representación para devolver un elemento de reacción.
2. Los componentes de función no tienen un ciclo de vida ni un estado, pero los componentes de clase sí.
Para ampliar nuestro componente Inicio, ahora convertimos el componente Inicio en un componente de clase.
Cambios de escritura:
"resultar ser"
9. Agregar eventos
1. Agregue un botón para nosotros. Ahora usamos clase, por lo que usamos orientado a objetos para crear un método de evento que opere la edad ➕
10. Introduzca el estado y cambie los valores de forma receptiva en la página.
11. Los subcomponentes pasan valores como los componentes principales.
Ejemplo: pasar la edad del componente secundario al componente principal
Subconjunto:
12. Transferir valores entre componentes.
Por ejemplo, el valor del encabezado se define en el componente hermano.
Idea: el valor del encabezado lo pasa el componente principal
El componente hermano home pasa el valor al componente principal, el componente principal lo recibe y luego lo pasa al encabezado del componente secundario.
Subcomponente: header.js
13. Enlace de datos bidireccional
Después de ingresar contenido en el cuadro de entrada, el valor exterior también cambiará en consecuencia.
Subconjunto:
14.hooks
reaccionar-hooks Los ganchos se llaman ganchos. Las funciones de gancho son una idea de programación. Las llamamos programación orientada a aspectos.
(POA)
1. Programación orientada a procesos (llamada de una función)
2. Programación orientada a objetos (basada en objetos (abstracción, encapsulación, herencia, polimorfismo))
3. La programación orientada a aspectos AOP (vue.js reaccionar) proporciona un ciclo de vida. Estas funciones se denominan funciones de enlace. La función de la función de enlace es expandir las capacidades del producto. Vue expone la interfaz abierta de la función de enlace al usuario , y el usuario puede usar y luego ir a una ejecución específica)
4. Programación orientada a interfaz (programación API), esta forma de separación de front-end y back-end es programación orientada a interfaz
5. Programación funcional (las matemáticas son muy exigentes y son indispensables si quieres avanzar mucho en el front-end)
Entonces, ¿qué son los ganchos de reacción?
En reaccionar, los componentes se dividen en 2 categorías principales, 1 es componente funcional 2. Componente de clase (estado, setState)
La mayor diferencia: los componentes de clase tienen su propio estado, mientras que los componentes de función no tienen estado.
Todo el mundo encuentra que los componentes funcionales son más sencillos de escribir, por lo que todos esperan utilizar componentes funcionales para escribir componentes de clase.
Entonces, ¿se pueden utilizar componentes funcionales en lugar de componentes de clase?
Solo usa ganchos si puedes
1.Cambiar estado
Reaccionar enrutamiento de configuración
---- La idea general es: configurar el enrutamiento en el archivo de enrutamiento, luego importar el archivo de enrutamiento a App.js y finalmente importar App.js a index.js en src.
Dependencias de enrutamiento:
cnpm install [email protected] --save (instale versiones inferiores a 6.0, porque algunos atributos se han iterado en versiones superiores a 6.0)
3. Crea dos páginas nuevas.
4. Cree una nueva carpeta de enrutador y un archivo index.js y configure el enrutamiento.
--Importar componentes requeridos:
--Ruta de importación:
--Utilice el paquete BrowserRouter para configurar el enrutamiento en el renderizado
7.Uso
Utilice Bootstrap para crear una página, guía de configuración de Bootstrap http://t.csdn.cn/6ayKf
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default class login extends Component {
submin() {
this.props.history.replace('/Home')
}
render() {
return (
<div>
<Link to='/Home'>home</Link>
<form onSubmit={this.submin.bind(this)}>
<div className="form-group">
<label >账号：</label>
<input type="text" className="form-control" id="exampleInputEmail1" placeholder="输入账号"></input>
</div>
<div className="form-group">
<label >密码：</label>
<input type="password" className="form-control" id="exampleInputPassword1" placeholder="输入密码"></input>
</div>
<button type="submit" className="btn btn-info">登录</button>
<button type="reset" className="btn btn-danger" onClick={this.rest}>重置</button>
</form>
</div>
)
}
}Nota: El salto de enlace se puede utilizar directamente o se puede utilizar el salto de evento.
El formulario del ejemplo utiliza el marco Bootstrap; configure las dependencias con anticipación.