You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
11 Hrs
40 Min
8 Seg
Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Instalación y configuración de React

22/28
Resources

How to set up a React project from scratch?

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.

How to clone and prepare the startup repository?

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.

What dependencies do we need to install first?

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 --save

Use 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.

How to initialize the project with npm init?

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 -y

The -y argument serves to automatically answer the default npm init questions, creating a basic package.json immediately.

Structuring the React project

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.

How to structure the main folders and files?

Start by creating the most important folders and files to organize your React project:

  1. 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.
  2. Public folder: It will store publicly accessible files, such as the base HTML file:

    • File index.html: The main HTML document.

How to set the entry point and main component?

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.

How to create the initial 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.

Preparing and compiling the project with Webpack

Now that the React base is defined, it is time to configure Webpack to manage the compilation and preparation of the project for production.

What are the steps to configure Webpack?

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

Sort by:

Want to see more contributions, questions and answers from the community?

👨‍💻👩‍💻 Comandos para comenzar con el proyecto

# 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 />);

Instalación y configuración de React

  1. Inicializar NPM
  2. Instalar React con npm como dependencia:
    "npm i react react-dom -S
  3. Estructura de carpetas:
    [](http 😕/i.prntscr.com/rs6Oai5VQ-2KDjY4bNWdbQ.png)

Index.js

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('app'));

App.jsx

  • Los archivos con extensión de react (Html dentro de Javascript o JSX) siempre inician con mayúscula.
import React from 'react';

const App = () => <h1>Hello React!!</h1>

export default App;

Index.html

<!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).

Que tal campeon, buen dia.

npx create-react-app webpack-react --use-npm 

Te crea el directorio del proyecto react con todos los componentes instalados,

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

👌

22.-Instalación y configuración de React

Vamos a configurar el proyecto en react desde 0, con todas las configuraciones que debemos considerar.

  • Clonamos el repo con:
git clone [email protected]:platzi/curso-webpack-react.git
  • Nos movemos a la carpeta e inicializamos visual studio.
  • Instalamos las dependencias necesarias con:
//React  -S=Dependencia que si usaremos
npm init
npm install react react-dom -S
  • Revisamos que tengamos todo lo necesario.
  • Creamos la estructura del proyecto.
    • Una carpeta src en donde crearemos un punto de entrada (index.js). Una carpeta llamada components y dentro de ella un archivo llamado App.jsx. NOTA:Cada componente inicia con mayusculas.
    • Les damos los elementos necesarios para tener una aplicación.

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.

createapp.dev

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)
 
 

TERMINAL

 

  • Abrimos nuestra terminal
  • cd Projects (en mi caso tengo una carpeta Projects para mis proyectos con git)
  • mkdir webpack-react-platzi (yo al nombre de la carpeta le creo el mismo de mi repositorio CREAR AQUI)
  • cd webpack-react-platzi
  • code . (ya que mi terminal abre vscode con este comando)
     
     

VSCODE

 

  • creo 2 archivos -> README,md Y ,gitignore (las comas representan un punto)
  • README,md -> pongo una pequeña descripcion del proyecto o simplemente el nombre del mismo
  • ,gitignore -> en un principio solamente coloco -> node_modules/
     
     

TERMINAL

 

  • git init (inicializamos git)
  • git add . (agregamos todos los archivos)
  • git commit -m “First commit” (enviamos todos los archivos)
  • git branch -M main (modificamos el nombre de la rama por main des dejo una lectura del por que AQUI )
  • git remode add origin URL (la url es la que te entrega el repositorio para clonar por ssh)
  • git push -u origin main (Enviamos todos los cambios al nuestro repo de github)
     
     

Requerimientos adicionales

 

  • npm init -y (Creamos nuestro proyecto npm e inicialiamos con configuracion default)
  • npm react react-dom -S (instalamos la dependencia y la ponemos como requerida)

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';

Guide Proyecto React

  1. Crea un repositorio en GitHub
  2. Clona el repositorio en local:
    `git clone [URL]``
  3. Instala react via npm:
    npm install react react-dom
  4. Ejecutamos npm init -y
  5. Creamos las siguiente estructura de archivos:

React 💙💙💙

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