modern js

Road to Modern JavaScript y Reaccion

El propósito de esta guía es proporcionar una lista de varios resurios gratuitos (¿artículos, libros, videos?) Que lo ayudará a aprender JavaScript moderno y la Biblioteca React.

️ Esta guía no está destinada a enumerar todo lo que debe saber sobre JavaScript o React. He tratado de enumerar lo que podría ser útil si fueras totalmente nuevo en este mundo en función de mi experiencia y las personas que he conocido. Si tu cosa favorita no se enumera allí, no significa que no me guste o lo desapruebe. Por ejemplo, TypeScript o GraphQL son geniales, pero no creo que sea obligatorio aprender eso primero como principiante .

1) JavaScript moderno?

Tutoriales que cubren todo:

• Learn Web Development también le enseñará HTML y CSS.
• Eloquent JavaScript es perfecto para aprender JS y conceptos generales de programación.
• El moderno tutorial de JavaScript cómo se hace ahora. Desde lo básico hasta temas avanzados con explicaciones simples pero detalladas.
• ¿Aprender ES6 (ECMAScript 2015)? Si solía escribir JavaScript hace un tiempo y quiere ponerse al día con las sintaxis modernas.

Artículos y videos que me gustaron:

• JavaScript moderno explicó para los dinosaurios que aprenderá conceptos básicos sobre NPM, Babel, Webpack, etc. y la historia detrás de esto.
• Comprender el oso en JavaScript Si proviene de otro lenguaje de programación, puede sentirse incómodo con cómo podemos declarar variables en JS. ¡Este artículo te ayudará a sentirte mejor!
• ¿Debug JavaScript? Firefox o Edge también tienen su propio DevTools, pero personalmente prefiero usar los cromados al codificar.
• ¿Programación funcional en JavaScript? Esos videos están hechos por un antiguo desarrollador de Spotify JS. Él le enseñará conceptos esenciales como promesas, cierres o funciones de orden superior. Esas cosas son esenciales en React.
• Composición sobre herencia? En la escuela tuve que hacer mucha programación orientada a objetos. Este video me ayudó a entender por qué no siempre es necesario.

Documentación

A veces deberá buscar documentación, por ejemplo, si no conoce una palabra clave específica en una base de código o si desea aprender a usar una función nativa. Por supuesto, puede usar cualquier motor de búsqueda o StackOverflow, pero recomendaría usar los documentos web MDN.

2) Reaccionar ⚛️

• Lo que es React: una introducción visual para principiantes
• JavaScript para saber para reaccionar
• El documento oficial es el mejor lugar para aprender a reaccionar.
• ¿La guía para principiantes para reaccionar?
• Consejos de reacción progresivos para hacer que su sitio reaccione el rendimiento. Web.dev también tiene muchos artículos como ese.
• Patrones de aprendizaje Patrones para construir aplicaciones web potentes con Vanilla JavaScript y React.

Ganchos? Componentes de clase

Los ganchos son muy específicos, le sugiero que verifique por qué reaccionar los ganchos. ? Para obtener más información sobre React History y o por qué ahora usamos ganchos. También es posible que desee aprender sobre componentes de clase y algunos patrones utilizados para compartir la lógica entre los componentes (antes de la llegada de los ganchos) porque todavía está presente en muchas basas de código:

• Compare el diagrama de flujo de gancho con el diagrama de métodos del ciclo de vida del componente de clase
• Componentes de orden superior: un patrón de diseño de aplicación React
• Representar accesorios

Gestión estatal y otras bibliotecas

En algún momento, podría pensar que sería bueno tener acceso a algún tipo de estado global en cualquier componente React para evitar transmitir accesorios una y otra vez ... ¡La gente podría decirle que use Redux o Mobx o Apollo o Xstate o [inserte el nombre de la biblioteca popular] para lograr eso, pero podría estar exagerado! Recomendaría leer el artículo React State Management Bibliotecas y cómo elegir obtener una visión general agradable. ¡Las bibliotecas React para 2023 también abordarán este tema y muchos más!

3) ¿Qué sigue? ?

• Manténgase al día y descubra cosas nuevas con React Newsletter y Bytes Boletter;
• Practica reaccionar con create-react-app o directamente en su navegador en Codesandbox
• Construir aplicaciones listas para producir con: vite, next.js, gatsby, react nativo a través de expo;

¿Qué pasa con el estilo? ?

Algunos conceptos básicos

• Aprenda CSS un curso CSS Evergreen y referencia para nivelar su experiencia en el estilo web.
• CSS moderno explicado para los dinosaurios
• CSS-in-JS o CSS-and-JS
• El estilo y el funcionario de CSS React Doc

Bibliotecas de Somne que puede usar para administrar su estilo:

• Viento de cola
• Módulos CSS
• Extracto de vainilla
• Emoción
• Componentes de estilo, creo que son los mejores entre la opción para aquellos que están acostumbrados a escribir CSS "clásicos" y quieren aprovecharlo de la mezcla con JavaScript.

Sistemas de diseño

Tal vez solo desee crear una aplicación y evitar pasar mucho tiempo escribiendo CSS y HTML. Le sugiero que use bibliotecas como material-UI, diseño de hormigas o polaris. Si desea construir su propio sistema de diseño, le sugiero que lea el diseño atómico.

¿Qué pasa con las pruebas? ?

• Pero realmente, ¿qué es una prueba de JavaScript?
• Cómo usar el tutorial de la biblioteca de pruebas React Comprender la broma y aprender a escribir pruebas automatizadas a través de la biblioteca de pruebas React (hay otras bibliotecas de pruebas, pero RTL es excelente recomendado por el documento oficial).
• Comprender la burla de los simulacros de broma es una técnica para aislar sujetos de prueba reemplazando las dependencias con objetos que puede controlar e inspeccionar.
• ¿Por qué ciprés? ? una biblioteca para escribir pruebas de extremo a extremo y más;

Otras herramientas que no

• Editor de código: VS Código;
• Formatero de código automático: Prettier;
• Linter: Eslint;
• Administre Git a través de una interfaz de usuario en lugar de comandos: SourCetree o VS Code;
• Build e implementan su aplicación: netlify;
• Integración continua: Travis CI;
• Comprar nombre de dominio: dominios de Google;

Otras bibliotecas a las que no

• Enrutamiento: React Router;
• Internacionalización: Linguijs;
• Desarrolle sus componentes de forma aislada y compártalos con su equipo a través del libro de cuentos. Implemente su libro de cuentos y ejecute pruebas de captura de pantalla en cada historia a través de Chromatic;
• API burlona cuando se prueba: trabajador de servicio simulado;

Cursos pagados?

Los que recomiendo después de completarlos:

• ¿Cursos de Wes Bos? JavaScript, React, CSS y más; ¡Algunos son incluso gratis !
• ¿Cursos de Kent C. Dodds? Reaccionar, prueba;