Setup con Webpack para el Chat en Tiempo Real con React.js

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Fase 1: HTML y CSS

Fase 2: JavaScript

Fase 3: React.js

Setup con Webpack para el Chat en Tiempo Real con React.js

Comentarios

Juan Diaz

Estudiante

Repo: Chat

Fabian Rafael Calzadilla Andrade

Estudiante

No me gusto, siento que le falta que contenido para lo largo que es el video.

Rodrigo Andrés Moreno Pertúz

Estudiante

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)"
	},

Rodrigo Andrés Moreno Pertúz

Estudiante

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)"
	},

Rodrigo Andrés Moreno Pertúz

Estudiante

:) Buena nueva configuracion de webpack, de una vez para los snippets de codigo xD

	"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)"
	},

	"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)"
	},

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