Reaccionando a React.js

Literalmente hace un mes hubo emoci√≥n en la comunidad de Vue.js de que Vue.js obtuvo m√°s estrellas que React.js en github. ¬ŅEstrellas como las de Hollywood? Realmente, no lol, pero tal vez metaf√≥ricamente…. o filos√≥ficamente… Las estrellas de Github es una manera para los desarrolladores de marcar esa p√°gina de manera efectiva para que puedan referirse a ella m√°s adelante. ¬ŅQu√© significa esto? La popularidad de Vue ha superado a la de React, una entrega simb√≥lica del bast√≥n de mando del frontend, por as√≠ decirlo.As√≠ que todo el mundo est√° usando Vue.js y es m√°s popular que React? Bueno, no, las estrellas no significan uso, pero podemos mirar las descargas de npm que es lo que se usa para instalarlas y ver que Vue todav√≠a est√° bastante atrasado; (stats via http://www.npmtrends.com/react-vs-vue)Con las tecnolog√≠as que se usan todo el tiempo, las empresas tienen que decidir si vale la pena su tiempo y por lo tanto su dinero para actualizarse a otras m√°s nuevas. Las tendencias pueden ser todo el bombo, pero se necesita una raz√≥n bastante grande para cambiar a una mejor tecnolog√≠a en lugar de continuar con la actual, lo que significa que todas las empresas que usan React pueden ver las ventajas de usar Vue, pero no vale la pena el cambio y continuar con lo que ya tienen ser√° suficiente, as√≠ que pens√© que ser√≠a una buena idea expandir mis habilidades revisando React con m√°s detalle y ver qu√© diferencias ten√≠a con Vue. Esto es lo que descubr√≠… explicado en t√©rminos muy simples.

Configuración РCrear aplicación React

Una de las cosas más frustrantes con el aprendizaje de Reaccionar al principio fue el uso de tutoriales obsoletos. Una de las mayores habilidades de los desarrolladores es ser capaz de resolver problemas encontrando soluciones en línea. Pero también es importante ser consciente de la edad de estas soluciones. Algunos tutoriales estaban ahí fuera, pero son anticuados y pueden llevarte a un agujero de conejo antes de que te des cuenta.Facebook repo create-react-app es la mejor manera de empezar. Su configuración mínima, un kit de inicio totalmente templado para que pueda empezar a trabajar de inmediato. Estoy a favor de lo simple y libre de problemas, así que esto es brillante.

npx create-react-app[nombre del proyecto]
cd[nombre del proyecto]
npm instalar
npm start

Cuatro sencillos comandos de terminal para ponerte en marcha Una vez que empieces, se iniciar√° un servidor de host local y ver√°s la p√°gina de ejemplo de React en tu navegador… Ver√°s un logotipo de React radioactivo girando en tu navegador de host local….

Estructura de clase

¬°Arriba los juegos de palabras! ES6 es prevalente en React, as√≠ que aseg√ļrate de que lo has bajado antes de saltar o ser√° confuso como el infierno! Los componentes son la raz√≥n por la que nos encanta React y Vue. Estamos dividiendo nuestro sitio web en Componentes que son reutilizables. Estamos teniendo nuestro Frontend Refactored (conexi√≥n sin verg√ľenza a mi otro post)! decid√≠ hacer un simple gestor de marcadores donde un usuario puede guardar estos enlaces en una p√°gina. ¬ŅRecuerdas esos d√≠as en los que ten√≠amos que hacer eso? No? Mierda, me siento viejo… O_oAight, hagamos un plan. Como con l√°piz y papel… ¬Ņrecuerdas esas cosas tambi√©n? (No me preguntes por qu√© escribo en MAY√öSCULAS)

import React, { Componente } dereaccionar;
import./App.css;
importar BookmarkForm desde./componentes/BookmarkForm;
classAppextendsComponent{(Componente)
    render() {
        retorno (

Marcadores

div>> de ); } } exportdefault App;

Todos los componentes siguen aproximadamente esta estructura. Usted tiene sus importaciones en la parte superior, una clase de componente que contiene todo, luego su exportaci√≥n. dentro de la clase de componente casi siempre tendr√° una funci√≥n de render que es el material que se analiza a la p√°gina. La funci√≥n render siempre devuelve el c√≥digo JSX que contendr√° todo lo que quieras renderizar, dentro de la funci√≥n render tenemos divs, una etiqueta h1, y que es otro componente, tambi√©n hay otras funciones construidas que puedes usar que est√°n al mismo nivel que la funci√≥n render, pero dentro de la clase de componentes. Lo bueno es que estas funciones est√°n limitadas al alcance de este componente de la clase, lo que significa que s√≥lo se puede acceder a ellas dentro de este componente, a menos que usted quiera que no lo haga… Probablemente la pregunta m√°s com√ļn para aprender React es… ¬Ņqu√© es JSX?

JSX – Todo es Javascript

ES6 introdujo de forma pol√©mica las Clases a Javascript debido a la demanda. Pero realmente bajo el cap√≥ no es nada m√°s que az√ļcar sint√°ctico. Lo que significa que se ve y act√ļa como clases en otros idiomas, pero en realidad no est√° haciendo nada diferente a lo que hac√≠a antes. Act√ļa y se parece a HTML, pero en realidad es Javascript que se traduce como HTML.

let newDiv = document.createElement(div);
newDiv.className = "hello";

Es lo mismo que pre>>div>JSX en sus términos más sencillos aplicará el Javascript pero seguirá pareciendo HTML.Pero en JSX class es una palabra clave reservada así que usamosclassName en React para no confundirlo con el HTML real, así que para JSX lo escribiríamos así;

"hello">div>

Como JSX es Javascript, nos gustar√≠a que usara Javascript a veces, as√≠ que necesitamos algo de sintaxis para ayudarlo a reconocer que queremos hacer eso.”hello” onClick={this.clicked}>div>Aqu√≠ el atributo onClick ejecuta la funci√≥n creada en este componente cuando se hace clic en el div. Como puedes ver, Javascript es expl√≠cito para este.click ya que se encuentra entre dos corchetes rizados.

Transmisión de información

Una de las cosas que queremos hacer en este impresionante mundo de componentes es poder informarnos para que nuestros componentes puedan ser flexibles, as√≠ que vamos a crear un estado(s) que contenga la lista de nuestros sitios web. En la clase, a√Īadimos el constructor para inicializar nuestro estado. Super() Te lo explicar√© m√°s tarde…

classAppextendsComponent{
    constructor(atrezzo) {
        super(accesorios);
            this.state = { sitios web: [] };
    }
    render() {
    //JSX...

Almacenamos nuestro estado en un hash. Ahora llamando a estos sitios web.state.state se mostrará el array vacío. Props permite acceder a esta información cuando se transmite a otros componentes.

render() {
    dejar que los sitios web = este.state.websites;
    sitios web = sitios web.map((sitio web) => {
        retorno (
                {website}
            Elección del Sitio Web>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>""""">>>>>>>>>>>>>>>"""">>>
        );
    });
///... m√°s cosas JSX

En la función de render, asignamos la variable websites a la matriz en el estado. Luego hacemos un bucle a través de la matriz con el mapa y para cada elemento de la matriz (un sitio web) devolvemos el componente WebsiteChoice y pasamos en el nombre de la página web como un atributo personalizado que recibe WebsiteChoice.esto suena un poco loco! En términos simples, esto significa que estamos pasando el nombre del sitio web al componente WebsiteChoice para que podamos hacer algo con él, y dejar que el componente WebsiteChoice lo maneje en lugar del componente padre.

classWebsiteChoiceextendsReact.Component{{Componente
    render() {
        retorno (
  • {esta.p√°gina.web.de.accesorios} li>> de ); } Aqu√≠ pasamos el nombre del sitio web llamando athis.props.website y lo ponemos en href, y lo renderizamos a la p√°gina, permitiendo as√≠ que este componente sea responsable de todo lo que tenga que ver con cada sitio web individual.

    Ahórrese este dolor de cabeza

    Una de las partes interesantes de Javascript es el uso de la palabra clave esto. Esta es una forma de referirse a las cosas dentro de un objeto determinado. Este blog lo explica muy bien, as√≠ que cuando pasamos estos pedacitos de informaci√≥n a trav√©s de los objetos de utiler√≠a, tambi√©n podemos pasar funciones que pueden estar en el componente padre pero que pueden ser llamadas en el componente hijo, sin embargo, como estamos pasando objetos, la palabra clave puede estar refiri√©ndose a los objetos equivocados. Por lo tanto, es muy √ļtil conocer las funciones de las flechas de ES6 aqu√≠, ya que permiten que esta palabra clave no se refiera al objeto de funci√≥n que se ha creado, as√≠ que en lugar de
    functiondoSomething() {
        // un poco de código
    }

    uso

    doSomething = () => {
        // un poco de código
    }

    para evitar problemas de alcance. Esto permite que un componente hijo pueda llamar a este.props.doAlgo de su propio componente.Si recuerdas lo anterior, ten√≠amos esa extra√Īa `s√ļper palabra clave con props dentro de ella.

    classAppextendsComponent{
        constructor(atrezzo) {
            super(accesorios);
                this.state = { sitios web: [] };
        }
        render() {
    //JSX...

    En Reacción, cuando llamas super con accesorios. React hará que los puntales estén disponibles en todo el componente a través de este.props. Esto nos permite llamar a este.props.websites cuando los datos están en el componente padre.

    Despliegue en Heroku

    Hay mucho m√°s en el c√≥digo, pero este post est√° empezando a ser demasiado largo. Una vez que me puse contento, quise ver lo f√°cil que ser√≠a subir mi c√≥digo a Heroku y tenerlo funcionando. Estaba interesado en ver cu√°nta configuraci√≥n era necesaria, especialmente despu√©s de usar create-react-app para configurar mi plantilla. sub√≠ a Heroku de la misma manera que lo har√≠a si estuviera configurando un nuevo repositorio github, y segu√≠ sus instrucciones.una vez subido, pronto me di cuenta de que necesitabas a√Īadir un buildpack de nodos, que efectivamente hace una instalaci√≥n de npm online para instalar todas las dependencias. Esto estaba bajo tu app/settings en el sitio web de heroku. (npm install on Heroku!)Una vez hecho, ¬°voila! ¬°Estaba listo! S√ļper simple y realmente creo que create-react-app es una plantilla impresionante que ayuda a los desarrolladores desde el principio. Si√©ntase libre de echarle un vistazo aqu√≠ y el github repo est√° aqu√≠. (Feo, pero funcional prototipo de trabajo! Pensamientos finales) Creo que React.js es un gran marco de trabajo y una vez que usted consigue su cabeza alrededor de la sintaxis de JSX el potencial es enorme.js y tambi√©n tiene algunas reglas de caso de excepci√≥n que b√°sicamente s√≥lo tienes que memorizar como usar className en lugar de class, que parec√≠a una previsi√≥n en su dise√Īo y que ellos simplemente guardaron. Dicho esto, la comunidad es enorme y con el "respaldo" de Facebook, seguramente sigue siendo una apuesta bastante segura que se mantendr√° en el futuro previsible. creo que poder utilizar ES6 es casi una necesidad para reaccionar, teniendo en cuenta los problemas de alcance que obtendr√° mediante el uso de las funciones tradicionales de funci√≥n no de flecha, que se ocupan de poner ataduras en todas partes para controlar su esto!Para m√≠, si Vue no existiera probablemente ser√≠a un desarrollador satisfecho con React, pero fue dif√≠cil para m√≠ codificar con el conocimiento de que las cosas se pod√≠an hacer de una manera mucho m√°s f√°cil....(Del canal de youtube DevTips!) Quiero terminar con un video de serie bastante guay de lo que es desarrollar un proyecto de principio a fin, desde el concepto hasta el prototipo en funcionamiento. Realmente me encanta la forma en que lo planean, e incluyen todos los bloqueadores que tuvieron durante el proceso. Esto puede dar una buena idea de por lo que pasa un desarrollador al crear un producto.

    Etiquetas

    ReactCodingAppsTecnologíaReaccionar a ReactjsÚltimas historias técnicasReaccionar JsCrear una aplicación Reaccionar