Abrir el seminario web "Creación de una aplicación en Webpack + React + Express"

Hola a todos!

En julio de 2018, nuestro maestro en el curso de Desarrollador de JavaScript, Yuri Dvorzhetsky, realizó un seminario web abierto sobre el tema "Creación de una aplicación en Webpack + React + Express", sin embargo, como parte del segundo curso , donde actúa como maestro en uno de los módulos dedicados a JavaScript. En este material puede familiarizarse con el video y un breve recuento de la clase magistral pasada.

El trabajo en la clase abierta se realizó de acuerdo con el siguiente plan:

1. Presentamos Node JS y Express JS.
2. Presentamos Webpack.
3. Presentamos React.

¡Entonces vamos!

Nodo JS

Con la llegada del nuevo estándar ES6, la popularidad de JavaScript ha aumentado notablemente, como lo demuestran las mismas estadísticas sobre la cantidad de solicitudes de extracción en GitHub para 2017, donde JS ocupa el primer lugar.

Uno de los controladores de JS fue Node JS, una plataforma de software basada en el motor V8 (que traduce JavaScript en código de máquina) y transforma JavaScript de un lenguaje altamente especializado a un lenguaje de propósito general. Muchas personas llaman al Nodo JS JavaScript "del lado del servidor", pero aquí la definición de "servidor" en lugar de "servidor" es más apropiada. Por ejemplo, Node JS tiene un entorno muy rico, que incluye su propio administrador de paquetes llamado npm, que puede ejecutar de forma segura en su máquina (el repositorio está disponible en npmjs.com). Y este no es el único administrador de paquetes, hay otros. El archivo de configuración es package.json y es fácil adivinar que está configurado en formato JSON.

Como parte de la introducción a Node JS, se pidió a los usuarios que completaran los siguientes pasos:

• Descargue NodeJS del sitio oficial nodejs.org/en/;
• instalar en una computadora y verificar la versión;
• asegúrese de que el nodo –v se esté ejecutando en la consola.

El siguiente paso es la creación del primer proyecto Node JS. Podrías hacer esto de dos maneras:

• npm init command (continúe de acuerdo con todo presionando enter);
• descargando el repositorio desde el enlace en GitHub e introduciendo el comando git checkout 0.

El siguiente paso es conocer Express JS.

Express js

Express JS es un servidor web popular para entornos Node JS. En términos de Python, es algo así como Django, solo que, de hecho, no hay nada más que métodos REST. Express JS es perfecto para crear servicios REST que aceptan y envían JSON, pero en general es bastante ascético, por lo que todo lo que necesita es aceptado, como dicen, "atornillado". Por cierto, otros servidores web también se hacen sobre la base. En este caso, debe comprender que Express es algo así como un enlace intermedio (middleware), que aún debe configurarse y llenarse de lógica.
Como parte del seminario web, Express JS se instaló usando el comando npm install express con la adición del modificador –save. También puede simplemente verificar en un git (git checkout 1) con la instalación de ortografía npm. Como resultado, se creó la carpeta node_modules / y el contenido de package.json cambió (aparecieron las dependencias correspondientes).

Después del trabajo preparatorio, llegó el momento de escribir el servidor en sí:

1. Creación del archivo /server.js en la raíz del proyecto.
2. Colocando en él cierto código escrito en JavaScript. El propósito de este script es:

- obtener expreso de los módulos de nodo "misteriosos" /;
- Agregar un controlador a URL /;
- inicie Node JS (utilizando el nodo server.js o el comando npm start).

También puede verificar la etiqueta número 2 (git checkout 2).

JS, ES6 y transpiling

Como se mencionó anteriormente, ES6 es el estándar JS actual. Es un conjunto de características que no son totalmente compatibles con ningún navegador (solo una parte del conjunto es compatible). Como resultado, surge la pregunta: ¿qué sucede si queremos escribir en ES6 moderno, y solo ES5.1 es compatible con los navegadores? Aquí transpiling viene al rescate. Su idea es la siguiente:

1. tenemos código escrito en ES6;
2. lo compilamos (ES6 se convierte a ES5.1);
3. El JS-ku resultante se puede colocar en las páginas del navegador.

Como resultado, es posible usar no solo ES6, sino también diferentes dialectos y extensiones, aumentando así la potencia de JS, por ejemplo:

• "Typed" JavaScript TypeScript (TS);
• JSX - XHTML en JS (React framework);
• Flujo - comprobador de tipo estático.

Una de las transpilaciones más populares y poderosas es Babel. Era él quien estaba acostumbrado a resolver los problemas de la lección abierta.

Beneficios de montaje:

• Puede recopilar todos los archivos JS en un paquete;
• los paquetes se pueden minimizar y ofuscar;
• puede ejecutar simultáneamente MENOS-> CSS, etc.

Paquete web

Webpack es uno de los coleccionistas más sofisticados. Es conceptualmente complicado, especialmente en términos de terminología, pero no tiene igual, y la última versión es más simple que las anteriores. Sin embargo, no debes tenerle miedo, ya que hacer una configuración con él es un trabajo de una sola vez. Y sin exagerar, el número de bollos incluidos en Webpack puede ser "comer en exceso".

Por ejemplo, webpack.config.js se mostró a los oyentes de seminarios web y cada línea del archivo se examinó en detalle para comprender la terminología en su conjunto.

El siguiente paso es crear un cliente con React y Webpack preconfigurados (cliente npx minimal-react client o comando git checkout 3 para personas perezosas). Después de eso, puede ir al cliente / carpeta de CD creado de esta manera y abrir el archivo webpack.config.js, un fragmento del cual se mostró un poco antes.

Reaccionar

Poco a poco, llegó el momento de familiarizarse con React, una biblioteca de JavaScript de código abierto para desarrollar interfaces de usuario.

Para una primera mirada a React y una inmersión "suave" en su entorno, se les pidió a los estudiantes que abrieran client / src / index.js y, si no sucedía nada, abrir client / src / component / app.js.
El núcleo de React es JSX. Este es un dialecto de JS y XHTML escrito en JS. A pesar de que React se puede usar sin JSX, toda su potencia está precisamente en JSX. En cuanto a React en sí, este es uno de los marcos más populares según Hackernoon, basado en un enfoque de componentes. Tiene una gran cantidad de paquetes de soporte y una gran infraestructura. La aplicación en sí es un conjunto de componentes que contienen su marcado y comportamiento.

Características de reacción:

• los componentes pueden usarse entre sí;
• este JS se ejecuta en el navegador;
• en realidad, no hay marcado en el navegador, pero aparece cuando el navegador del cliente ejecuta este código;
• los componentes representan su nota y los componentes utilizados representan la suya;
• el marcado no tiene que ser estático y no lo es;
• Puede pasar información a componentes secundarios;
• Los componentes se pueden representar condicionalmente.

Después de familiarizarse con React, la parte práctica del seminario web continuó, como resultado de lo cual se siguieron los siguientes pasos:

1. inicie webpack en la carpeta del cliente (client / npm run dev);
2. escribiendo su propio componente simple de acuerdo con las instrucciones del maestro o mediante git checkout 4 (Webpack no se pudo detener).

A continuación, se les pidió a los estudiantes que usaran objetos de utilería y realizaran una representación tipodinámica (git checkout 5).
Los matices de los accesorios:

• Contiene propiedades de componentes
• Puede transferir no solo cadenas, sino también objetos;
• Idealmente, la comunicación en la línea de componentes de reacción siempre se basa en accesorios.

En la etapa final de la capacitación práctica, se conectaron el backend y el servidor web (git checkout 6).

El fin

Gracias por su atención y, como siempre, esperamos sus comentarios y sugerencias.