Cómo aprender a reaccionar: una hoja de ruta desde principiante hasta avanzado

¡Hey gente!

Esta guía es para personas que están comenzando con React. He seleccionado cuidadosamente los mejores videos y artículos de cada sección para facilitar el aprendizaje.

Nota: no estoy asociado con ninguno de los sitios web mencionados a continuación. Es puramente mi opinión.

Prerrequisitos

  1. Conocimientos básicos de HTML, CSS y JavaScript.
  2. Comprensión básica de las funciones de ES6. Aquí está mi artículo que explica algunas de las características de ES6.

    Para comenzar, debe conocer al menos las siguientes características:

    1. Deja

    2. Const

    3. Funciones de flecha

    4. Importaciones y Exportaciones

    5. Clases

  3. Comprensión básica de cómo utilizar npm.

Empezando

Puede usar editores de código en línea para practicar, o puede usar la aplicación Create React.

He configurado un entorno de desarrollo en JSFiddle y en Codepen.

Para comprender todos los fundamentos de React, puede comenzar con los siguientes tutoriales:

Reaccionar la documentación oficial por React

Guía para principiantes de React por Kent C. Dodds

Fundamentos de React por Samer Buna

A estas alturas, debería tener una idea básica de los fundamentos de React. Es suficiente comenzar a desarrollar aplicaciones web simples en React.

Ahora, eche un vistazo al tutorial oficial de React:

Tutorial oficial de React de React

Es un artículo bien escrito que cubre los fundamentos de React. Y también explica los temas específicos con mucha claridad.

Por último, pero no menos importante, aprenda a conectarse a las API con las aplicaciones React:

Obteniendo API con React.js por Ethan Jarrell

Empiece a construir algunos proyectos

  1. Aplicación simple de tareas pendientes
  2. Aplicación de calculadora simple
  3. Construye un carrito de compras
  4. Muestra las estadísticas de usuario de GitHub usando la API de GitHub

Reaccionar enrutador

React Router le ayuda a crear rutas a sus aplicaciones de una sola página. Es muy potente y fácil de usar con su aplicación React.

Para empezar:

Tutorial de React Router por Paul Sherman

React Router e introducción a SPA por Learn Code Academy

Enrutamiento de aplicaciones React de Scotch.io

Estos artículos son más que suficientes para comenzar con el enrutamiento de React.

Proyectos

  1. Una sencilla aplicación CURD
  2. Clon de Hacker News

Si está realmente interesado en aprender mucho sobre el enrutador, consulte la siguiente guía:

Guía completa de React Router por React Training

Webpack

Webpack es un famoso paquete de módulos de JavaScript. Webpack le ayuda a mantener las dependencias como archivos estáticos para su proyecto para que los desarrolladores no tengan que hacerlo.

Webpack también viene con cargadores. Los cargadores ayudan a ejecutar tareas específicas en torno a su proyecto.

Para aprender mucho más sobre Webpack, siga los siguientes tutoriales.

Cuándo y por qué usar Webpack de Andrew Ray

Tutorial de paquete web de Learn Code Academy

Para configurar su entorno React local usando Webpack, puede consultar el siguiente repositorio de GitHub:

Plantilla React SPA de Hanif Roshan

Creo que los tutoriales anteriores son suficientes para comenzar con Webpack. Sin embargo, para obtener un conocimiento profundo, puede consultar las siguientes guías:

Introducción al paquete web por SurviveJS

Documentos oficiales de Webpack

Representación del servidor

La renderización del servidor es una de las características más interesantes de React. Se puede utilizar con cualquiera de las tecnologías de back-end.

La representación del lado del servidor (SSR) en React le ayuda a crear componentes en el servidor y representarlos como HTML en su navegador. Y cuando todos los módulos de JavaScript se descargan en el navegador, React sube al escenario. ¡Simple!

En primer lugar, eche un vistazo a la API React-DOM:

API React-DOM de React

Y siga los tutoriales a continuación para obtener un conocimiento profundo:

Representación del servidor React por Tyler McGinnis

Representación del servidor de enrutador React por Roilan Salinas

Guía de renderización del lado del servidor de React por Dennis Brotzky

Redux

Redux es una biblioteca de JavaScript desarrollada para mantener los estados de las aplicaciones. Cuando crea una aplicación compleja, agregará una sobrecarga para administrar los estados de los componentes. Redux le ayuda a almacenar todos sus estados en una sola fuente. Y, por supuesto, React juega bien con Redux :)

Para empezar:

Tutorial de Reduxpor Learn Code Academy

Tutorial de Redux para principiantes de Valentino Gagliardi

Reaccionar Redux por trucos CSS

Estos tutoriales son más que suficientes para comenzar con Redux. Sin embargo, no puedo resistirme a mencionar el siguiente tutorial también. Vale la pena :)

Empezando con Redux por Dan Abramov

Recursos

Reaccionar impresionante

Si te gusta el artículo, no olvides compartirlo :)