React con Create React App

Curso de React.js

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

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to start a React project from scratch?

Creating new React projects can be a daunting task, especially when you start working from scratch. Although in many courses we use preconfigured repositories, it is vital to learn how to develop our own projects from the ground up. Creating your project with a basic configuration, or also called 'boilerplate', is possible thanks to popular tools in the React community. One of the best known is Create React App, recommended for those who want to get into the creation of applications without getting too complicated with the initial configuration.

What is Create React App?

Create React App (CRA) is a command-line tool that allows you to set up React projects quickly and efficiently. CRA automates the process of creating a new project, providing a well-consolidated basic structure and the essential settings ready to go. This way, you focus on the application logic without worrying about the initial installation and configuration of React and other dependencies.

How to use Create React App?

To create a new project with Create React App, first make sure you have Node.js and npm installed on your system. Then, follow the steps below in your terminal:

Navigate to the folder where you want to create your project.
Run the following command using npx:
```
npx create-react-app project-name
```

This command will automatically generate the basic structure of the project, including the latest version of React and React DOM, as well as a number of configuration files:

Folder src: Contains the source files of the application.
Folder public: Static files such as images or the main HTML template.
Package.json file: Configuration file to manage dependencies.
node_modules folder: Contains all the necessary dependencies for your project.
README.md file: Initial documentation about your project.

Troubleshooting common problems with Create React App

When using Create React App, you may encounter some bugs or technical issues. Here are some practical tips for troubleshooting them:

Read the console carefully: Many times the errors will provide accurate information about the problem.
Google the error: Sort it and check possible solutions on sites like Stack Overflow.
Clear cache or uninstall CRA globally: If you have used CRA before, clear the cache or uninstall older versions to avoid conflicts.
Consult the community: Participate in forums or use the questions section on educational platforms to get additional help.

What are the alternatives to Create React App?

While Create React App is very popular, there are other tools for starting React projects that deserve recognition. They may offer more modern features or different configuration styles to suit a variety of needs. Some alternatives include:

Next.js: A production React framework by Vercel, which facilitates application development with server-side rendering (SSR) and static generation.
Gatsby: Ideal for creating static sites quickly, offering a React-based approach.
Vite: A more modern build tool, ideal for React projects because of its fast build process and instant development server.

Each tool has its own advantages and disadvantages, and the choice will depend on what you need for your project. Be sure to evaluate the features and benefits of each option to select the one that best suits your needs.

With this guide, you are now ready to start your React projects in an efficient and structured way - keep exploring new tools and methods to make your development processes more effective!

Contributions 11

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

Zaidibeth Ramos

2 years ago

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

Israel Hernández Galicia

2 years ago

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 😃

Juan Fernando Lopez

2 years ago

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

Juan Manuel Balaguera Alvira

2 years ago

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.

Joaquín Rosales

a year ago

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

Henry Alexander Velásquez Rosas

2 years ago

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.

Rubén Ernesto Aragón Gil

2 years ago

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.