Share
React es una biblioteca de JavaScript para crear interfaces de usuario (UI). Es mantenido y desarrollado por Facebook, y es una de las herramientas más populares para crear aplicaciones web en la actualidad..
Sin embargo, tiene cierta reputación por no ser muy fácil de usar para configurar una aplicación React, especialmente para principiantes. El problema surge cuando React se hizo popular por primera vez, y el método estándar para crear una aplicación React involucraba la configuración manual compleja de una gran cantidad de archivos de configuración..
Una gran cantidad de tutoriales destinados a ayudar a los principiantes a comenzar con React introdujeron diferentes enfoques y herramientas para configurar una aplicación que funcione. Incluso con diferencias sutiles entre los métodos de construcción sugeridos, la confusión era inevitable.
Para poder configurar con éxito una aplicación React a través de la configuración manual se requiere una buena comprensión de múltiples tecnologías diferentes.
Esta flexibilidad en la configuración es realmente una gran cosa. Tiene total libertad para elegir las herramientas específicas que desea construir en su aplicación React y configurarlas exactamente como se requiere.
Una vez que se sienta cómodo con estas herramientas, tendrá la confianza de utilizarlas en todo su potencial y crear aplicaciones complejas en profundidad. Hasta entonces, todavía queda una barrera de entrada para muchos desarrolladores que no necesariamente tienen experiencia con las herramientas de línea de comandos necesarias para crear aplicaciones React..
Para ayudar a aliviar esta frustración, esta serie de tutoriales se centra en varios métodos para configurar las aplicaciones React. Comenzaremos con el enfoque más básico y luego desarrollaremos configuraciones más complejas. Empecemos, sin embargo, aclarando con más detalle los tipos de configuración React que cubriremos.
Al final de esta serie de tutoriales, podrá configurar las aplicaciones React de cuatro formas principales:
El primer método demuestra cómo usar un editor de código en línea como CodePen para configurar una aplicación React muy rápidamente. Usando este método, estarás codificando tu primera aplicación literalmente en segundos!
Luego, continuaremos con la configuración de React en un entorno de desarrollo local, comenzando con la adición directa de scripts a un archivo HTML sin usar ninguna herramienta de compilación. Los siguientes dos métodos de configuración se centran en cómo configurar una aplicación React típica en su desarrollo diario.
Como verá, el uso de la herramienta crear-reaccionar hace que sea extremadamente fácil activar las aplicaciones React con un solo comando. Finalmente, cubrimos cómo configurar una aplicación React a través de la línea de comandos completamente desde cero, de la manera tradicional..
Cada método de configuración tiene su lugar, y no hay un solo enfoque 'mejor', solo alternativas según sus necesidades.
React es una biblioteca fantástica para crear aplicaciones web, ¡y también es muy divertido! Veamos ahora los requisitos previos del tutorial para asegurarnos de que está al día..
El método más sencillo para configurar una aplicación React no requiere más que una conexión a Internet. Sin embargo, a medida que avanzamos hacia configuraciones más complejas, nos moveremos hacia la configuración de una aplicación React completamente desde cero. Por lo tanto, se recomienda algún conocimiento de los siguientes temas..
Windows, macOS y Linux proporcionan acceso a herramientas de línea de comandos. Estos se utilizan mucho en el desarrollo web moderno para completar tareas complejas de forma rápida y eficiente. Si no tiene experiencia trabajando con la línea de comandos para realizar operaciones como administrar archivos / carpetas, instalar herramientas, ejecutar scripts, etc., valdría la pena dedicarle tiempo, al menos, aprender lo básico..
Si ha estado haciendo desarrollo web durante algún tiempo, es probable que al menos haya oído hablar de Node.js y npm. Node.js se creó originalmente para ejecutar JavaScript en el servidor, pero ahora también se usa ampliamente para desarrollar aplicaciones web, simplificando y automatizando tareas comunes, todo en un solo entorno.
Hay literalmente cientos de miles de módulos Node.js disponibles, y npm se introdujo como un administrador de paquetes dedicado para ayudar a instalar, organizar y administrar todos los módulos en su aplicación web. Dado que npm se incluye con Node.js, todo lo que necesita hacer es instalar la última versión de Node.js en su sistema para que esté disponible a través de su línea de comandos..
Se requiere un nivel razonable de JavaScript para configurar y desarrollar aplicaciones React. De lo contrario, seguramente luchará en algún momento para crear aplicaciones React de cualquier profundidad o complejidad. Esto incluye algunas características de ES6, como funciones de flecha, clases y módulos. Recomiendo actualizar sus habilidades de JavaScript si es necesario antes de intentar desarrollar una aplicación React.
Esta serie de tutoriales se centra en la configuración de aplicaciones React en lugar de desarrollarlas, por lo que no profundizaremos demasiado en temas específicos de React, como componentes, accesorios y estado. Sin embargo, es una buena idea tener un conocimiento básico de lo que son, por lo que en la siguiente sección cubriremos las características básicas de React y exploraremos cómo todas las partes se unen para formar una aplicación que funcione..
Antes de sumergirnos en nuestro primer método de configuración, hagamos un rápido recorrido por React..
En su núcleo, hay tres características fundamentales de React que comprenden la mayoría de las aplicaciones. Estos son:
Estas son las características clave que necesita dominar para escribir aplicaciones React efectivas. Una vez que hayas alcanzado esa etapa, estarás muy bien preparado para profundizar mucho más en Reaccionar y desarrollar aplicaciones más complejas..
Es posible que se sorprenda gratamente al descubrir que los componentes, accesorios y el estado de React no son tan difíciles de entender. Mi experiencia personal fue que el proceso de configuración de React fue más difícil que aprender React en sí mismo.!
Los componentes básicos de cualquier aplicación React son componentes. Piense en ellos como bloques de código reutilizables que encapsulan el marcado, el comportamiento y los estilos. También se pueden anidar entre sí, lo que los hace altamente reutilizables. Por ejemplo, podría tener un
Para facilitar la construcción de componentes, JSX se creó para dar a los componentes una estructura similar a HTML. Si está familiarizado con HTML o XML, entonces estará en casa utilizando JSX para crear componentes. Vale la pena señalar que no está obligado a utilizar JSX en React, pero ahora se ha convertido en la forma estándar aceptada para definir componentes..
Los apoyos le permiten pasar información entre los componentes. Y en React, la información solo se puede pasar a través de accesorios de componentes principales a componentes secundarios.
Si elige usar JSX en las definiciones de sus componentes (y le recomiendo que lo haga), la definición de accesorios en un componente es notablemente similar a la de agregar atributos HTML. ¡Esta es una de las razones por las que JSX es tan popular! El hecho de poder usar una sintaxis similar a HTML para los componentes y accesorios React hace que sea muy fácil organizar tu aplicación rápidamente.
Echemos un vistazo más de cerca a nuestra
Primero, aquí está el
la clase BookIndex extiende React.Component render () return ()Lista de todos los libros
Luego, dentro de cada
La clase Book extiende React.Component render () return ()this.props.title
Autor: this.props.author
Publicado: this.props.published
Si la sintaxis anterior para crear componentes React parece extraña, no se preocupe, es bastante sencillo. Una clase ES6 amplía la clase de componente base, y luego un método de render (requerido) maneja la salida del componente.
State nos permite realizar un seguimiento de todos los datos en una aplicación React. Necesitamos poder actualizar la interfaz de usuario siempre que algo cambie, y el estado se encarga de esto por nosotros. Cuando se cambia el estado, React es lo suficientemente inteligente como para saber qué partes de su aplicación necesitan actualizarse. Esto hace que React sea muy rápido, ya que solo actualizará las partes que han cambiado..
Normalmente, el estado se aplica al componente de nivel superior en su aplicación React, de modo que todos los componentes secundarios pueden utilizar los datos del estado según sea necesario..
Eso es todo para nuestro torbellino tour de React. De ninguna manera es exhaustivo, y hay mucho más que debes aprender antes de poder crear aplicaciones complejas de pleno derecho, pero comprender los componentes, las propiedades y el estado te dará una ventaja sólida..
En este tutorial, sentamos las bases para aprender a configurar un entorno React. El resto de esta serie de tutoriales se centra en los métodos específicos necesarios para hacer esto. Cubriremos métodos de configuración que van desde métodos muy simples hasta métodos más complejos que requieren configuración manual..
En el siguiente tutorial, comenzaremos con el uso de CodePen, un editor de código en línea, para configurar una aplicación React en unos pocos clics del mouse. Esta es, de lejos, la forma más sencilla y rápida de obtener codificación en React.!
Accentsconagua