El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderemos a crear nuestra primera aplicación en React y a mostrar un mensaje de "Hola Mundo". Este es un paso fundamental para familiarizarnos con la estructura básica de una aplicación React y con el uso de JSX.

Objetivos

Configurar un proyecto básico de React.
Crear y renderizar un componente simple.
Comprender la estructura básica de una aplicación React.

Requisitos Previos

Tener Node.js y npm instalados en tu sistema.
Familiaridad básica con JavaScript y HTML.

Pasos para Crear un Proyecto React

Crear un Proyecto con Create React App

Create React App es una herramienta oficial de React que nos permite crear una nueva aplicación React con una configuración predeterminada. Para crear un nuevo proyecto, sigue estos pasos:

Abre tu terminal o línea de comandos.
Ejecuta el siguiente comando para crear una nueva aplicación React:
```
npx create-react-app hola-mundo
```
Este comando creará una nueva carpeta llamada hola-mundo con todos los archivos y configuraciones necesarias para empezar a trabajar con React.
Navega a la carpeta del proyecto:
```
cd hola-mundo
```
Inicia la aplicación:
```
npm start
```
Esto abrirá una nueva ventana en tu navegador con la aplicación React en funcionamiento. Deberías ver una pantalla de bienvenida de React.

Estructura del Proyecto

La estructura básica de un proyecto creado con Create React App es la siguiente:

hola-mundo/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

public/: Contiene el archivo index.html que es el punto de entrada de la aplicación.
src/: Contiene los archivos fuente de la aplicación, incluyendo componentes, estilos y pruebas.

Modificar el Componente App

Vamos a modificar el componente App.js para que muestre "Hola Mundo". Abre el archivo src/App.js y reemplaza su contenido con el siguiente código:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hola Mundo</h1>
      </header>
    </div>
  );
}

export default App;

Explicación del Código

import React from 'react';: Importa la biblioteca React.
import './App.css';: Importa los estilos CSS para el componente App.
function App() { ... }: Define un componente funcional llamado App.
<div className="App">...</div>: Devuelve un elemento div con una clase CSS App.
<header className="App-header">...</header>: Dentro del div, hay un elemento header con una clase CSS App-header.
<h1>Hola Mundo</h1>: Dentro del header, hay un elemento h1 que muestra el texto "Hola Mundo".
export default App;: Exporta el componente App para que pueda ser utilizado en otros archivos.

Ver el Resultado

Guarda los cambios en App.js y tu navegador debería actualizarse automáticamente para mostrar "Hola Mundo".

Ejercicio Práctico

Ejercicio 1: Personalizar el Mensaje

Modifica el componente App para que muestre tu nombre en lugar de "Hola Mundo". Por ejemplo, si tu nombre es Juan, el mensaje debería ser "Hola Juan".

Solución

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hola Juan</h1>
      </header>
    </div>
  );
}

export default App;

Ejercicio 2: Añadir un Párrafo

Añade un párrafo debajo del encabezado h1 que diga "Bienvenido a mi primera aplicación React".

Solución

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hola Juan</h1>
        <p>Bienvenido a mi primera aplicación React</p>
      </header>
    </div>
  );
}

export default App;

Conclusión

En esta lección, hemos aprendido a crear una aplicación básica en React y a mostrar un mensaje de "Hola Mundo". También hemos explorado la estructura de un proyecto React y cómo modificar un componente para personalizar el contenido. En la próxima lección, profundizaremos en JSX, la extensión de sintaxis de JavaScript que se utiliza en React.

Hola Mundo en React

Objetivos

Requisitos Previos

Pasos para Crear un Proyecto React

Crear un Proyecto con Create React App

Estructura del Proyecto

Modificar el Componente App

Explicación del Código

Ver el Resultado

Ejercicio Práctico

Ejercicio 1: Personalizar el Mensaje

Solución

Ejercicio 2: Añadir un Párrafo

Solución

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa