Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. React

Usando Create React App

by
Read Time:3 minsLanguages:

Spanish (Español) translation by James Kolce (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

React se ha convertido rápidamente en un popular framework para la creación de views del lado del cliente y del lado del servidor. Había una mayor barrera de entrada a herramientas junto con cierta frustración y fatiga JavaScript de la comunidad. La create-react-app fue creada para hacer frente a esas frustraciones.

Comenzando

Primero te querrás asegurar de que tienes Node instalado en tu sistema. Necesitas tener al menos Node version 4 instalado, pero recomiendan tener version 6 para descargas más rápidas y mejor uso de disco. Puedes usar nvm para cambiar fácilmente entre versiones de Node también.

Luego que tengas Node instalado, querrás abrir tu herramienta favorita de linea de comandos e instalar create-react-app globalmente así puedes ejecutarlo en cualquier parte de tu sistema.

npm install -g create-react-app

Cómo Crear tu Primera Aplicación

Querrás primero abrir la linea de comandos y navegador crear un directory en donde estarás haciendo tu desarrollo. Enseguida vamos a crear la aplicación ejecutando create-react-app tuts-plus-react-app. Esto ejecutará la herramienta CLI para crear nuestra tuts-plugs-react-app.

The command-lineThe command-lineThe command-line

Una vez que la herramienta CLI haya completado, serás llevado a una pantalla de resumen que te hará saber en dónde se ha creado la aplicación y te mostrará una lista de comandos que puedes usar.

The available toolsThe available toolsThe available tools

Enseguida querrás navegar a tu nueva aplicación ejecutando cd tuts-plus-react-app.

Iniciando la Aplicación

Puedes ejecutar la aplicación localmente ejecutando npm start. Una vez que la aplicación inicie, serás automáticamente llevado a https://localhost:3000/ en tu navegador y ver tu nueva aplicación React.

The basic React homepageThe basic React homepageThe basic React homepage

La aplicación usa webpack para ejecutar un servidor local de desarrollo. Existe una característica watch, así que cuando haces cambios a tu código React y guardas, verás los cambios automáticamente mostrándose en el navegador.

When you run the watch featureWhen you run the watch featureWhen you run the watch feature

Si cometes algún error en el código, verás esos errores o alertas mostrarse en el navegador.

An example of failing to compileAn example of failing to compileAn example of failing to compile

Estilos de Código y Pruebas

ESLint es includo para asegurar que tu código sigue estilos de código comunes. Esto te ayudará a asegurarte de que tu código es consistente, lo cual es especialmente útil cuando tienes multiples contribuidores en un proyecto. Sugeriría usarlo si eres nuevo a React también para aprender estilos de código para React y JavaScript.

Si eres familiar con la escritura de pruebas para tu código, Jest está incluido para ejecutar pruebas. Jest es el framework de pruebas que es creado y mantenido por Facebook, los creadores de React. Para crear tus pruebas, ejecuta npm test en tu herramienta de linea de comandos. Esto ejecutará las pruebas y después iniciará un watcher para ejecutar las pruebas cuando tu código de producción cambia. Hay un archivo de prueba existente que puedes agregar en src/App.test.js.

Desplegando tu Aplicación

Cuando hayas terminado de hacer tus ediciones, es momento de tener tu aplicación desplegada. Todo lo que necesitas hacer es ejecutar npm run build en el directorio de tus aplicaciones. Esto usará Babel para transpilar tu código React en código que el navegador entiende. También minificará tu código para asegurar de que tienes el mejor rendimiento en el navegador.

Guia de Usuario

Si decides continuar usando create-react-app, sugeriría pasar tiempo leyendo la guía de usuario. Tiene mucha información útil sobre otros temas relacionados con vistas, como agregar hojas de estilo CSS, importar otros componentes, importar imágenes y fuentes, entre otros. Esto también tiene información sobre practicas de desarrollo web como usar HTTPS, conectar a un back-end de Node, crear aplicaciones web progresivas y más.

Hay también algo de documentación extensiva en pruebas y despliegue de tu aplicación.

Happy Hacking

Espero que ahora seas capaz de ver que tan fácil es crear una aplicación en React usando el proyecto create-react-app. Espero que eso ayude a reducir la barrea y te inicie con React. ¡Se que lo vas a disfrutar!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.