React es una librería Javascript de código abierto enfocada en el desarrollo de interfaces de usuario interactivas, está basada en componentes que encapsulan su propio estado y ciclo de vida, convirtiéndolas en grandes interfaces para el usuario.
Adentrémonos en el mundo de React y construyamos una aplicación.
La mejor solución para iniciar un proyecto en React.js es utilizar create-react-app
. Se crea una aplicación que se ejecuta por consola que nos permite desarrollar de manera fácil y sin ninguna configuración un proyecto en React listo para trabajar de forma inmediata, liberándonos de configuraciones complejas y, lo mejor de todo, soportada oficialmente por la comunidad de React.
Para poder hacer uso de esta implementación es necesario tener instalado Node.js, utilizar el manejador de paquetes npm y desde nuestra consola o terminal ejecutar el siguiente comando:
npx create-react-app my-app
Ahora, debemos ingresar al directorio de nuestro proyecto para iniciar nuestra primera aplicación en React.
Una vez ejecutado el comando npm start
, el cual inicia el proyecto en modo de desarrollo, podemos visualizar la aplicación que incluye por defecto en nuestro navegador en la ruta: localhost:3000
Para entender la estructura de nuestra primera aplicación, es necesario abrir el proyecto con el editor de código a tu preferencia, en mi caso utilizo Atom.
node_modules: todos los paquetes, librerías y dependencias que utiliza nuestra aplicación.
public/: aquí se encuentra el template de la aplicación (index.html, favicon.ico y manifest.json).
src/: en este directorio se encuentra todos los recursos que le darán vida a nuestra aplicación. A medida que avancemos con estos recursos, aprenderemos a organizarlos de mejor forma.
.gitignore: archivo que contiene todos los directorios y archivos que deben de ser ignorados.
package.json: paquete donde se encuentra la configuración de nuestro proyecto, los scripts así como las dependencias que se necesitan para que se ejecute de forma correcta.
README.md: en este documento se incluye toda la documentación de create-react-app
.
create-react-app
?create-react-app
incluye una serie de librerías que facilitan la implementación, construcción y puesta en producción de un proyecto en React.
Estas son algunas de las tecnologías incluidas:
React – Webpack: empaquetador de archivos.
Babel: nos permite transpilar nuestro código a JavaScript que pueda funcionar en cualquier navegador.
PostCSS: para procesamiento de CSS.
Jest: para realizar pruebas.
ESLint: nos permite mejorar la calidad de nuestro código.
También una de las ventajas que tiene create-react-app
es que podemos hacer cambios y verlos en tiempo real en nuestro navegador, ya que incluye un servidor de desarrollo local.
¡Hola Mundo en React!
Dentro de src/ encontraremos una serie de archivos que ejecutan nuestra aplicación actual, vamos a crear un archivo nuevo llamado HelloWorld.jsx.
Ahora, abrimos el archivo index.js y vamos a actualizarlo añadiendo el componente que acabamos de crear.
Guardamos estos cambios y ejecutamos nuestro servidor de desarrollo local para visualizar los cambios.
Aprender React te permite crear fabulosas aplicaciones web, móviles y de escritorio para GNU/Linux, Windows, OS X y sorprendentes recursos en 360. Además de sus grandes ventajas como la flexibilidad, rapidez de respuesta y organización del código.
JavaScript: JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, es basado en prototipos, imperativo, débilmente tipado y dinámico.
CSS: Del inglés Cascading Style Sheets (hojas de estilo en cascada). Es un archivo que termina en .css que está vinculado desde el HTML y que controla el aspecto de la página web.
Renderizado: Es el proceso por el que pasa el navegador cuando interpreta HTML y CSS y lo convierte en el resultado final visual que ve en su pantalla.
Client-Side (Lado del cliente): Se refiere a un lenguaje que es interpretado por el propio navegador. Por ejemplo, JavaScript es descargado por tu navegador y luego se ejecuta localmente en tu máquina. Tu navegador es el "cliente".
Server-Side (Lado del servidor): Se refiere a un lenguaje que es interpretado por el servidor. Por ejemplo, PHP es interpretado por tu servidor, procesado y luego entregado a ti.
App Escritorio: Software que se encuentra instalado en el sistema operativo y se puede ejecutar sin depender de un navegador web.
Componente: Es una clase responsable de exponer datos a una view y manejar la mayor parte de la visualización de la vista y la lógica de interacción del usuario.
Interface: En algunos lenguajes de programación es un tipo de “clase” que está enfocada en la reutilización de acciones o métodos entre familias (jerarquía padre-hijo de la herencia). En experiencia de usuario representa el punto de contacto entre usuario y máquina o elemento análogo.
CTO en Aerolab
Juan David Castro Gallego
hace un año
Juan David Castro Gallego
hace un año
Juan David Castro Gallego
hace un año