2

Crea aplicaciones React sin configurar nada

1817Puntos

hace 4 años

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.
Jeison
Jeison
@json

1817Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
1
707Puntos

Excelente post, gracias me sirvió de mucho!

1

Wow super interesante… Esto facilita mucho la vida a la hora de preparar el entorno de desarrollo

0
6313Puntos

hola que tal?! tengo una duda: importo las imagenes tal cual como se explica en el post (y documentacion de react), pero aun asi no se me renderizan en el navegador… que debo hacer? ya he buscado y buscado y no encuentro una solucion. La unica opcion que no he realizado es instalar file-loader y url-loader aunque se supone que como cree la aplicacion mediante create-react-app webpack ya viene configurado y no hace falta instalar esos componentes… Corrijanme si me equivoco en algo, ayudenme please jajaja… Gracias!