Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Instalación y configuración de React

22/28
Recursos

Aportes 26

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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

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-


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
npm init // inicializar proyecto
npm i react react-dom -S // instalar dependencias para usar React en proyecto

Orale, ya se vino lo bueno carnal.

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

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

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

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

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,

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

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

En las ultimas versiones de react ya no es necesario

import React from 'react'

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.

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

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

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.

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

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