Desarrollador frontend - curso 47.600 rublos. de Loft School, formación 3 meses, Fecha 28 de noviembre de 2023.

Desarrollo web avanzado Vue.js

Semana 1: flujo de trabajo

— Conocemos al mentor y al grupo.
— Utilizando el ensamblaje del paquete web, creamos el diseño seleccionado para el proyecto final.
— Publicamos el resultado en Github y lo enviamos al mentor para su verificación.

Apertura del curso
1. Cómo va el entrenamiento (01:09:37)

Vista. Características clave

1. Teoría (04:49)
2. Hola mundo (06:20)
3. Manejo de eventos (02:38)
4. Manejo de múltiples eventos (01:19)
5. Valores dinámicos (01:30)
6. Introducción a las Directivas (05:40)
7. Directivas abreviadas (00:37)
8. Métodos con parámetros (01:36)
9. Modificadores de eventos (08:52)
10. Propiedades calculadas (10:50)
11. Vigilantes (06:02)
12. Trabajando con clases (03:37)
13. Trabajar con propiedades CSS (02:49)
14. Accediendo a elementos DOM (03:50)
15. Representación condicional (04:46)
16. Listas de renderizado (05:12)
17. Creando un componente (04:16)
18. Componentes locales (02:44)
19. Reactividad de datos (04:35)
20. Propiedades de los componentes (03:52)
21. Tragamonedas (04:37)
22. Tragamonedas con alcance (04:52)
23. Eventos personalizados (04:27)
24. Teletransportes (02:53)

Vista. Componentes de un solo archivo
1. Instalación del proyecto. VUE-CLI (09:22)
2. Componente de archivo único (03:18)
3. Trabajando con estilos (07:02)
4. Pasar atributos y controladores (02:53)
5. Archivos individuales (01:26)
6. Validación de propiedades de componentes (07:35)
7. Validación de eventos de usuario (02:01)
8. Comunicación de datos bidireccional (04:11)
9. Modelo v personalizado (05:51)
10. Ganchos del ciclo de vida (07:08)
11. Impurezas (04:40)

MNP
1. ¿Qué es la NPM? (05:50)
2. Instalación y actualización de npm (02:33)
3. Ayuda con npm (01:28)
4. Encontrar e instalar paquetes (04:24)
5. Dependencias de paquetes (02:09)
6. Archivo de manifiesto paquete.json (03:02)
7. Eliminación y actualización de paquetes (03:02)
8. dependencias y devDependencies (01:51)
9. Paquete web y npx (04:04)
10. secuencias de comandos npm (04:02)
11. npm, git y github (02:40)

Hilo
1. Hilado (07:07)

Paquete web. Lo esencial
1. Teoría (01:09)
2. Configuración mínima y lanzamiento (04:41)
3. Nomenclatura de archivos (02:34)
4. Cargadores (04:28)
5. Servidor de desarrollo (02:43)
6. Complementos (02:34)
7. Buscar módulos (03:18)
8. Mapas de Sors (03:17)
9. Dev y otros (02:42)
10. Tipos de módulos (03:00)
11. Montaje mínimo (05:30)

ESLint. Descripción general de la configuración
1. Introducción (01:26)
2. Instalación y lanzamiento (03:10)
3. Corrección de errores (02:04)
4. Configuración (05:21)
5. Formato de salida (00:52)

Figma para maquetador
1. Figma. Interfaz (04:37)
2. Figma. Organización del proyecto (01:32)

Caja flexible
1. Introducción (00:45)
2. Contenedor flexible (01:43)
3. Alineación del eje principal (01:37)
4. Alineación del eje transversal (01:50)
5. Alinear un solo elemento (01:09)
6. Elemento flexible - contenedor (00:53)
7. Dirección de los ejes (03:18)
8. Contenedor multilínea (02:54)
9. Alinear contenido multilínea (01:25)
10. Proporciones (02:46)
11. Proporciones de compresión (01:24)
12. Tamaño básico (04:02)
13. Orden de elementos (02:40)

GIT
1. Introducción (07:03)
2. Comenzando con Git (03:01)
3. Creando un nuevo repositorio (01:09)
4. Agregar archivos al índice de Git (área de observación) (06:49)
5. Creando una confirmación (07:17)
6. Confirmar navegación. Cancelar cambios (12:10)
7. Ciclo típico de Git (03:34)
8. Ramificación en Git (11:27)
9. Conflictos al fusionar sucursales (06:06)
10. Datos de guardado temporales (sin compromiso) (05:25)
11. Trabajar con repositorios remotos (20:04)
12. Uso de páginas de GitHub para alojar proyectos (04:31)

Vista. Taller #1
1. Inicio del proyecto (05:24)
2. Componente de encabezado (04:13)
3. Componente de icono (05:06)
4. Mostrando una lista de componentes (02:56)
5. Alternar componente (03:19)

Semana 2: Vue.js

— Hacemos que el diseño sea adaptativo.
— Implementaremos el bloque “Habilidades” en Vue.js.
— Implementaremos el bloque “Mis proyectos” en Vue.js.
— Implementamos el bloque "Control deslizante para reseñas" utilizando el complemento Vue.js.

libro de cuentos
1. Instalación (01:56) 
2. Primera historia (04:35)
3. Conectando un componente (01:24)
4. Expansión de configuración (04:26)
5. Estilos generales (02:08)
6. Historia del componente (05:23)
7. CDD (04:16)
8. Creando un componente (02:28)
9. Aplicar un componente (02:29)
10. Registro de eventos (03:29)
11. Complemento de fondos (01:41)
12. Perillas adicionales (02:28)
13. Fuente del complemento (02:17)
14. Conclusión (01:11)

JavaScript-ES6
1. Interpolación de cadenas (07:39)
2. Simplificación de descripciones de métodos (13:35)
3. Valores predeterminados (30:08)
4. Tarea de Desestructuración: Objetos (07:30)
5. Nuevas funciones y navegadores antiguos (13:07)

Asincronía en JavaScript
1. Temporizadores (23:44)
2. Cargando imágenes (22:21)
3. Promesas (36:29)
4. AJAX (32:28)

Axios. Biblioteca de consultas
1. Introducción (02:23)
2. Enviando una solicitud (02:12)
3. Descripción general de la configuración (04:30)
4. Cuerpo de la solicitud (01:43)
5. Configuración predeterminada (01:38)
6. Interceptores (02:11)
7. Servicios (02:33)
8. espera asíncrona (01:18)

Vista. Taller #2
1. Preparación (02:39)
2. Conectando un componente (02:16)
3. Salida de control (02:38)
4. Componente de progreso (05:09)
5. Solicitud al servidor (06:38)
6. Salida de datos (05:55)

Semana 3: JavaScript nativo

— Estamos creando el panel de administración.
— Estudiamos Storybook y lo aplicamos en nuestro proyecto.
— Realizamos la tramitación (validación) necesaria de los formularios de proyecto.

VueRouter. Enrutamiento en el navegador
1. Introducción (04:31)
2. Construcción de enlaces (02:41)
3. Navegación por software (02:35)
4. Parámetros de ruta (04:42)
5. Parámetros como propiedades (00:49)
6. Opciones avanzadas y 404 (03:29)
7. Rutas anidadas (03:23)
8. Clases de actividades (02:37)
9. Varias vistas de enrutador (01:08)
10. Importaciones dinámicas (02:00)
11. Hermosa URL (02:16)

Vuex. Gerente Estatal
1. Introducción (01:13)
2. Conexión (02:30)
3. Acción (02:27)
4. Mutaciones (02:16)
5. Captadores (02:02)
6. Aplicación en la práctica (08:07)
7. Funciones de asistente (02:59)
8. Módulos (05:18)
9. Módulos dinámicos (01:38)
Pregunta respuesta

Vista. Taller #3
1. Diseño (04:33)
2. Salida de datos (02:42)
3. Preparándose para la animación (02:14)
4. Visualización de botones (03:45)
5. Carga de contenido adicional (11:38)
6. Mostrar diapositiva después de la transición (02:17)

Semana 4: Vue.js, SPA

— Implementamos SPA en el panel de administración.
— Estudiamos cómo trabajar con datos a través del almacenamiento de la aplicación.
- Usamos ajax para comunicarnos con la API y configurar interacciones cliente-servidor.

Autorización. Fichas
1. Tipos de autorización (04:20)
2. GitHub OAuth (01:42)
3. Creando una aplicación GitHub (02:28)
4. Recibir una ficha (08:38)
5. Almacenamiento de datos en código (01:46)
6. Protección de ruta (04:13)

Vista. Taller #4
1. Preparación (01:33)
2. Creando una acción (02:30)
3. Estado de descarga (04:01)
4. Solicitud (02:27)
5. Eliminando duplicados (03:29)
6. Protección de ruta (03:23)
7. Cerrar sesión (00:51)

Semana 5 - Práctica

— Mostramos los datos guardados desde el panel de administración en la página de destino.
— Probamos los componentes.
— Trabajo en grupo de un proyecto con un mentor.

Vue.js. API de composición
1. Introducción (01:29)
2. Ejemplo general (03:57)
3. Función de canción (01:51)
4. Función reactiva (00:55)
5. Función toRef (01:35)
6. Función toRefs (00:58)
7. Propiedades calculadas (00:56)
8. función de reloj (01:41)
9. Función watchEffect (03:14)
10. función de solo lectura (00:40)
11. Funciones de prueba (02:30)
12. función no referencia (01:27)
13. Ganchos del ciclo de vida (00:58)
14. Ejemplo. Descripción general del proyecto (00:53)
15. Ejemplo. Cargando funcionalidad (01:20)
16. Ejemplo. Categorías (02:20)
17. Ejemplo. Filtrado inicial (02:46)
18. Ejemplo. Cambio de filtro (02:11)
19. Ejemplo. Otras funciones de filtrado (02:03)
20. Ejemplo. Método de clasificación (03:05)
prueba de código JS
1. Introducción (16:05)
2. Broma (15:47)
3. Los beneficios de las pruebas (09:01)
4. Cobertura (10:02)

Vue.js. Pruebas de componentes
1. Configurando paquetes (04:39)
2. Envoltorio de componentes (04:13)
3. Qué probar (02:48)
4. Primera prueba (05:25)
5. Comprobando el evento de emisión (03:44)
6. Transferiendo propiedades (02:58)
7. Trabajar con elementos de formulario (05:42)
8. Ajustes generales (01:15)
9. Moki (05:04)
10. Conectando bibliotecas (02:32)
11. Prueba de acción (03:26)
12. Probando la tienda (02:53)
13. Pruebas con imágenes (03:08)

Pruebas. moki
1. Creando una maqueta (02:39)
2. Trabajando con argumentos (01:39)
3. Valor de retorno (02:57)
4. Módulos (04:24)
5. Temporizadores (02:05)

Vista. Taller #5
1. Componente simple (03:03)
2. Componente con tienda (05:21)
3. Pruebas. Preparación (03:20)
4. Pruebas. Alternador (02:38)
5. Pruebas. Problemas (05:08)

Semana 6 - Completando el proyecto

— Estamos ultimando el proyecto.
— Presentamos el proyecto para revisión por parte de mentores.
— Calificación de diplomas.

Cómo conseguir un trabajo en TI: consejos y trucos
1. ¿Cómo conseguir un trabajo en TI? Búsqueda, entrevista y periodo de prueba (42:21)
2. ¿Cómo encontrar trabajo remoto y pedidos autónomos? (20:12)
3. Primer trabajo en TI: ¿cómo comportarse? Prácticas, empleo oficial y trabajo “por comida” (14:11)
4. ¿Cómo pasar el período de prueba? (27:10)
5. Cómo prepararse para una entrevista en una empresa FAANG (08:52)
6. El proceso de carga de una página web (25:19)
7. Entrevista al programador: todo lo que necesita saber (01:24:07)
8. Resolviendo un problema a partir de una entrevista a un programador (19:36)
9. Entrevista al desarrollador frontend (01:37:17)

Desarrollo de aplicaciones web React.js

Semana 1: Introducción a React.js

— Conocemos al equipo del curso y a los compañeros.
— Aprendizaje de JSX y DOM virtual en React.
— Estamos considerando el enfoque de componentes y los métodos de transferencia de datos.

Conocido
1. Apertura del curso (05:41)

Yo reacciono.js
1. Qué es Reaccionar (07:05)
2. DOM virtual (02:46)
3. JSX (06:10)
4. Renderizado con condiciones (05:11)
5. Trabajar con listas (02:45)
6. Componentes (02:41)
7. Accesorios (01:45)
8. Estado (06:45)
9. Eventos (02:26)
10. Reaccionar herramientas de desarrollo (03:58)

II reaccionar.js
1. Métodos de ciclo de vida (05:19)
2. Componentes - funciones (01:29)
3. Componente Puro (02:54)
4. Eventos sintéticos (01:42)
5. Trabajar con formularios (02:51)
6. Manejo de errores (01:39)

Análisis de tareas #1
1. Taller #1 (30:36)

Semana 2: patrones de React.js, pruebas

— Estudiamos componentes, elementos e instancias de la clase de componente.
— Consideramos la biblioteca Recompose, los componentes de alto nivel y los patrones de Render Props.
— Entendemos las ventajas de las pruebas, estudiamos Jest, Enzyme, Snapshots.

III Reaccionar
1. Introducción (01:43)
2. Tipos de accesorios (10:18)
3. Contexto (05:19)
4. Árbitros (05:18)
5. Portales (05:02)
6. Ganchos (10:42)

IV reaccionar.js
1. Componentes de orden superior (HOC): componentes de orden superior (10:33)
2. Reenvío de referencias (HOC) (04:31)
3. Renderizar patrón de accesorios (05:25)
4. Recomposición de la biblioteca HOK (10:32)
5. Perfilado (04:02)

Pruebas
1. Introducción (05:06)
2. Corredor de pruebas (02:51)
3. Prueba DSL (08:41)
4. Enzima (06:57)
5. Instantáneas (03:09)
6. Probando sagas (05:01)
7. Biblioteca de pruebas de React (06:32)

Análisis de tareas #2
1. Taller #2 (27:54)

Semana 3: Redux, enrutamiento

— Estudiamos el enrutamiento: enrutamiento simple, enrutamiento con Switch, así como enrutamiento anidado.
— Familiarizarse con la biblioteca Redux: conceptos básicos y conceptos de Store, Actions, Reducers, React-redux.
— El middleware se considera una forma de trabajar con Sideeffect.

Enrutamiento en el navegador
1. API de historial (02:48)
2. Enrutamiento simple (05:39)
3. Enrutamiento desde Switch (04:16)
4. Enrutamiento anidado (05:32)
5. Ruta privada (04:39)

Yo redux
1. Introducción (04:07)
2. Tienda (05:03)
3. Acciones (02:17)
4. Reductores (07:56)
5. Reaccionar-redux (03:26)

II Redux
1. Introducción (03:11)
2. CreateActions (acciones redux) (09:13)
3. Software intermedio (07:54)
4. Manejar acciones (05:52)
5. Selectores (06:17)
6. Volver a seleccionar (04:49)
7. Patos (06:56)

Análisis de tareas #3
1. Taller #3 (39:13)

Semana 4 - Redux-saga

— Estamos estudiando la biblioteca Redux-saga. Repita las funciones del generador*. Aprendamos a ejecutarlos en paralelo.
— Veamos el método Take. Estudiemos la selección como una forma de obtener datos de la Tienda.
- Estamos buscando formas de diseñar una aplicación React. Estudiamos las bibliotecas ClassNames, StyledComponents, BrowserList, MaterialUI.

I Redux-saga
1. Introducción (00:57)
2. Descripción general (02:08)
3. Generadores (04:11)
4. Agregando sagas (02:07)
5. Reaccionar ante las acciones (03:53)
6. Lanzamientos de funciones (02:06)

II Redux-saga
1. Introducción (00:27)
2. Realizando efectos en paralelo (03:41)
3. Hacer efecto (02:45)
4. Seleccionar efecto (02:04)
5. Cancelar efectos (04:05)

Trabajar con estilos
1. Introducción (01:34)
2. Estilos CRA (05:21)
3. Nombres de clase (06:32)
4. Componentes con estilo (07:11)
5. Lista de navegadores (01:37)
6. Interfaz de usuario material (08:13)

Análisis de tareas #4
1. Taller #4 (09:55)

Semana 5: formularios, CI y DI y manejo de errores del cliente

— Consideramos trabajar con formularios utilizando las bibliotecas Formik, Redux Forms, React Final Form.
— Estamos considerando métodos para garantizar la calidad del código de producción. Analizamos herramientas como: Husky, TravisCI, HerokuNow.
— Estamos estudiando un conjunto de librerías útiles para el desarrollo (Storybook, RamdaJS, Axios).
— Estamos considerando TypeScript.

Trabajar con formularios
1. Introducción (05:07)
2. Formik (08:51)
3. Forma redux (06:22)
4. Reaccionar forma final (06:36)

Manejo de errores de CI, DI y cliente
1. Introducción (05:07)
2. Husky (02:32)
3. CI usando TravisCI (03:32)
4. Implementar en heroku (04:57)
5. Barra antivuelco (02:00)

Un conjunto de bibliotecas útiles para el desarrollo.
1. Libro de cuentos (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Texto mecanografiado (09:31)

Análisis de tareas #5
1. Taller #5 (13:17)

Semana 6 - Trabajo de proyecto

— Completamos la solicitud y la enviamos para su revisión.

Cómo conseguir un trabajo en TI: consejos y trucos
1. ¿Cómo conseguir un trabajo en TI? Búsqueda, entrevista y periodo de prueba (42:21)
2. ¿Cómo encontrar trabajo remoto y pedidos autónomos? (20:12)
3. Primer trabajo en TI: ¿cómo comportarse? Prácticas, empleo oficial y trabajo “por comida” (14:11)
4. ¿Cómo pasar el período de prueba? (27:10)
5. Cómo prepararse para una entrevista en una empresa FAANG (08:52)
6. El proceso de carga de una página web (25:19)
7. Entrevista al programador: todo lo que necesita saber (01:24:07)
8. Resolviendo un problema a partir de una entrevista a un programador (19:36)
9. Entrevista al desarrollador frontend (01:37:17)