Introducción a Webpack
¿Qué es Webpack?
Conceptos básicos de Webpack
Proyecto inicial
Tu primer build con Webpack
Instalación de Webpack y construcción del proyecto
Configuración de webpack.config.js
Loaders y Plugins en Webpack
Babel Loader para JavaScript
HTML en Webpack
Loaders para CSS y preprocesadores de CSS
Copia de archivos con Webpack
Loaders de imágenes
Loaders de fuentes
Optimización: hashes, compresión y minificación de archivos
Webpack Alias
Deploy del proyecto
Variables de entorno
Webpack en modo desarrollo
Webpack en modo producción
Webpack Watch
Deploy a Netlify
Herramientas de desarrollo complementarias
Webpack Dev Server
Webpack Bundle Analyzer
Webpack DevTools
Integración básica de React.js
Instalación y configuración de React
Configuración de Webpack 5 para React.js
Configuración de plugins y loaders para React
Configuración de Webpack para CSS en React
Optimización de Webpack para React
Deploy del proyecto con React.js
Próximos pasos
Continúa con el Curso Práctico de Webpack
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 34
Preguntas 9
# Descargar el repositorio de Github
git clone [email protected]:platzi/curso-webpack-react.git
# Movernos a la carpeta
cd curso-webpack-react
# Abrir VS Code
code .
# Inicializar npm
npm init -y
# instalar dependencias
npm install react react-dom
Curso de Webpack: -Si nunca usaste React ve a hacer el curso antes de comenzar-
Curso de React: -Si nunca usaste Webpack ve a hacer el curso antes de comenzar-
…
primera vez que escribo algo en react y no se siente tan raro, pense que seria algo super complicado
Para quienes estén haciendo el curso con Reactjs 18, tengan en cuenta que hay que en el archivo App.js hay que realizar el cambio a la nueva versión de ReactDOM, que importa nuestra applicación de React de un nuevo modo, por lo que si corres todos los comandos del curso, al correr npm run start se encontrarán con una página en blanco que no carga nada, el cambio es el siguiente:
src/index.js
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./components/App";
const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);
import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('app'));
import React from 'react';
const App = () => <h1>Hello React!!</h1>
export default App;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Otra forma de instalar react es:
npx create-react-app curso-webpack-react
npm start
Orale, ya se vino lo bueno carnal.
Vengo del futuro y les aconsejo que no hagan esta sección del curso de webpack hasta que no hallan tomado los 2 primeros cursos de react de juan dc con create react app. Y luego de que hallan hecho algunas prácticas con webpack en proyectos propios. El profesor oscar es muy bueno pero no indaga en como los plugins y loader leen nuestro código y colocan en la estructura html los scripts y los estilos; solo nos da pistas de para que sirven.
npm init // inicializar proyecto
npm i react react-dom -S // instalar dependencias para usar React en proyecto
Se tiene que inicializar (npm init -y) primero y luego ya hacer npm install react react-dom, si no, no salen las dependencias descargadas en el VSC (o eso me pasó a mi).
En las ultimas versiones de react ya no es necesario
import React from 'react'
React 😋💚
¿Qué es lo que pasa con la carpeta dist?, ¿Por qué ya no fue generada en el segundo proyecto "Integración básica de React.js como lo hicimos en el proyecto anterior?
excelente clase un mundo nuevo con react donde queria llegar
Vamos a configurar el proyecto en react desde 0, con todas las configuraciones que debemos considerar.
git clone [email protected]:platzi/curso-webpack-react.git
//React -S=Dependencia que si usaremos
npm init
npm install react react-dom -S
Estaba viendo la documentación de Webpack, y vi que recomendaron esta aplicacion online para construir tu webpack.config.js y hacer los cambios para incorporar, revisando que se modifica.
se me hace una buena opción para complementarlo con lo que hemos visto hasta ahora
Fui a tomar el curso de introducción a react y regresé jajaja
No sabia como evitar el uso de create-react-app, que bueno que por fin lo puedo crear desde 0
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('app'));
Apenas iba a sugerir que pusieras el código del proyecto en github, para ver porque tengo errores y hacer una comparación.
pero ya nos saltamos a react
Mi recomendación para iniciar (esto es terminal de ubuntu en windows -> WSL)
A partir de react 18 se hace asi :
import React from "react";
import { ReactDOM } from "react-dom/client";
import {App} from './components/App.jsx';
const getRoot = document.getElementById('root');
const root = ReactDOM.createRoot(getRoot);
root.render(
<App/>
)
Platzi es muy raro, en este curso aprendí mucho de Vue sin querer y ya estamos entrando con JSX que siempre me ha dado pavor… No terminas de ver algo y ya te estás maravillando con otra cosa
Hice el curso de webpack antes de aprender React, y basicamente odié esta sección.😝
Ahora la vuelvo a tomar luego de React y la amé!! 😍
Tremendo profe Oscar! 👏 👌
jajaj ya llegue hasta aqui y ni dea react pero ya que acabare con lo que empece
La ruta de Full Stack Developer con JavaScript está un poco desordenada, ignorando algunos errores en el inicio como por ejemplo, no poner POO, y ahora que debemos de saber react y react es el siguiente curso, y al final de este recomienda hacer el curso práctico de webpack y en la ruta no estáxdd yo pensé que era este, fue muy practico a mi parecer, aunque igual deberían de actualizar los cursos de webpack.
Hoy en día hay formas un poco más completas y breves de hacer como create react app.
En el index,js verifica que la exportación de ReactDOM esté correctamente escrito con mayúsculas ya que me sucedió que estaba mal escrito y no me mostraba el error:
import ReactDOM from 'react-dom';
npm install react react-domnpm init -yReact 💙💙💙
Si no se instalan directamente las dependencias al hacer npm init después de instalar react y react-dom, te recomiendo hacer lo siguiente.
npm install react react-dom --save
//vuelve a instalar las dependencias cuando ya tenas el archivo package json
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.