Prólogo

Primero, presénteme , mi nombre es Edik , soy Full Stack Web Developer. Las principales direcciones de Laravel & React.js, Vue.js. Aprendiendo GoLang y Swift.

Aunque ya hay muchas otras fuentes de información, los libros siguen siendo uno de los más comunes, pero hay mucha agua en ellos y decidí no encontrar otra muleta, sino solo tomar notas.

Para estructurar los datos, la información se presentará como una serie de artículos divididos en capítulos .

Escribo estas notas para mí y decidí compartirlas con todo el mundo. Así que no seas duro. Y entonces, ¡vamos!

Capítulo 1. Bienvenido a React

React es una biblioteca popular utilizada para crear interfaces de usuario . Fue creado en Facebook para resolver una serie de problemas asociados con sitios a gran escala.

Reaccionar como una biblioteca

Vale la pena señalar que la biblioteca no es de gran tamaño y se usa solo para una parte de todo el trabajo. Los desarrolladores toman las principales decisiones sobre qué herramientas del ecosistema usar. React es la única "V" en el mundo "MVC" .

Nueva sintaxis de ECMAScript

React aprovecha las nuevas características de ECMAScript . Si no está familiarizado con la última especificación, ver el código React puede causar inseguridad.

JavaScript funcionalmente popular

Un script JavaScript no es un lenguaje funcional, pero se pueden usar métodos funcionales en su código. React enfatiza la prioridad de la programación funcional sobre la programación orientada a objetos . Este cambio de pensamiento puede conducir a ventajas significativas en áreas como pruebas y mejoras de productividad.

Antes de comenzar a trabajar con React, le recomiendo que se familiarice con los conceptos básicos del paradigma de programación funcional.

JavaScript tedioso

Para trabajar con React, debe aprender los conceptos básicos de Webpack . Webpack le permitirá probar el código, dividirlo en módulos, comprimirlo para producción, etc.

El futuro de la biblioteca React

La próxima versión de la biblioteca incluirá la herramienta Fiber, una nueva implementación del algoritmo Core React, cuyo objetivo es aumentar la velocidad de visualización de la imagen en la pantalla . Muchos cambios están relacionados con los dispositivos de destino. No olvides que React todavía se usa en React Native.

Trabajar con archivos

Reaccionar herramientas de desarrollador

Existen varias herramientas que se pueden instalar como extensiones o módulos de navegador adicionales y que pueden ser de algún interés para nosotros:

react-detector es una extensión del navegador Chrome que le permite saber qué sitios están utilizando React .

show-me-the-react es otra herramienta de detección de React .

React Developer Tools es un módulo adicional que amplía la funcionalidad de las herramientas del navegador . Él crea una nueva pestaña en las herramientas del desarrollador donde puede ver los elementos Reaccionar en detalle .

React Developer Tools es una gran herramienta que ahorra mucho tiempo al depurar. Si desea escribir profesionalmente con React, este módulo es muy útil para usted.

Instalar Node.js

Node.js : lenguaje JavaScript sin navegador (JS del lado del servidor). Este es el entorno de tiempo de ejecución utilizado para crear aplicaciones JavaScript tanto en el lado del cliente como del servidor . Se puede instalar en Windows, MacOS, Linux y otras plataformas.

Puede encontrar los detalles de instalación en el sitio web oficial de Node.js.

Para usar React, Node no es necesario. Pero cuando trabaje con React, necesitará usar un administrador de paquetes llamado NPM para instalar dependencias . Se instala automáticamente con Node.

Para verificar si Node está instalado en la terminal, ingrese node -v . Debería ver la versión de su nodo.

 $ node -v v.10.13.0 

Alternativa a NPM

Una alternativa adicional a NPM es Yarn . Esta herramienta fue lanzada por Facebook en colaboración con Exponent, Google y Tilde. Ayuda a administrar de manera más confiable las dependencias de la aplicación . Cuando trabaje con Yarn, notará que es más rápido que NPM.

Instalar Yarn es muy fácil. Después de instalar Node, ingrese:

 $ npm install -g yarn 

Puede encontrar los detalles de instalación en el sitio web oficial de Yarn .

Y después de eso, todo estará listo para instalar paquetes. Al instalar dependencias de packege.json, puede ejecutar yarn en lugar de npm install .

Agregar un paquete usando Yarn:

 $ yarn add [_] 

Eliminar un paquete con hilo:

 $ yarn remove [_]