Instalación y configuración de React

👨‍💻👩‍💻 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

Luis Palomo

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-

…

Sebastián Buitrago

primera vez que escribo algo en react y no se siente tan raro, pense que seria algo super complicado

David Valencia

Felipe Tomás Arancibia Torres

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

adassive

Instalación y configuración de React

Inicializar NPM
Instalar React con npm como dependencia:
"npm i react react-dom -S
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>

Cristian Pisco Intriago

Otra forma de instalar react es:

npx create-react-app curso-webpack-react
npm start

José Gregorio Estrada Meneses

Orale, ya se vino lo bueno carnal.

Christian Boffill

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.

Edgar Lopez Arroyo

npm init // inicializar proyecto
npm i react react-dom -S // instalar dependencias para usar React en proyecto

Uriel Solis Salinas

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

Rigoberto Maldonado

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,

Reinaldo Omar Mendoza Leal

En las ultimas versiones de react ya no es necesario

import React from 'react'

Luis Daniel Hernández Guevara

React 😋💚

Nelly Arlet Bautista Hernandez

¿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?

Cristian Felipe Diaz

excelente clase un mundo nuevo con react donde queria llegar

Naldo Duran

👌

Juan Pablo Jimenez

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.

Víctor Manuel Briseño Leó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

Rodrigo Ramos Xochiteotzin

Fui a tomar el curso de introducción a react y regresé jajaja

Reinaldo Omar Mendoza Leal

No sabia como evitar el uso de create-react-app, que bueno que por fin lo puedo crear desde 0

HeyItsMe

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

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

Felix Torres Javier Antonio

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

Juan Pablo Ospina Restrepo

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)

Alejandro Ivan Mendieta

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

Andres Prieto

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

Luciano Cavallo

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! 👏 👌

Sebastián Caraballo Marzola

jajaj ya llegue hasta aqui y ni dea react pero ya que acabare con lo que empece

david jurado

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.

Alejandro Ching

Hoy en día hay formas un poco más completas y breves de hacer como create react app.

Jhonatan_Celis

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

Leobardo Licona Soto

Guide Proyecto React

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

Captura de Pantalla 2021-12-04 a la(s) 18.40.05.png

Ivan Gonzalez Gonzalez

React 💙💙💙

Luis Eduardo