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