3

Crea aplicaciones React sin configurar nada

1870Puntos

hace 5 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

1870Puntos

hace 5 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

1
2231Puntos

@Jeison Gracias por tu contribución. Osea que puedo usar create-react-app para arrancar proyectos profesionales? no tengo ninguna limitación a futuro con ello, correcto?. a lo que voy y mi duda es si create-react-app no solamente sirve para aprender sobre react y empezar a desarrollar si no que sirva ya cuando quieras empezar un proyecto profesional que pueda escalar a futuro. Gracias!

1
7182Puntos

Cabe aclarar que actualmente ya no se usa el comando “npm install -g create-react-app” sino “npx create-react-app” para crear aplicaciones con create-react-app

Gracias por compartir 😉

0
7237Puntos

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!