PropTypes en React v15.5.0
PropTypes en React v15.5.0
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

React es una biblioteca de código abierto en javaScript para la creación de interfaces de usuario que tiene como objetivo abordar los retos encontrados en el desarrollo de aplicaciones de una sola página. Es mantenido por Facebook, Instagram y una comunidad de desarrolladores y empresas individuales.

React está destinado a ayudar a los desarrolladores a crear grandes aplicaciones que utilizan datos y tienden a cambiar constantemente. Su objetivo es ser simple.

React sólo se ocupa de la interfaz de usuario de una aplicación, la cuál se considera que es sólo la vista en el patrón de diseño modelo-vista-controlador(MVC), y se puede utilizar en conjunción con otras bibliotecas javascript o marcos MVC más grandes tales como angularjs.

React también tiene una serie de herramientas útiles para la construcción de aplicaciones llamados add-ons.

Hola Mundo con React

Para crear tu primera aplicación con React simplemente descarga la versión actual desde su web, crear un directorio nuevo y dentro extrae la carpeta build.

Ahora crea un archivo en la raíz llamado helloworld.html y dentro añade el siguiente código.


A simple vista es un archivo html con algunos scripts, pero si te das cuenta, el type es text/jsx, la sintaxis xml dentro de javascript es llamada JSX, de todas formas, react nos proporciona una herramienta para traducir esto a javascript.

Si ahora abres tu navegador verás tu primer helloworld con react.

Organizando nuestra app con React

Si queremos podemos mover nuestros archivos, por ejemplo, crea un directorio src en la raíz y dentro un archivo llamado helloworld.js con el siguiente código.


Ahora podemos cambiar nuestro helloworld.html por el siguiente y seguirá funcionando perfectamente.


Si te das cuenta, debemos seguir utilizando text/jsx, pero esto no es obligatorio, abre la terminal y ejecuta el siguiente comando para instalar las react tools.


Para cambiar los archivos del directorio src a javascript y moverlos al directorio build simplemente podemos ejecutar el siguiente comando.


Esto hará una escucha a nuestros archivos en src y en cada cambio actualizará el relacionado en el directorio build, pero en lugar de utilizar jsx lo hará en javascript.

Para ver que esto está funcionando, simplemente modificar el helloworld.html por el siguiente.


Si te das cuenta, ya no necesitamos utilizar el archivo build/JSXTransformer.js y por ende tampoco el archivo src/helloworld.js, en su lugar, podemos utilizar el archivo build/helloworld.js y todo vuelve a funcionar de nuevo.

Espero que te haya gusta esta primera introducción a React, si es así, te agradezco que compartas el tutorial en la redes sociales.