React con Create React App

Resumen

¿Cómo iniciar un proyecto de React desde cero?

Crear proyectos nuevos de React puede ser una tarea abrumadora, especialmente cuando empiezas a trabajar desde cero. Aunque en muchos cursos utilizamos repositorios preconfigurados, es vital aprender a desarrollar nuestros propios proyectos desde la base. Crear tu proyecto con una configuración básica, o también llamado 'boilerplate', es posible gracias a herramientas populares en la comunidad de React. Una de las más conocidas es Create React App, recomendada para quienes quieran adentrarse en la creación de aplicaciones sin complicarse demasiado con la configuración inicial.

¿Qué es Create React App?

Create React App (CRA) es una herramienta de línea de comandos que permite configurar proyectos de React de manera rápida y eficiente. CRA automatiza el proceso de creación de un nuevo proyecto, proporcionando una estructura básica bien consolidada y las configuraciones esenciales ya listas para empezar a trabajar. De esta forma, te centras en la lógica de la aplicación sin preocuparte por la instalación y configuración inicial de React y otras dependencias.

¿Cómo usar Create React App?

Para crear un nuevo proyecto con Create React App, primero asegúrate de tener Node.js y npm instalados en tu sistema. Luego, sigue los siguientes pasos en tu terminal:

Navega hasta la carpeta donde deseas crear tu proyecto.
Ejecuta el siguiente comando utilizando npx:
```
npx create-react-app nombre-del-proyecto
```

Este comando generará automáticamente la estructura básica del proyecto, incluyendo la última versión de React y React DOM, así como una serie de archivos de configuración:

Carpeta src: Contiene los archivos fuente de la aplicación.
Carpeta public: Archivos estáticos como imágenes o el template HTML principal.
Archivo package.json: Archivo de configuración para gestionar dependencias.
Carpeta node_modules: Contiene todas las dependencias necesarias para tu proyecto.
Archivo README.md: Documentación inicial sobre tu proyecto.

Resolución de problemas comunes con Create React App

Al utilizar Create React App, es posible que encuentres algunos errores o problemas técnicos. Aquí te ofrecemos algunos consejos prácticos para solucionarlos:

Lee la consola detenidamente: Muchas veces los errores proporcionarán información precisa sobre el problema.
Buscar el error en Google: Ordénalo y revisa posibles soluciones en sitios como Stack Overflow.
Borra caché o desinstala CRA globalmente: Si has utilizado CRA antes, limpia la caché o desinstala versiones antiguas para evitar conflictos.
Consulta a la comunidad: Participa en foros o utiliza la sección de preguntas en plataformas educativas para obtener ayuda adicional.

¿Cuáles son las alternativas a Create React App?

Si bien Create React App es muy popular, existen otras herramientas para iniciar proyectos React que merecen reconocimiento. Pueden ofrecer características más modernas o diferentes estilos de configuración que se adaptan a diversas necesidades. Algunas alternativas incluyen:

Next.js: Un framework React para producción por Vercel, que facilita el desarrollo de aplicaciones con renderizado del lado del servidor (SSR) y generación estática.
Gatsby: Ideal para crear sitios estáticos rápidamente, ofreciendo un enfoque basado en React.
Vite: Un build tool más moderno, ideal para proyectos de React por su rapidez en el proceso de construcción y servidor de desarrollo instantáneo.

Cada herramienta tiene sus propias ventajas y desventajas, y la elección dependerá de lo que necesites para tu proyecto. Asegúrate de evaluar las características y beneficios de cada opción para seleccionar la que mejor se adapte a tus necesidades.

Con esta guía, ya estás preparado para iniciar tus proyectos de React de manera eficiente y estructurada. ¡Sigue explorando nuevas herramientas y métodos para hacer tus procesos de desarrollo más efectivos!

Zaidibeth Ramos

student•

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

Gabriel Arias

student•

Pide el numero de algun amigo extranjero para la verificación por mensaje y usa un VPN para usarlo.

Gilberto Alejandro Monroy Morales

student•

woooow eso no lo sabia

Israel Hernández Galicia

student•

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

Xavier Flores

student•

efectivamente, utilizar CRA en lo más minimo

Juan Fernando Lopez

student•

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

Juan Manuel Balaguera Alvira

student•

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(
  <h2>Hello, React!</h2>,
  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.

Joaquín Rosales

student•

La documentación oficial dice que CRA no está ya recomendada y se recomienda crear proyectos con VIte

Henry Alexander Velásquez Rosas

student•

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.

Alexander Bejarano Gonzalez

student•

Me gusta la actualizacion del curso, super los datos nuevos. Gracias JuanDa

Rubén Ernesto Aragón Gil

student•

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.

Daniel Morales

student•

No sabia la diferencia entre npm y npx, gracias por la info!

Miguel Sosa

student•

Create React App está discontinuado lamentablemente, ahora lo mejor es usar Next directamente, o vite

Henry Raúl Palomino Martínez

student•

Podrían hacer una explicación también de los cambios recientes (2023) de React para el uso de create-react-app?, Ya que lo quieren descontinuar y desde la misma página de React recomiendan utilizar frameworks como Next o Vite pero ya no create-react-app para las últimas versiones

Juan Castro

teacher•

Henry, como puedes ver en las siguientes clases también explicamos cómo usar React con Vite.js y Next.js. Y en otros cursos de la ruta cómo crear tu propio entorno de desarrollo para React con Webpack. En esa clase usamos CRA, pero en este mismo curso y otros cursos usamos también sus mejores alternativas. :green_heart:

Fredy Max Chavez Loyola

student•

Falto useReducer :)

Juan Castro

teacher•

Entonces esto te va a gustar: https://platzi.com/estado

JUAN JOSE HERNANDEZ MUÑOZ

student•

Durante el curso mencionaste en varias ocasiones que utilizabamos eslint, babel y no se si mencionaste algun otro paquete, me gustaria saber si al usar create react app tal cual lo mostraste en el video tenemos acceso a esas funcionalidades que mencionaste durante el curso o si ademas tenemos que usar npm install para otros paquetes diferentes y si es asi, cuales paquetes son?

Juan Sifontez

student•

Sí. Babel loader y el loader de react ya viene todo configurado con create-react-app.

Si necesitas instalar un paquete simplemente tiene que buscar la documentación y correr el comando para la instalación. La configuración del webpack la maneja CRA por ti y no tienes que hacer mucho mas que configurar el paquete como te diga en su documentación (de ser necesario).

OJO: A la fecha de hoy se puede seguir utilizando CRA. Sin emgargo. El el equipo de CRA YA NO recomienda su uso. En su lugar recomiendad utilizar Next.js, Remix o Gatsby.

JUAN JOSE HERNANDEZ MUÑOZ

student•

@Jsifontez , y Vite tambien puede ser una alternativa a esas tres?

Josue Polania

student•

Súper el curso! 👏👍