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

Reaccionar hoja de ruta desde cero 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 en cada sección para facilitar el aprendizaje.

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

Prerrequisitos

  1. Conocimientos básicos de HTML, CSS y JavaScript.
  2. Comprensión básica de las características de ES6. Aquí está mi artículo explicando algunas de las características de ES6.
    Para comenzar, al menos debe conocer las siguientes características:
    1. Dejar
    2. Const
    3. Funciones de flecha
    4. Importaciones y exportaciones
    5. Clases
  3. Comprensión básica de cómo usar 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:

React documentación oficial por React

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

Fundamentos de la reacción de Samer Buna

A estas alturas, debe 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 por React

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

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

Obteniendo API con React.js por Ethan Jarrell

Comienza a construir algunos proyectos

  1. Todo-app simple
  2. Aplicación de calculadora simple
  3. Construye un carrito de compras
  4. Muestra las estadísticas de usuario de GitHub con la API de GitHub

Reaccionar enrutador

React Router te ayuda a crear rutas a tus 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

Reaccione el enrutador y la introducción al SPA por Learn Code Academy

Enrutamiento Reaccionar aplicaciones de Scotch.io

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

Proyectos

  1. Una aplicación CURD simple
  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

Paquete web

Webpack es un famoso paquete de módulos de JavaScript. Webpack lo 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 obtener más información 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 representación del servidor es una de las mejores características de React. Se puede usar 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:

React-DOM API por React

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

Reaccionar la representación del servidor por Tyler McGinnis

Reaccione la representación del servidor del enrutador por Roilan Salinas

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

Redux

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

Para empezar:

Tutorial de Redux por Learn Code Academy

Tutorial de Redux para principiantes por Valentino Gagliardi

Reaccionar Redux con 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 :)

Comenzando con Redux por Dan Abramov

Recursos

Reacción impresionante

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