Skip to content

🎉 V2 release! 🎉 — Step-by-step tutorial to build a modern JavaScript stack.

License

Notifications You must be signed in to change notification settings

JMEspiz/js-stack-from-scratch

 
 

Repository files navigation

Stack JavaScript desde cero

Build Status Release Dependencies Dev Dependencies Gitter

React Redux React Router Flow ESLint Jest Yarn Webpack Bootstrap

Bienvenido a mi tutorial (@verekia) sobre el stack javascript: ** Stack Javascript desde Cero**.

🎉 Esta es la V2 del tutorial, con grandes cambios desde la edición de 2016. Puedes ver la Lista de Cambios!

Esta es una guía orientada directamente a ensamblar un stack JavaScript. Requieres de algunos conocimientos generales de programación, y conceptos básicos de JavaScript. Se centra en acoplar varias herramientas y ofrecerle el ejemplo más simple posible para cada herramienta. Puedes ver este tutorial como una manera de escribir tu propia boilerplate desde cero. Debido a que el objetivo de este tutorial es ensamblar varias herramientas, no voy a entrar en detalles sobre como funciona cada una individualmente. Consulta la documentación o encuentra otros tutoriales si deseas adquirir un conocimiento más profundo en estas.

No necesitas usar este stack entero si vas a construir una simple página web con pocas interacciones de JS (una combinación de Browserify/Webpack + Babel + jQuery es suficiente para poder escribir código ES6 en archivos diferentes), pero si quieres crear una aplicación web que sea escalable, y necesitas ayuda para configurar las cosas, este tutorial será muy bueno para ti.

Una gran parte de lo descrito en este tutorial usa React. Si estas comenzando y sólo quieres aprender React, create-react-app te permitirá levantar y ejecutar rápidamente un entorno de React ya preconfigurado. Recomiendo este enfoque para quien se esté incorporando a un equipo que utilice React y necesite ponerse al día con un ambiente de pruebas. En este tutorial no utilizaremos React preconfigurado, porque quiero que entiendas todo lo que hay detrás de su funcionamiento.

Los códigos de los ejemplos estan disponibles en cada capítulo, puedes ejecutarlos usando yarn && yarn start. Sin embargo, te recomiendo que escribas todo desde cero siguiendo las instrucciones paso a paso.

El código final esta disponible en el repositorio JS-Stack-Boilerplate, en releases. Así como también un demo en vivo.

Funciona en Linux, macOS, y Windows.

Tabla de contenidos

01 - Node, Yarn, package.json

02 - Babel, ES6, ESLint, Flow, Jest, Husky

03 - Express, Nodemon, PM2

04 - Webpack, React, HMR

05 - Redux, Immutable, Fetch

06 - React Router, Server-Side Rendering, Helmet

07 - Socket.IO

08 - Bootstrap, JSS

09 - Travis, Coveralls, Heroku

Próximamente

Configura tu editor (Atom), MongoDB, Progressive Web App.

Traducciones

Si deseas agregar tu traducción, por favor lea las recomendaciones de traducción para comenzar.

V2

Consultas las traducciones en curso.

V1

Credits

Creado por @verekiaverekia.com.

License: MIT

About

🎉 V2 release! 🎉 — Step-by-step tutorial to build a modern JavaScript stack.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%