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 Starter Kit nos ofrece un gran punto de partida para desarrollar aplicaciones web / SPA con React.js, Express, Flux, ES6+, JSX, Babel, PostCSS, Webpack Y BrowserSync, así que tenemos un gran conjunto de herramientas.

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 / SPA.

Para poder utilizar React Starter Kit necesitamos las siguientes dependencias.

  • Mac OS X, Windows, o Linux
  • Node.js v5.0 o superior
  • npm v3.3 o superior
  • Editor de texto o IDE pre-configurado con React/JSX/Flow/ESlint (más información)

Gracias al proyecto React Starter Kit podemos tener nuestra aplicación trabajando con componentes, rutas, configuraciones
Si no conoces React a continuación tienes una serie de enlaces que seguro te pueden ayudar a empezar.

Primer proyecto con React Starter Kit

Crear nuestro primer proyecto con React Starter Kit es muy sencillo, sólo debemos clonar su repositorio y ejecutar un par de comandos, primero vamos a clonar su repositorio.


Una vez hemos creado nuestro primer proyecto sólo debemos instalar algunas dependencias, pero antes, a día de hoy, abre el archivo package.json y modifica history por la siguiente versión.


Así evitaremos problemas a la hora de ejecutar el proyecto.

Ahora sólo debemos ejecutar los siguientes comandos, primero instalamos.


Y después levantamos el servidor.


Este comando levantará nuestra aplicación en http://localhost:3000, aquí ya podremos ver una aplicación completa con React utilizando React Starter Kit.

Todo el código de nuestra aplicación está en el directorio src/, así que aquí es donde vamos a desarrollar normalmente la lógica de nuestra aplicación, así que vamos a crear nuestro primer componente con React.

Primer componente con React Starter Kit

Crea un directorio llamado ProfilePage dentro del directorio src con los siguientes archivos.

Componente React Starter Kit

Cada componente debe estar compuesto normalmente por esta serie de archivos, abre el archivo ProfilePage.js y añade el siguiente código para crear nuestro primer componente.


Con el decorador @withStyles(s) tenemos disponible el objeto s el cuál contiene los estilos de nuestro archivo .scss, definimos una propiedad con defaultProps llamada name que utilizamos en el método render con this.props.name y una constante la cuál es el título de esta componente.

Ahora abre el archivo ProfilePage.scss y añade lo siguiente.


Cómo puedes ver, la clase h1profile es la que utilizamos en nuestro componente gracias al decorador @withStyles.

Ahora necesitamos crear el archivo package.json de nuestro componente para informar a nuestra aplicación de la existencia de este módulo.


¡Listo!, ya tenemos nuestro componente definido, aunque todavía no lo podemos utilizar, para ello, abre el archivo src/Navigation/Navigation.js y modifica el código por el siguiente, simplemente vamos a añadir el enlace a la navegación.


Finalmente sólo nos queda modificar el archivo src/routes.js para informar a la aplicación que cuando la url sea http://localhost:3000/profile debe mostrar el componente ProfilePage, así que abre el archivo y déjalo cómo el siguiente.


Y eso es todo, si ahora te diriges a http://localhost:3000/profile podrás ver nuestra aplicación funcionando.

Si te ha sido de ayuda el post compártelo en las redes sociales con los botones de abajo.