(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.
Introducción y requisitos
¿Qué necesitas para aprender React.js?
Maquetación con React.js
¿Qué es un componente?
Componentes de TODO Machine
¿Cómo se comunican los componentes? Props y atributos
Estilos CSS en React
Interacción con React.js
Eventos en React: onClick, onChange
¿Qué es el estado?
Contando TODOs
Buscando TODOs
Completando y eliminando TODOs
Librería de Iconos Personalizados
Iconos en React: librerías y SVG
Iconos con colores dinámicos
Herramientas avanzadas: escalabilidad, organización y persistencia
Local Storage con React.js
Custom Hooks
Organización de archivos y carpetas
Feature-First Directories en React
Tips para naming y abstracción de componentes React
¿Qué son los efectos en React?
Estados de carga y error
Actualizando estados desde useEffect
Reto: loading skeletons
¿Qué es React Context?
useContext
¿Qué son los React Portals?
Reto: estados para abrir y cerrar un modal
Maquetando formularios en React
Crear TODOs: React Context dentro de React Portals
Deploy
Despliegue de TODO Machine en GitHub Pages
Presentación de proyectos para tu portafolio
Próximos pasos: React #UnderTheHood
Diferencias entre versiones de React.js
¿Cuándo realmente necesitas React.js?
Bonus: creando proyectos en React desde cero
React con Create React App
React con Next.js
React con Vite
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
React con Create React App
32/34Recursos
Aportes 10
Preguntas 2
Ordenar por:
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 😃
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:
-
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.
-
Crea una nueva carpeta para tu proyecto: Abre una terminal y crea una nueva carpeta donde deseas almacenar tu proyecto de React.
-
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.
- 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
- 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.
- 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 “root” definido en el archivo index.html.
-
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.
-
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 “Hello, 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.
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! 👏👍
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?