1. Introducción a Reactjs
React es un marco de desarrollo frontal muy popular recientemente. React se originó en los proyectos internos de Facebook, porque la compañía no estaba satisfecha con todos los marcos MVC de JavaScript en el mercado, por lo que decidió escribir un conjunto propio para configurar un sitio web de Instagram. Después de que lo logré, descubrí que este conjunto de cosas era muy útil, y se abrió en mayo de 2013. Debido a que la idea de diseño de React es extremadamente única, es revolucionario e innovador, con un rendimiento sobresaliente, pero su lógica de código es muy simple. Por lo tanto, cada vez más personas están comenzando a prestar atención y usarla, creyendo que puede ser la herramienta convencional para el desarrollo web futuro.
Dirección del sitio web oficial de ReactJS: http://facebook.github.io/react/
Dirección de Github: https://github.com/facebook/react
Reactjs Dirección china: http://reactjs.cn/react/docs/getting-started.html
¿Qué es React?
React es una biblioteca JS desarrollada por programadores sobresalientes que trabajan en Facebook para desarrollar interfaces de interacción de usuario. Su código fuente es mantenido por excelentes programadores de Facebook y la comunidad, por lo que tiene un equipo técnico muy fuerte detrás de él para proporcionar soporte técnico. React trae muchas cosas nuevas, como componentes, JSX, DOM virtual, etc. El DOM virtual que proporciona hace que nuestros componentes de representación sean muy rápido, liberándonos del trabajo pesado de operar con frecuencia el DOM. Cualquiera que sepa React sabe que se centra más en la capa V en MVC. Combinado con otras cosas como Flux, puede construir fácilmente aplicaciones potentes.
2. Reactjs características
1. DOM virtual
A través del algoritmo DOM DIFF, solo las piezas diferenciadas se actualizarán sin representar la página completa, mejorando así la eficiencia
2. Componentización
Divida la página en varios componentes, incluidas estructuras y estilos lógicos
Los componentes solo contienen su propia lógica, que se puede predecir al actualizar los componentes, que conducen al mantenimiento.
La página divide múltiples componentes y se puede reutilizar
3. Flujo de datos unidireccional
Los datos pasan de componentes de nivel superior a subcomponentes
Datos controlables
3. Comenzando con React. Escribe hola, mundo. Primero, entendamos qué es JSX.
Uno de los mecanismos centrales de React es el DOM virtual: elementos DOM virtuales que se pueden crear en la memoria. React usa DOM virtual para reducir las operaciones en el DOM real y mejorar el rendimiento. Similar a DOM nativo real, Virtual DOM también se puede crear a través de JavaScript, por ejemplo:
var child1 = react.createElement ('li', nulo, 'primer contenido de texto'); var child2 = react.createElement ('li', nulo, 'segundo contenido de texto'); var root2 = react.createElement ('ul', {className: 'my-list'}, Child1, Child2); react.render (<div> {root2} </div>, document.getElementById ('contenedor5'));Usando este mecanismo, podemos usar JavaScript para construir un árbol DOM de interfaz completo, así como podemos usar JavaScript para crear DOM reales. Sin embargo, dicho código no es bien legible, por lo que React Invented JSX y usó nuestra sintaxis HTML familiar para crear un DOM virtual:
var root = (<ul classname = "my-list"> <li> Primer contenido de texto </li> <li> Contenido de segundo texto </li> </ul>); react.render (<div> {root} </div>, document.getElementById ('contenedor6'));4. 5 formas de comenzar con Hello In React
Método 1
<div id = "Ejemplo1"> </div> <script type = "text/jsx"> react.render (// directo html <h1 classname = "classn1"> 1 hellow directo html world </h1>, document.getElementById ('ejemplo1'); </script>>Método 2
<div id = "Ejemplo2"> </iv> <script type = "text/jsx"> react.render (// crea elemento react.createElement ('h1', {className: 'classn2'}, '2 hola, crea elemento directamente mundialMétodo 3
<div id = "Ejemplo3"> </div> <script type = "text/jsx"> var createEl = react.createClass ({render: function () {// return <h1> Hellow Component Creation Html World </h1> // return con o sin brackets (<h1 className = 'classn3'> 3 HELLW COMPONENT CREATION HTM HTM HTM </h1>);}}); react.render (// crea elemento <CreateEl/>, // o doble soporte <Createel> </createel> document.getElementById ('ejemplo3')); </script>Método 4
<div id = "Ejemplo4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createClass ({// crea render // Crear elemento en el método de componente react.createElement (jsxcreateel, null), document.getElementById ('ejemplo4')); </script>Método 5
<div id = "Ejemplo5"> </div> <script type = "text/jsx"> var hello = react.createClass ({// Template Hello render: function () {return (<span> {this.props.data} </span>}}}); var world = react.createClass ({// temperate render: function () {return () costura </span>)}}); react.render (// crea elementos en 2 componentes de plantilla <h1 classname = "classn5"> <hello data = '5 hello'/> <world/> </h1>, document.getElementById ('ejemplo5'); </script>5. La imagen de resultado arriba
Código adjunto:
<! DOCTYPE HTML> <html> <fead> <meta charset = "utf-8"> <title> titeled document </title> <meta name = "viewport" content = "inicial = 1.0, user-scalable = no, maximum-scale = 1, width = dispositivo-width"/> </head> <body> <syle>*{margen margin: 0; Padding: 0;} cuerpo {fondo:#333;}#box {fondo: url (loveImg/qioa-fxehfqi8208393.jpg) no-repeat centro superior; Ancho: 550px; borde: 8px sólido #ffff; -Webkit-box-siting: border-box; Margen: 50px Auto;}#Ejemplo1,#Ejemplo2,#Ejemplo3,#Ejemplo4,#Ejemplo5 {Margin: 20px Auto; Ancho: 100%; Antecedentes: RGBA (255,255,255, .3); relleno: 5px 10px; tamaño de fuente: 13px; color:#f1f1f1; -webkit-box-singing: border-box; } </style> <div id = "box"> <div id = "ejemplo1"> </div> <script type = "text/jsx"> react.render (// directo html <h1 classname = "classn1"> 1 hellow directo html </h1>, document.getgetByid ('ejemplo1'); </script> <shivi = "DIVED </" DivId </div Id = "DivId </div Id =" Script "</Divi. type = "text/jsx"> react.render (// crear directamente elemento react.createElement ('h1', {classname: 'classn2'}, '2 hello, directamente create element world!'), document.getElementById ('ejemplo2')); </script> <d Div id = "Ejemplo3"> </div> <script type = "text/jsx"> Var "> Var"> Var "> CreateEl = react.createClass ({render: function () {// return <h1> hellow component crea html world </h1> // return con o sin brackets (<h1 classname = 'classn3'> 3 componente hellow crea html world </h1>);}}}); react.render (// create <create <createel /////////////doubtet. <Createel> </ateeleel> document.getElementById ('Ejemplo3')); </script> <div id = "Ejemplo4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createClass ({// crea render in jsx directamente: function () {return.createelement ('h1', {className, {className "classn4" "}," 4 hola, cree el mundo en jsx directamente! "))}}); react.render (// crea elemento en el método de componente react.createElement (jsxcreateel, null), document.getElementById ('ejemplo4')); </script> <d id =" Ejemplo5 5 "> </div> <script type =" text/jsx ">> Varx> Hello = react.createClass ({// Template hello render: function () {return (<span> {this.props.data} </span>)}}); var world = react.createClass ({// plantate world render: function () {return> 2 Componentes de plantilla <H1 classname = "classn5"> <hello data = '5 hello'/> <World/> </h1>, document.getElementById ('Ejemplo5')); </script> </div> <script src = "build/react.min.js"> </script> <script> src = "build/jsxtransformer.js"> </script> </body> </html>Aquí hay algunos conocimientos adicionales para usted:
Términos reaccionarios
Reaccionar elementos
Un objeto JavaScript que representa elementos HTML. Estos objetos JavaScript finalmente se compilan en los elementos HTML correspondientes.
Componentes
Los elementos reaccionados de encapsulación, incluidos uno o más elementos de reacción. Los componentes se utilizan para crear módulos de interfaz de usuario reutilizables como la paginación, la navegación de la barra lateral, etc.
Jsx
JSX es una extensión de sintaxis JavaScript definida por React, similar a XML. JSX es opcional, podemos usar JavaScript para escribir aplicaciones React, pero JSX proporciona una forma más simple de escribir aplicaciones React.
DOM virtual
Virtual DOM es un objeto JavaScript que simula un árbol DOM. React usa DOM virtual para representar la interfaz de usuario, mientras escucha los cambios en los datos del DOM virtual y migra automáticamente estos cambios a la interfaz de usuario.