Yo se que esto parece complicado al principio, pero no te estreses, vale la pena!
Estoy terminando el curso y todos los días antes de empezar a programar monton un entorno de react desde cero, al principio no me acordaba y tenia que ver las clases o el codigo anterior, pero con el tiempo me fui adaptando y en menos de una semana entiendo perfectamente como montarlo y se que es lo que hace cada instruccion.
Investigá que es cada cosa, tomá el curso de webpack y leete su documentacion (no es tan complicado che!) de a poquito para que vayas asimilando todo. ¿No entendés para que es ese plugin? Buscalo! no lo entendes todavía? Seguis buscando otro día! Así de a poco te vas a ir completando
En el camino le encontré el sentido a armarlo desde cero en vez de usar create-react-app, y es su increible personalizacion/optimizacion, pero solo te vas a dar cuenta del todo si lo experimentas y lo vas personalizando.
Gracias por la motivación Si me pasa que me frustra no poder aprender lo que se necesita para empezar los entornos desde cero... Ojala también pronto me pueda acostumbrar a ello. 💪
Necesitaba leer esto justo en este momento, Gracias!
Instalamos webpack para el bundle de la app, y babel para que el código sirva en cualquier navegador
const path =require('path');//path del proyecto principalconstHtmlWebpackPlugin=require('html-webpack-plugin');//traemos el plugin//de htmlmodule.exports={entry:'./src/index.js',// punto de entradaoutput:{// lugar al que saldrán todos los archivospath: path.resolve(__dirname,'dist'),//en nuestro path, crea la carpeta distfilename:'bundle.js'// nombre del archivo js resultante},resolve:{// extensión de archivos a tomar en cuentaextensions:['.js','.jsx']},module:{// loaders para cada tipo de archivorules:[// reglas para usar{test:/\.(js|jsx)$/,// extensiones en las cuales actuará babelexclude:/node_modules/,// siempre excluir node modules use:{// indicamos el loaderloader:'babel-loader'// babel }},{test:/\.html$/,// extensiones htmluse:[{loader:'html-loader'// loader a usar}]}]},plugins:[// plugins newHtmlWebpackPlugin({// instanciamos el plugin para html template:'./public/index.html',// archivo raíz a transformarfilename:'./index.html'// el archivo resultante})]}
Muy buenos los resumenes y las explicaciones de los paquetes, muchas gracias! 🙌
A veces me toca poner más lenta la clase por la velocidad con la que habla Oscar XD
pensé que era la única 😅
Estaba pensando que era solo yo porque no entiendo cuando habla de ciertas cosas y para que realmente sirven y su diferencia en la personalizacion
const path =require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={// ... Configuración de empaquetadoentry:'./src/index.js',output:{path: path.resolve(__dirname,'dist'),filename:'bundle.js',},resolve:{extensions:['.js','.jsx']},module:{// ... Lista de reglas respecto a los loaders rules:[// Reglas para babel{test:/\.(js | jsx)$/,use:{loader:'babel-loader'},exclude:/node_modules/},// Reglas para HTML loader{test:/\.html$/,use:[{loader:'html-loader'}]}]},plugins:[//... Configuración de pluginsnewHtmlWebpackPlugin({template:'./public/index.html',filename:'./index.html'})]}
El webpack.config.js está mal. Esto me da errores después
Hola chic@s como recomendación para generar el .gitignore les recomiendo esta herramienta que me gusta mucho
Tambien seria bueno que escribieras tu SO, editor de código y alguna otra herramienta que uses, el te genera automaticamente el .gitignore
Yo en mi caso le coloco los tags: macOS, React, Visual Studio Code, NodeJS
SHORTCUT PARA WEBPACK EN VSCODE
¡Hola!, les dejo con shortcut o snippet para escribir la configuracion de webpacl mas rapido. Lo que deben realizar es:
control + shift + p
escriben snippets en el recuadro que les aparece
seleccionan preferences: configure user snippets
buscan javascript
les aparece un json y copian lo siguiente
{// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected.// Example:// "Print to console": {// "prefix": "log",// "body": [// "console.log('$1');",// "$2"// ],// "description": "Log output to console"// }"webpack config":{"prefix":"wpc","body":["const path = require(\"path\");","const HtmlWebpackPlugin = require(\"html-webpack-plugin\");","","module.exports = {"," entry: \"./src/index.js\","," output: {"," path: path.resolve(__dirname, \"dist\"),"," filename: \"bundle.js\","," },"," resolve: {"," extensions: [\".js\", \".jsx\"],"," },"," module: {"," rules: ["," {"," test: /\\.(js|jsx)$/,"," exclude: /node_modules/,"," use: {"," loader: \"babel-loader\","," },"," },"," {"," test: /\\.html$/,"," use: ["," {"," loader: \"html-loader\","," },"," ],"," },"," ],"," },"," plugins: ["," new HtmlWebpackPlugin({"," template: \"./public/index.html\","," filename: \"./index.html\","," }),"," ],"," devServer: {"," contentBase: path.join(__dirname, \"dist\"),"," compress: true,"," port: 3000,"," },","};",],"description":"webpack configuration"}}
Listo ahora cuando quieran crear el archivo de configuracion de webpack solo escriben wpc en el editor de codigo y les sale todo, esto es para ahorrar tiempo en futuros proyectos. Espero les sirva.
wpc //les saldra para completar
oooh gracias, es un buen atajo
Lo mejor es descargarse ese autocompletado que usa oscar, creo que es con IA.
¿No hubiera sido conveniente instalar webpack y babel como dependencias de desarrollo?
La verdad si todo lo relacionado con Webpack (loaders, plugins, etc.) y Babel se instalan como dependencias de desarollo (aunque más adelante probablemente las organice)
si, debe ser de desarrollo, tal vez un pequeño descuido
Nota: no olviden agregar --save-dev al final de cada comando cuando instalen las dependencias de webpack y babel, ya que esto hace que se instalen solo para el entorno de desarrollo. Si tienen más dudas no olviden hacer el "Curso de Gestión de Dependencias y Paquetes con NPM".
Gracias por la nota, cierto que es buena practica 😅
Importante! Las únicas dependencias que no son de desarrollo ( usando “-S”) son react y react-dom. Las demás sí deben usar ("-D") para que se guarden como dependencias de desarollo.
Con este prof siento que la premisa de "platzi es el camino corto para aprender" no aplica.
He tomado un par de cursos de él y siempre lo hace paso a paso manual la configuración de los proyectos. PEro por ejemplo, a la fecha sigo sin saber por qué instala algunas dependencias y no otras. Solo describe lo que hace pero no el fundamento.
Cada que veo lo que hace me tengo que chutar ladocumentaciòn de cómo funciona cada cosa y con eso ya no es el "camino corto para aprender"
Creo que es un punto a mejorar para la actualizaciòn de este curso o para cursos posteriores.
Webpack
Ahora creamos un archivo webpack.config.js para preparar nuestro proyecto de forma personalizada
const path =require('path');//path del proyecto principalconstHtmlWebpackPlugin=require('html-webpack-plugin');//traemos el plugin//de htmlmodule.exports={entry:'./src/index.js',// punto de entradaoutput:{// lugar al que saldrán todos los archivospath: path.resolve(__dirname,'dist'),//en nuestro path, crea la carpeta distfilename:'bundle.js'// nombre del archivo js resultante},resolve:{// extensión de archivos a tomar en cuentaextensions:['.js','.jsx']},module:{// loaders para cada tipo de archivorules:[// reglas para usar{test:/\.(js|jsx)$/,// extensiones en las cuales actuará babelexclude:/node_modules/,// siempre excluir node modules use:{// indicamos el loaderloader:'babel-loader'// babel }},{test:/\.html$/,// extensiones htmluse:[{loader:'html-loader'// loader a usar}]}]},plugins:[// plugins newHtmlWebpackPlugin({// instanciamos el plugin para html template:'./public/index.html',// archivo raíz a transformarfilename:'./index.html'// el archivo resultante})]}
create-react-app sucks
Vite es de lo mejor que hay <3
Cómo le hago para que me salga la flecha al indentar?
¿Por qué dentro de module (webpack) la primera rule el use tiene un objeto y en la siguiente rule el use tiene un objeto dentro de un arreglo?
🤔
tengo la misma pregunta
creo que se puede usar de ambas formar cuando es solo 1 reconoce un objeto, cuando es mas de 1 una array de objetos, prueba usando array con 1 objeto y solo objetos a ver si funciona
Ahora entiendo los memes de twitter cuando dicen: ayúdame a configurar webpack😶
config babel
Así te evitas escribir imr en cada proyecto para usar React
{"presets":["@babel/preset-env",//evitas importar react en los header files de tus componentes["@babel/preset-react",{"runtime":"automatic"}]]}
como que ya no sirve ese truco :(
Esto me sirvió para que me reconociera los presets a la hora de cargar el localhost, muchas gracias
Curso Práctico de React.js
Es un proyecto creado en el curso Práctico de React.js de Platzi. Estas son las notas de la clase e instalacion del proyecto paso a paso.
Al tiempo tambien estoy practicando como generar los readme (archivo mark down), espero les se de utilidad.
Configurar Entorno de Desarrollo
git init
npm init
npm install react react-dom
Configuración de Webpack y Babel
Webpack genera un recopilado (literalmente un manojo) de todos los diferentes tipos de archivo en uno solo. Ejemplo tenemos muchos .js los recopila en un solo archivo .js
Babel es el traductor que hace que nuestro codigo escrito en ECS6 funcione en cualquier navegador
touch es un comando en la terminal (para poner en practica lo aprendido, me parecio mas rapido manejarlo asi), para crear los archivos.
los archivos que empiezan con . (punto) son archivos ocultos
Esto se puede ver muy agotador y tardado, pero yo prefiero esto a create-react-app, ya que tenemos un control real de lo que esta pasando en nuestro bundle
Para que no sea agotador, puedes crear una configuración de webpack con tus criterios, y lo puedes subir a github y tener ahí tu configuración inicial para tus proyectos React
Yo no lo recomendaría @santiago-lopera, ya que no todos los proyectos van a ser los mismos. Si yo quiero hacer el setup de un proyecto pequeño, probablemente no use Jest ni otros paquetes, además de que puedo querer usar versiones especificas de una librería, etc. Si hacemos esto, incluso vamos a tener que lidiar con la configuración
Independientemente de los beneficios que aporta hacer la configuración propia VS create-react-app. Dentro de la industria.
¿Cuál de ambas formas es más común de usar?
Según los requerimientos de tu proyecto. Cada proyecto es distinto.
En mi caso particular siempre utilizaba "create-react-app" y no tocaba nada de la configuración, pero asumo que conocer esto nos permitirá hacer ajustes en el futuro de acuerdo a los requerimientos de nuestro proyecto.
A mí parece mucha complicación para iniciar un proyecto, y ni siquiera has comenzado con la app en si... debe haber una forma de iniciar esto sin tanto protocolo...porque siento que uno pierde mucho tiempo haciendo esto
npx-create-react-app
aunque entiendo que nos enseñan que es buena practica prepara el entorno desde cero, ya que el npx-create-react-app te da cosas por default que quizas no se ajusten a tu proyecto.
Justamente pensaba lo mismo ya van alrededor de 5 clases de 10 minutos en las cuales seguimos preparando el entorno, cuando el curso como tal es practicar con React, considero si se quiere abordar el trabajar algo tipo Vanilla React o curso de React a profundidad. Lo menciono por que estoy viendo que este curso tiene como un año ya desde que salio, y me da algo de pendiente el empezar a instalar por separado todo y que al final por problemas de actualizaciones en conjunto con que no se explica del todo bien lo que se esta instalando, que tarde mucho mas en preparar para ahora si ya poder empezar a construir.
Siento que deberia ser mas enfocado a la construccion de la APP y que se generara otro curso por separado para el entendimiento de cada dependencia.
