1. Introducción a reaccionar
Sitio web oficial: Reaccionar (docschina.org)
reaccionar es un marco js desarrollado y mantenido por el equipo de desarrollo front-end de Facebook
La función de implementación de reaccionar es similar a VUE, pero debido a estilos de desarrollo extranjeros, los pasos de representación de datos no están encapsulados en reacción. Los desarrolladores necesitan usar más sintaxis es6 para completar manualmente la representación de datos, por lo que el código es más difícil que VUE .alto.
2. Ventajas y desventajas de reaccionar.
ventaja:
1. Todo es un componente: Casi todo el desarrollo en React se realiza utilizando componentes Beneficios: Mejora la reutilización y mantenibilidad del código.
2. Rápido: el mecanismo DOM virtual (DOM virtual) se proporciona en reaccionar
3. Compatibilidad entre navegadores: el uso de DOM virtual en React sin analizar directamente el DOM real resuelve el problema de la compatibilidad de navegadores entre dominios e incluso se puede usar en IE8.
4. Isomorfismo, JavaScript puro: casi todos los proyectos se desarrollan utilizando JavaScript
5. Flujo de datos unidireccional: React proporciona dos arquitecturas: flux y redux para construir un flujo de datos unidireccional.
defecto:
1. No es un marco completo
2. React se considera, como máximo, la capa V (capa de vista) en MVC y, por lo general, debe combinarse con reactRouter y redux para construir un proyecto completo.
3. Instalación y uso de reaccionar.
cdn: Ingresa al sitio web oficial y haz clic en el orden de las imágenes.
Después de eso, aparecerá un documento html, que es el documento de uso básico para reaccionar. Puede hacer clic con el botón derecho del mouse y seleccionar Guardar como para guardar en su escritorio (o en cualquier carpeta).
El cuadro rojo rodeado por un círculo es el enlace cdn de reacción en línea , que no se puede utilizar sin conexión a Internet. También puede copiar el contenido en el cuadro rojo, abrirlo en una página nueva y guardar todo el código localmente.
Abra este archivo html con vscode y verá el siguiente efecto
El código html completo en este momento es (las anotaciones son para mi comprensión personal)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div> <!-- 声明需要渲染的区域 -->
<script type="text/babel">
function MyApp() {
return <h1>Hello, world!</h1>;
}
const container = document.getElementById('root'); // 捕获渲染区域
const root = ReactDOM.createRoot(container); //创建DOM元素
root.render(<MyApp />); //将DOM元素渲染到渲染区域当中
</script>
</body>
</html>npm
npm init -y //Inicializar paquete.json
npm reacciono reaccionar-dom -S