No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

React con Create React App

32/34
Recursos

Aportes 11

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

(si son de Venezuela, por lo que no se pueden crear una cuenta de ChatGPT)
El chat de bing desarrollado en base a ChatGPT 4, que viene por defecto en el navegador microsoft edge, es una muy buena opcion para hacer preguntas sobre errores. Tambien el chat de you you dot com es una opcion en estos casos, mas aun cuando you como esta desarrollado para hacer busquedas de programacion.

Para m铆 la mitad lo he podido comprender con ChatGPT y la otra mitad con este curso. Interesante.

Para comenzar un proyecto de React desde cero, puedes seguir estos pasos:

  1. Configura el entorno de desarrollo: Aseg煤rate de tener Node.js instalado en tu m谩quina. Puedes descargarlo desde el sitio web oficial de Node.js e instalar la versi贸n LTS.

  2. Crea una nueva carpeta para tu proyecto: Abre una terminal y crea una nueva carpeta donde deseas almacenar tu proyecto de React.

  3. Inicializa un nuevo proyecto de npm: En la terminal, navega hasta la carpeta de tu proyecto y ejecuta el siguiente comando para inicializar un nuevo proyecto de npm:

npm init -y

Esto crear谩 un archivo package.json en tu carpeta de proyecto que contiene la configuraci贸n del proyecto y las dependencias.

  1. Instala React y React-DOM: En la terminal, dentro de tu carpeta de proyecto, ejecuta el siguiente comando para instalar React y React-DOM como dependencias de tu proyecto:
npm install react react-dom
  1. Configura el punto de entrada de tu aplicaci贸n: Crea un archivo index.html en la ra铆z de tu carpeta de proyecto y agrega el siguiente c贸digo HTML b谩sico:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
</body>
</html> 

Este archivo ser谩 el punto de entrada de tu aplicaci贸n React y servir谩 como el contenedor para el contenido generado por React.

  1. Crea el archivo principal de tu aplicaci贸n: Crea un archivo index.js en la ra铆z de tu carpeta de proyecto y agrega el siguiente c贸digo:
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, React!</h1>,
  document.getElementById('root')
);

Este archivo es el punto de inicio de tu aplicaci贸n React y utiliza React-DOM para renderizar un simple componente de React en el elemento con el ID 鈥渞oot鈥 definido en el archivo index.html.

  1. Configura el empaquetado y la compilaci贸n: Para empaquetar y compilar tu aplicaci贸n React, puedes utilizar herramientas como Webpack o Create React App. Estas herramientas te permitir谩n escribir tu c贸digo en m煤ltiples archivos y generar un solo archivo JavaScript que se pueda incluir en tu archivo index.html. Puedes encontrar documentaci贸n y ejemplos detallados sobre c贸mo configurar estas herramientas en sus respectivas documentaciones.

  2. Ejecuta tu aplicaci贸n: Una vez configurado y empaquetado tu proyecto, puedes ejecutarlo en tu navegador. Abre el archivo index.html en tu navegador y deber铆as ver el mensaje 鈥淗ello, React!鈥 renderizado en la p谩gina.

Estos son los pasos b谩sicos para comenzar un proyecto de React desde cero. A partir de aqu铆, puedes continuar construyendo y desarrollando tu aplicaci贸n React, agregando componentes, estilos, interacciones y m谩s.

En la documentaci贸n oficial de React, ya no recomiendan hacer uso del create-react-app, recomiendan hacer uso de un framework como Next-Remix, pero para proyectos din谩micos peque帽os, para mi sigue siendo una buena opci贸n. Saludos profesor Juan David, es de lo mejor de Platzi 馃槂

32. React con Create React App

Crearemos un proyecto desde cero, as铆 que debes ubicarte en una carpeta donde puedas empezar este proyecto y abre la CLI:

npx create-react-app nombre-del-poyecto
npx create-react-app cra-test 馃憟馃憖

Ahora entramos a la carpeta creada y la abrimos con Visual Studio Code:

ls
cd cra-test
ll
code ./ -r
npm start

Con esto ya est谩 todo listo para empezar a trabajar en tu proyecto.

Con raz贸n profe, estaba viendo que usaba la extension .js, y yo ando en un proyecto usando .jsx, me confund铆, pero con esta info sigo enriqueciendo mis saberes.

La documentaci贸n oficial dice que CRA no est谩 ya recomendada y se recomienda crear proyectos con VIte
No sabia la diferencia entre npm y npx, gracias por la info!

Falto useReducer 馃槂

S煤per el curso! 馃憦馃憤