Instalación
npm install -g create-react-appAsí tendrás el cliente de forma global en tu sistema.
Creando tu primera app
create-react-app hello-platziSó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 startAutomá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
Usaexport
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 ejectAl 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.
0 Comments
to write your comment