Creando nuestro primer componente usando ReactJS y subiéndolo a Now

4 min readAug 30, 2016

ReactJS es una librería creada por Facebook con el fin de crear interfaces de usuario y animar el desarrollo de las Single Page Applications (aplicaciones de una sola página). Esta librería está constantemente mantenida por el equipo de Facebook e Instagram (empresa comprada por Facebook) y por los desarrolladores de su comunidad en GitHub.

En esta ocasión me gustaría enseñarles a construir desde cero un componente en ReactJS, usando ES6 y create-react-app.

create-react-app es la alternativa de Facebook Incubator para crear y desarrollar apps en ReactJS de la manera más simple y rápida posible. Es una CLI (Interfaz de Línea de Comandos, del inglés Command Line Interface). Nos permite crear la base de una app en React con solo create-react-app nombredelapp.

Durante este tutorial crearemos una aplicación básica con esta CLI, le añadiremos un componente ya que el de Hello World lo trae por defecto y haremos deploy a Now.

Si deseas ver el código del ejemplo tienes el repositorio en Github. Si miras los commits es prácticamente el proceso paso a paso.

Paso 1: Instalar las dependencias generales y del proyecto

En esta ocasión instalaremos de manera general algunas dependencias como el CLI y la herramienta de deploy a Now.

npm install -g now now-serve create-react-app

Como dependencias de nuestro proyecto en esta ocasión no tendremos que instalar nada ya que el CLI lo hará por nosotros.

Paso 2: Crear la aplicación usando create-react-app

Nos situamos en el lugar donde queremos crear la aplicación y corremos el siguiente comando:

create-react-app [nombredelaapp]

Sustituyendo [nombredelaapp] por el nombre de nuestra aplicación. Yo la llamé react-create-component.

Una vez creada si entramos a la aplicación y la servimos usando el comando npm start nos encontraremos con esto en el navegador. Es el Hello World de la aplicación.

Paso 3: Creando el componente Name y su funcionalidad

Vamos a crear nuestro primer componente. Este va a estar compuesto por un texto y un input que al modificarlo con nuestro nombre el texto nos saludará. La lógica básica del componente es esta, yo lo escribí en el mismo app.js:

class Name extends Component {  
   constructor(props) {
     super(props)
     this.state = {name: 'señor desconocido'}
   }
   changeName() {
     let n = document.getElementsByClassName('input')[0].value
     this.setState({name: n})
   }
   render() {
     return (
       <div className="App-sayname">
         <input type="name" className="input" placeholder="Tu nombre" onChange={this.changeName.bind(this)}/>
         <p className="input-helper">Bienvenido {this.state.name}!</p>
       </div>
     );
   }
 }

Voy a explicar un poco de lo que hace este componente:

El método render() devuelve el código HTML, aunque un poco adaptado para React, se denomina código JSX (la totalidad del componente). Esto es obligatorio a la hora de crear un componente.

Dentro del render() tenemos:

Un input con onChange, lo cual significa que cada vez que cambie va a ejecutar la función dada.Nota: el .bind(this) sirve para indicarle a la función que use el this que hay en ese método. De esa manera evitamos que cuando ejecutemos alguna función como this.setState nos devuelva un error.
Una etiqueta de párrafo que devuelve Hola seguido de lo que devuelva la variable this.state.name.

El método constructor() propietario de la definición de clases de JavaScript que realiza lo siguiente:

Define la variable this.state.name como señor desconocido para que desde un principio el párrafo devuelva Hola señor desconocido y no se quede en blanco.
La función changeName() creada por nosotros, no hace parte de la especificación de ReactJS ni de la de JavaScript, es una función tal cual que obtiene el valor de el input y se lo da a la variable que tiene el párrafo cada vez que es invocada.

Un último paso para que todo funcione, recuerda añadir nuestro componente <Name /> a el componente app el cual es el que se renderiza:

render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit {gfm-js-extract-pre-1} and save to reload.
        </p>
        <Name />
      </div>
    );
  }
}

Paso 4: Añadiendo estilos básicos

En el archivo app.css añadí estos estilos para poder ver mejor nuestro componente:

input {  
   height: 50px;
   font-size: 2em;
   width: 200px;
 }

Ahora sí, si vamos al navegador, podremos ver el resultado:

Paso 5: Haciendo ‘deploy’ a Now de nuestra aplicación

Now es un servicio que te permite realizar deployments globales en tiempo real. Es como otro servicio en la nube pero ellos tienen la misión de ayudar a hacer deploys con un solo comando. Distribuyen tu contenido en servidores de AWS, Azure y GCP alrededor de todo el mundo. Hay distintos planes pero para este ejemplo con el gratis vas sobrado.

El primer paso es muy sencillo necesitamos crear el build de la aplicación que es lo que vamos a servir a Now:

npm run build

Y finalmente hacemos deploy con la ayuda de now-serve:

ns build

Extra: Si quieres puedes crear un script de NPM para solo tener que hacer npm run deploy a la hora de hacer deploy:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "deploy": "npm run build && ns build"
  },

Si tienes alguna duda o te gustaría comentar algo escribe tu comentario más abajo. Estoy para ayudarte.