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.
02 - Babel, ES6, ESLint, Flow, Jest, Husky
06 - React Router, Server-Side Rendering, Helmet
09 - Travis, Coveralls, Heroku
Configura tu editor (Atom), MongoDB, Progressive Web App.
Si deseas agregar tu traducción, por favor lea las recomendaciones de traducción para comenzar.
Consultas las traducciones en curso.
- 中文 by @pd4d10
- Italiano by Fabrizio Bertone
- 日本語 by @takahashim
- Русский by React Theming
- ไทย by MicroBenz
Creado por @verekia – verekia.com.
License: MIT