Fase 1: HTML y CSS
Inicio del reto - primera sesión, 2 de mayo
Maquetación del portafolio - segunda sesión, 6 de mayo
Maquetando un Clon de Twitter - tercera sesión, 9 de mayo
Responsive Design - cuarta sesión, 13 de mayo
Maquetando un Clon de YouTube - quinta sesión, 16 de mayo
Clon de YouTube: listas de videos - sexta sesión, 20 de mayo
Fase 2: JavaScript
Métele JavaScript a tu Portafolio - séptima sesión, 23 de mayo
Manipulación del DOM - octava sesión, 27 de mayo
Clon de Wordle - novena sesión, 30 de mayo
Victoria de jugadores en Wordle - décima sesión, 3 de junio
Consumiendo la PokeAPI - sesión 11, 6 de junio
Corrigiendo bugs de la pokedex - 10 de junio
Últimos detalles de la Pokedex - cierre de la segunda fase
Fase 3: React.js
Inicio de proyectos con React.js - Tercera fase
Creando el contexto de nuestra aplicación en React
Fixeando bugs y agregando el mapa
Setup con Webpack para el Chat en Tiempo Real con React.js
Configurando Socket.io en frontend y backend
Maquetando nuestra galerÃa de fotos con React.js
Backend y conexión con Cloudinary
Corrigiendo Bugs y agregando mejoras al chat con React.js
Desplegando los proyectos - Fin del challenge
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Setup con Webpack para el Chat en Tiempo Real con React.js
17/22Recursos
Aportes 5
Preguntas 0
Ordenar por:
No me gusto, siento que le falta que contenido para lo largo que es el video.
f1 -> configurar fragmentos de codigo -> babel javascript
"webpack production 19/jul/22 webpack.config.js": {
"prefix": "webpp",
"body": [
"const path = require('path');",
"const HtmlWebpackPlugin = require('html-webpack-plugin');",
"const MiniCssExtractPlugin = require('mini-css-extract-plugin');",
"const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');",
"const { CleanWebpackPlugin } = require('clean-webpack-plugin');\n",
"module.exports = {",
" entry: './src/index.js',",
" output: {",
" filename: 'bundle.js',",
" path: path.resolve(__dirname, 'dist'),",
" publicPath: '/'",
" },",
" resolve: {",
" extensions: ['.js', '.jsx']",
" },\n",
" mode: 'production',",
" module: {",
" rules: [",
" {",
" test: /\.(js|jsx)$/,",
" exclude: /node_modules/,",
" use: {",
" loader: 'babel-loader',",
" options: {",
" presets: ['@babel/preset-env', '@babel/preset-react']",
" },",
" }",
" },",
" {",
" test: /\.(png|jpg|gif|svg|jpeg|pdf)$/,",
" type: 'asset/resource',",
" },",
" {",
" test: /\.html$/,",
" use: { loader: 'html-loader', }",
" },",
" {",
" test: /\.css$/,",
" use: [",
" MiniCssExtractPlugin.loader,",
" { loader: 'css-loader', }",
" ]",
" },",
" ]",
" },",
" plugins: [",
" new HtmlWebpackPlugin({",
" template: './public/index.html',",
" filename: './index.html'",
" }),",
" new MiniCssExtractPlugin({",
" filename: 'style.css',",
" chunkFilename: '[name].css'",
" }),",
" new CleanWebpackPlugin(),",
" ],\n",
" optimization: {",
" minimize: true,",
" minimizer: [new CssMinimizerPlugin()]",
" }",
"};",
],
"description": "webpack config 19/jul/22 (production)"
},
f1 -> configurar fragmentos de codigo -> babel javascript
"webpack development 19/jul/22 webpack.config.dev.js": {
"prefix": "webpd",
"body": [
"const path = require('path');",
"const HtmlWebpackPlugin = require('html-webpack-plugin');",
"const MiniCssExtractPlugin = require('mini-css-extract-plugin');",
"const { CleanWebpackPlugin } = require('clean-webpack-plugin');\n",
"module.exports = {",
" entry: './src/index.js',",
" output: {",
" filename: 'bundle.js',",
" path: path.resolve(__dirname, 'dist'),",
" publicPath: '/'",
" },",
" resolve: {",
" extensions: ['.js', '.jsx']",
" },\n",
" mode: 'development',",
" module: {",
" rules: [",
" {",
" test: /\.(js|jsx)$/,",
" exclude: /node_modules/,",
" use: {",
" loader: 'babel-loader',",
" options: {",
" presets: ['@babel/preset-env', '@babel/preset-react']",
" },",
" }",
" },",
" {",
" test: /\.(png|jpg|gif|svg|jpeg|pdf)$/,",
" type: 'asset/resource',",
" },",
" {",
" test: /\.html$/,",
" use: { loader: 'html-loader', }",
" },",
" {",
" test: /\.css$/,",
" use: [",
" MiniCssExtractPlugin.loader,",
" { loader: 'css-loader', }",
" ]",
" },",
" ]",
" },",
" plugins: [",
" new HtmlWebpackPlugin({",
" template: './public/index.html',",
" filename: './index.html'",
" }),",
" new MiniCssExtractPlugin({",
" filename: 'style.css',",
" chunkFilename: '[name].css'",
" }),",
" new CleanWebpackPlugin(),",
" ],\n",
" devServer: {",
" static: {",
" directory: path.join(__dirname, 'dist')",
" },",
" port: 64340,",
" compress: true,",
" hot: true,",
" historyApiFallback: true,",
" }",
"}",
],
"description": "webpack config 19/jul/22 (development)"
},
😃 Buena nueva configuracion de webpack, de una vez para los snippets de codigo xD
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?