Ya hay muchos artículos sobre ReactJS. Pero para comenzar a estudiar a un programador novato, debe encontrar el comienzo de los fundamentos de su creación. Quería mostrar que no hay nada complicado en comprender los principios de desarrollar una interfaz en este marco.
Un método de estudio me permitió comprender la estructura de muchos sistemas de software complejos y se reduce al hecho de que necesitas reescribir el proyecto en estudio para que obtengas algún tipo de bestia desconocida que al menos se mueva un poco y sea algo similar a su prototipo.
Tengo que admitir que soy un back-end y ni siquiera sé qué me motivó a escribir un microframework en JavaScript. Pero, francamente, este es un deseo de aprender JS.
De hecho, existe una buena motivación para crear proyectos en forma de módulos / componentes. Desde el punto de vista de los programadores de back-end, los datos, en el mejor de los casos, parecen objetos JSON, deben formarse en la estructura deseada y enviarse cuando sea necesario, y luego hacer lo que quiera con ellos. En la parte frontal, en la versión más primitiva, debe seleccionar los elementos HTML necesarios por ID y actualizar sus atributos, así como cambiar los nodos de texto. Hacer la vida más fácil para los frameworks de JavaScript.
Una vez que escribí mi PHP-Slim-framework, que está lejos del original, pero realmente me ayuda en proyectos PHP. Hoy quiero hablar sobre cómo presenté los orígenes del desarrollo de ReactJS. Escribí un archivo en 135 líneas de código llamado bots.js y si lo conecta y escribe un componente como en React, incluso puede ver algo en el navegador. Lo llamé ReactKids.
La idea es dividir el proyecto en componentes, agregar componentes usando javascript y asegurarse de que no haya dependencias entre los componentes.
Estructura estándar HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>HelloReactKids</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="root"></div> <script src="js/bots.js"></script> <script src="js/pict.js"></script> <script src="js/navbar.js"></script> <script src="js/label.js"></script> <script src="js/button.js"></script> <script src="js/app.js"></script> </body> </html>
Para la aplicación, especifique id = root y conecte bots.js, luego conecte los componentes (o escríbalos usted mismo) y ejecútelos en app.js.
El componente en ReactKids se ve así:
function Button(attr) {
El componente en nuestro caso solo puede ser una función en la que params se llama attr.
Aquí debe prestar atención a por qué este atributo puede ser útil. Bueno, en primer lugar, aquellos que están familiarizados con la reacción saben que es posible "bajar" los datos a sus componentes hijos. Es decir, un componente devuelve un componente que devuelve un componente, y así sucesivamente hasta un componente que no tiene hijos. Sin embargo, también se usan como paquetes para los datos que provienen del servidor. Las solicitudes para el backend se envían en su mayor parte desde funciones que manejan eventos relacionados con la interacción con la interfaz de usuario.
Cuando el servidor devuelve JSON (generalmente en texto), debe convertirse en un objeto JS y hacerse en algún lugar. Para eso están los parámetros en React y attr en la implementación de nuestro hijo.
En attr, puede llenar todo el objeto JSON recibido del servidor, o solo puede obtener los
mejores datos que necesita y, posiblemente, complementado con otros datos necesarios.
A continuación, seguimos la lógica del React adulto: al comienzo de la función, procesamos el objeto attr y realizamos otros asuntos comerciales. Luego debe devolver el resultado de llamar a la función elem (), cuya implementación se encuentra en bots.js. Los siguientes parámetros se transfieren a los parámetros de la llamada:
- El nombre de la etiqueta.
- Objeto con estilos (en formato JS)
- Atributos para la etiqueta.
- Se pasa texto, otra etiqueta o componente (hijo) o nada.
Echa un vistazo a app.js:
var attr = { labelContent: "Hello React Kids", labelButton: "This button", } rend(document.getElementById("root"), App(attr)) function App(attr) { return elem( "div", { fontFamily: "segoe ui", color: "gray", textAlign: "center", }, { id: "app", }, [ Navbar(attr), Pict(attr), Label(attr), Button(attr), ] ) }
Nada inusual aquí tampoco. Aquí está lo mismo más complicado:
function App(attr) { var cpic1 = CirclePict({id: "img1", src: "./img/img1.jpg", height: "200px"}) var cpic2 = CirclePict({id: "img1", src: "./img/img2.jpg", height: "200px"}) var cpic3 = CirclePict({id: "img1", src: "./img/img3.jpg", height: "200px"}) var txt1 = " . ."; var txt2 = " , ."; return elem( "div", { fontFamily: "segoe ui", color: "gray", }, { id: "app", }, [ Pict({id: "logo", src: "./img/logo.png", height: "90%"}), Text({id: "info", text: "you number", direction: "right"}), Label(attr), Outer({id: "outer1", content: [cpic1, cpic2, cpic3]}), Text({id: "txt1", text: txt1, width: "450px"}), Button(attr), Label({id: "lbl2", labelContent: " "}), Text({id: "txt2", text: txt2, width: "650px", direction: "center"}), RoundPict({id: "well", src: "./img/well.jpg", height: "280px", width: "550"}) ] ) }
Como puede ver, hemos incorporado el componente CirclePict en el componente Outer 3.
Los niños, por supuesto, notaron la falta de JSX. De hecho, fue inventado por programadores perezosos y simplemente facilita lo que escribimos. Como resultado, las etiquetas JSX todavía se convierten en JavaScript.
Ahora necesita ver cómo se implementa esto en bots.js. El marco consta de 3 funciones completas, de hecho, elem () y setAttr (), la primera para crear, la segunda para actualizar el estado del componente y rend () para mostrar en app.js.
function elem(elt, style, attr, item) { if(elt) {
La función procesa los parámetros que se le pasan en la misma secuencia:
- Cree un componente en el árbol de documentos.
- Añadiéndole estilos.
- Atributos
- Agregar un elemento hijo como texto u otro elemento.
Cuando procesamos atributos, también verificamos su tipo, si una función se recibe como un valor, entonces se supone que este es un evento y le colgamos una intervención telefónica. Por lo tanto, solo queda declarar e implementar la función indicada como un evento.
Es en esta función de manejo de eventos que llamamos a setAttr (), pasando el objeto en sí con el atributo actualizado. Hay una cosa, pero para cada elemento que se creará en attr, debe especificar id; de lo contrario, no se actualizará a través de setAttr. Ella por id lo encuentra en el DOM.
En cuanto a setAttr (), todo es peor que en React, aunque para comprender los principios es suficiente (bueno, o casi suficiente).
function setAttr(update, slow) { if(slow) { var replace = document.getElementById(update.id) var opamax = 0.99 var opaint = 0.01 var outslow = setInterval(function() { opamax = opamax - opaint if(opamax <= 0) { clearInterval(outslow) update.style.opacity = opamax replace.parentNode.replaceChild(update, replace) var inslow = setInterval(function() { opamax = opamax + opaint update.style.opacity = opamax if(opamax >= 1) { clearInterval(inslow) } }, slow) } replace.style.opacity = opamax }, slow) } else { var replace = document.getElementById(update.id) replace.parentNode.replaceChild(update, replace) } }
Como puede ver aquí, solo manipulaciones con el árbol de documentos y otro efecto de desvanecimiento, de modo que al menos se vea y el código se vea como una función, no helloworld.
Lo mejor en el marco de nuestros hijos es la función de representación:
function rend(root, elem) { root.appendChild(elem) }
Me di cuenta de que es difícil para los programadores novatos comenzar a aprender cosas como React puramente psicológicamente. Después de ver cientos de megabytes de bibliotecas y millones de líneas de código, debe deprimirse y buscar otra cosa. En particular, están cambiando a Vue. Por supuesto, este también es un buen marco, pero es aún mejor comprender ambos enfoques para el desarrollo frontend.
Resulta que los entornos de software complejos surgen de soluciones pequeñas pero efectivas. Por lo tanto, deseo buena suerte a todos los que buscan el conocimiento de React. ¡Que la fuerza venga con nosotros!