Tu línea de tiempo para aprender React - Xiaomi EU. Xiaomi España y Latinoamerica.

Piensa en estos pasos como capas en una base. Si estuvieras construyendo una casa, ¿te saltarías algunos pasos para hacerlo más rápido? ¿Quizás saltar al concreto antes de poner algunas piedras? ¿Empezar a construir los muros en tierra sin tratar?

O qué tal hacer un pastel de bodas: la parte superior parece la más divertida de decorar, así que por qué no empezar allí! Haremos la parte de abajo más tarde.

¿No?

Por supuesto que no. Sabes que ese tipo de cosas llevarían al fracaso.

Entonces, ¿por qué te acercarías a React intentando aprender ES6 + WebPack + Babel + Reaccionar + Redux + Routing + AJAX de una sola vez? ¿No parece que eso suene como prepararte para el fracaso?

Así que he trazado una línea de tiempo. Da un paso cada vez. No saltes hacia adelante. No aprendas dos pasos al mismo tiempo.

Un paso delante del otro. Dejando entre medias un poco de tiempo cada día, esto será probablemente unas cuantas semanas de aprendizaje.

El tema de este artículo es: evitar estar agobiado. Lento y estable, así se aprende React.

Paso 0: JavaScript

Supongo que ya conoces JavaScript, al menos ES5. Si aún no conoces a JS, deberías dejar de hacer lo que estás haciendo, aprender lo básico y sólo entonces continuar adelante.

Si ya conoces el ES6, sigue adelante y utilízalo. Para que lo sepas, la API de React tiene algunas diferencias entre ES5 y ES6. Es útil conocer ambos sabores – cuando algo sale mal, encontrarás una gama más amplia de respuestas útiles si puedes traducir mentalmente entre ambos estilos.

Paso 0.5: NPM

NPM es el gestor de paquetes reinante del mundo JavaScript. No hay mucho que aprender aquí. Después de instalarlo (con Node. js), todo lo que realmente necesita saber es cómo instalar los paquetes (npm install <package name>).

Paso 1: React

Empieza con Hola Mundo. Usa un archivo HTML simple con algunas etiquetas de script tags en el tutorial oficial o usa una herramienta como React Heatpack para ponerte en funcionamiento rápidamente.

Prueba el tutorial de Hello World en 3 minutos!

Paso 2: Construye unas cuantas cosas y échalas a la basura

Este es el incómodo paso intermedio que mucha gente omite.

No cometas ese error. Avanzar sin tener un conocimiento firme de los conceptos de React nos llevará directamente al fracaso.

Pero este paso no está muy bien definido: ¿qué hay que construir? ¿Un prototipo para el trabajo? ¿Quizás un elegante clon de Facebook, algo carnoso para acostumbrarse a toda la pila?

Bueno, no, esas cosas no. Están llenos de equipaje o son demasiado grandes para un proyecto de aprendizaje.

Los «Prototipos» para el trabajo son especialmente terribles, porque en tu corazón absolutamente sabes que un «prototipo» no será nada de eso. Vivirá mucho más allá de la fase del prototipo, se transformará en software de envío y nunca será desechado o reescrito.

Usar un trabajo «prototipo» como proyecto de aprendizaje es problemático porque es probable que te agobies sobre el futuro. Porque sabes que será más que un simple prototipo, empiezas a preocuparte, ¿no debería tener pruebas? Debería asegurarme de que la arquitectura se escalará… ¿Tendré que refraccionar este desastre más tarde? ¿Y no debería tener pruebas?

Este problema específico es lo que cubro en puro React: una vez que superas «Hola Mundo», ¿cómo aprendes a «pensar en React»?

Te daré una idea: los proyectos ideales están entre «Hola Mundo» y «Todo Twitter».

Construye algunas listas de cosas (TODOs, cervezas, películas). Aprende cómo funciona el flujo de datos.

Toma algunas interfaces de usuario grandes existentes (Twitter, Reddit, Hacker News, etc.) y rompe un pequeño trozo para construirlo – esculpiéndolo en componentes, construyendo las piezas y renderizándolo con datos estáticos.

Se te viene la idea: aplicaciones pequeñas y desechables. Deben ser desechables, de lo contrario te colgarás en el mantenimiento y la arquitectura y otras cosas que no importa todavía.

Puro React se basa en este principio.

Paso 3: WebPack

Las herramientas de construcción son un gran coñazo. La configuración de Webpack se muestra como un trabajo duro, y es una mentalidad totalmente diferente a la de escribir código UI. Esta es la razón por la que Webpack está en el Paso 3, en lugar del Paso 0.

Recomiendo Webpack – The Confusing Parts como introducción a Webpack y su forma de pensar.

Una vez que entiendas lo que hace (agrupa todo tipo de archivos, no sólo JS) y cómo funciona (cargadores para cada tipo de archivo), la parte del Webpack en tu vida será mucho más sencilla.

Paso 4: ES6

Ahora que estás en el Paso 4, tienes todos los pasos anteriores como contexto. Los bits de ES6 que aprendes ahora te ayudarán a escribir más limpio, mejor código y más rápido. Si hubieras intentado memorizarlo todo al principio, te habrías quedado atascado – pero ahora, ya sabes cómo encaja todo.

Aprenda las partes que usará más: funciones de flecha, let/const, clases, desestructuración e import.

Paso 5: Enrutamiento

Algunas personas mezclan React Router y Redux en su cabeza – no son parientes o dependientes el uno del otro. Puedes (y deberías) aprender a usar React Router antes de bucear en Redux.

En este punto tendrás una base sólida en «pensar en React» y en el aprendizaje basado en componentes del router React.

Aprenda las partes que usará más: funciones de flecha, let/const, clases, desestructuración e importación.

Paso 6: Redux

Dan Abramov, el creador de Redux, te dirá que no añadas Redux demasiado pronto, y por una buena razón – es una dosis de complejidad que puede ser desastrosa desde el principio.

Los conceptos detrás de Redux son bastante simples. Pero hay un salto mental desde entender las piezas hasta saber cómo usarlas en una aplicación.

Por lo tanto, repite lo que hiciste en el paso 2: crear aplicaciones desechables. Construye un montón de pequeños experimentos de Redux para internalizar realmente cómo funciona.

Sin pasos

Inmersión en React eligiendo uno de los proyectos de bajillion por ahí sólo le confundirá. Incluyen todas las bibliotecas posibles y obligan a crear una estructura de directorios, y ninguno de ellos es necesario para las aplicaciones más pequeñas, o cuando empiezas.

Y si estás pensando «¡pero Dave no estoy construyendo una pequeña aplicación, estoy construyendo una aplicación compleja que servirá a millones de usuarios! ve y relee más sobre prototipos.