Crea aplicaciones React sin configurar nada

Effective online education

Learn with industry experts

SHARE THIS ARTICLE AND SHOW WHAT YOU LEARNED

create-react-app es un CLI oficial de React, desarrollado por Facebook y presentado hace algunas semanas. Te permite, como su nombre lo dice, crear aplicaciones de la forma más rápida posible, y con cero configuraciones. En este artículo, conocerás cómo hacerlo y a aprovechar esta nueva herramienta. ¡Vamos!

Instalación

npm install -g create-react-app

Así tendrás el cliente de forma global en tu sistema.

Creando tu primera app

create-react-app hello-platzi

Sólo con esto, tendrás un proyecto JavaScript con React, Webpack,Babel y Eslint, configurado y listo para trabajar. Nada de instalar librerías, ni crear archivos ni tareas.

Levantando nuestro entorno de desarrollo

Ahora, no tendrás que tomarte la molestia de crear algún servidor para poder iniciar tu entorno de desarrollo. Abre la línea de comandos, y teclea lo siguiente:

npm start

Automáticamente, levantarás un servidor de desarrollo en local (http://localhost:3000) que incluye:

Manejo de modulos de Javascript
ES6 y React
Linter que muestra los errores en consola.
Autoprefixer para el CSS.

Manejando tu aplicación

Usa export e import para los componentes:

import React, { Component } from 'react';
import ',/PlatziApp.css';
import Header from './Header';
class PlatziApp extends Component {
  render() {
    return (
      <section className="PlatziApp">
        <Header title="platzi" />
      </section>
    );
  }
}
export default PlatziApp;

Para agregar CSS, debes usar import:

.PlatziApp {
  background: green;
}

import React, { Component } from 'react';
import ',/PlatziApp.css';
import Header from './Header';
class PlatziApp extends Component {
  render() {
    return (
      <section className="PlatziApp">
        <Header title="platzi" />
      </section>
    );
  }
}
export default PlatziApp;

Una característica muy interesante es que también puedes agregar imágenes y tipografías como archivos Javascript:

import React from 'react';
import logo from 'logo.png';
import './Header.css';

function Header (props) {
  render() {
    return (
      <header className="Header">
        <img src={logo} />
        <h1>{props.title}</h1>
      </header>
    );
  }
}
export default Header;

Compilando para producción

create-react-app también te da la posibilidad de exportar tu proyecto listo para producción, minificando tanto el CSS como el JavaScript y agregarlo a tus archivos HTML. Para hacerlo, solo corre este script:

npm run build

Extendiendo tu proyecto

Aunque la configuración que te ofrece esta herramienta es muy completa, por lo general en nuestros proyectos tenemos que extenderla para agregar más tareas, plugins, comandos, etcétera. Pensando en esto, create-react-app tiene un comando extra, el cual te facilita la tarea:

npm run eject

Al ejectutarlo, moverá todas las dependencias, scripts, archivos de configuración — tanto de Webpack como Babel - a tu proyecto, permitiéndote así modificarlo a tu gusto. Así podrás agregar los plugins o loaders que quieras, más herramientas como pre-procesadores CSS y más. En conclusión, este nuevo CLI nos facilita iniciar nuestros proyectos y extenderlos tanto como queramos, usando las mejores herramientas. Sin embargo, no es de uso obligatorio, ya que puedes tener otras preferencias respecto a tu setup… Pero de todas maneras, esta herramienta seguro puede hacer tu trabajo más feliz.

Effective online education

Learn with industry experts

SHARE THIS ARTICLE AND SHOW WHAT YOU LEARNED