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
You don't have access to this class
Keep learning! Join and start boosting your career
The thrill of creating a React project from scratch is incomparable. This process not only allows us to customize the development to our needs, but also to understand in depth each piece of the puzzle that makes up our application. Let's explore how you can do it in an orderly and effective way, making sure to prepare all the essential configuration.
The first essential step when starting a new project is to clone the startup repository. This repository will act as the base of our project. To do this, use the following command in your terminal:
git clone <URL_REPOSITORY_URL> .Remember to position yourself in a directory where you have easy access and control of the cloned repository. Once cloned, access the cloned directory to continue with the configuration.
With the working directory ready, the first task is to install the basic dependencies for React, which are react and react-dom, as shown below:
npm install react react-dom --saveUse the --save argument to register these libraries as core project dependencies. This is crucial, as React and React DOM will be the core of the UI development.
After the previous installations, we need to perform the npm project initialization that will set up our package.json. This file plans the project's dependencies and scripts:
npm init -yThe -y argument serves to automatically answer the default npm init questions, creating a basic package.json immediately.
A well-defined structure of our project is essential for a coherent and effective organization. Here are the steps to set up a basic structure in React.
Start by creating the most important folders and files to organize your React project:
Folder src: Contains the source code of the application.
Index.js file: It will serve as the entry point.Components folder: It will store the various React components.App.jsx file: It will be the main component of our application. Public folder: It will store publicly accessible files, such as the base HTML file:
index.html: The main HTML document.Open the index.js file in the src folder and set up the initial imports. The basic structure should look as follows:
import React from 'react';import ReactDOM from 'react-dom';import App from './components/App';
ReactDOM.render(<App/>, document.getElementById('app'));In App.jsx, define the component:
import React from 'react';
const App = () => <h1>Hello React</h1>;
export default App;This will be the main component that will load when you start the React application.
index.html file?Inside the public folder, create index.html with a simple structure. Use this base in the file:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactApp</title></head><body> <div id="app"></div></body></html><body> </html>.The app id is crucial as it will be the point where your React application will be assembled.
Now that the React base is defined, it is time to configure Webpack to manage the compilation and preparation of the project for production.
Configuring Webpack can be tricky, but by following these basics, you will be able to prepare your project for production efficiently, allowing the code to compile and optimize properly. Keep practicing and feel free to explore the additional materials to boost your React and Webpack skills!
Contributions 34
Questions 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
Want to see more contributions, questions and answers from the community?