Hola Mundo en React

En esta sección vamos a crear nuestro primer “Hola Mundo” en React, para ello vamos a utilizar Vite como herramienta de desarrollo.

Crear un proyecto Vite

Para crear un proyecto Vite, vamos a utilizar el siguiente comando:

npm create vite@latest .

Este comando nos va a crear un proyecto Vite en el directorio actual, en las diferentes opciones que nos aparece despues de ejecutar el comando, seleccionamos la opción react y posteriormete seleccionamos la opción JavaScript.

Una vez que se haya creado el proyecto, vamos a instalar las dependencias necesarias para trabajar con React, para ello ejecutamos el siguiente comando:

npm install

Con esto listo, ya podemos empezar a trabajar con React.

Crear un componente

Un componente en React es una pieza de código que se encarga de renderizar una parte de la interfaz de usuario, para crear un componente en React, vamos a crear un archivo llamado HelloWorld.jsx en la carpeta src/components y vamos a agregar el siguiente código:

const HelloWorld = () => {
  return (
    <h1>Hola Mundo</h1>
  );
};

export default HelloWorld;

Tip

Los componentes de react se pueden exportar de 2 formas diferentes, la primera es la que acabamos de ver, donde se exporta el componente de forma individual y la segunda es exportar el componente de forma anónima, para ello se puede hacer de la siguiente forma:

export default function HelloWorld() {
    return <h1>Hello World!</h1>;
}

Ambas formas son válidas y se pueden utilizar indistintamente.

Ahora que ya tenemos nuestro componente, vamos a importarlo en el archivo App.jsx que se encuentra en la carpeta src y vamos a agregar el siguiente código:

import HelloWorld from './components/HelloWorld';

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

export default App;

Tip

Recuerda que el componente que acabamos de importar será renderizado en el archivo main.js que se encuentra en la carpeta src, podrias modificarlo un poco antes de correr el servidor y probar si todo funciona correctamente.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Con esto tenemos todo listo, para probar nuestra aplicación vamos a ejecutar el siguiente comando:

npm run dev

Este comando nos va a iniciar un servidor de desarrollo y nos va a abrir una ventana en el navegador con nuestra aplicación.

Con esto ya tenemos nuestra aplicación funcionando correctamente, en la siguiente sección vamos a entender como está organizada la estructura de un proyecto en React.

Retos

1. Modifica el componente HelloWorld.jsx para que muestre un mensaje diferente como tu nombre.

Ver respuesta

const HelloWorld = () => {
  return (
    <h1>Hola, mi nombre es Diego Saavedra</h1>
  );
};

export default HelloWorld;

2. Crea un nuevo componente llamado HelloWorld2.jsx y modifica el componente App.jsx para que renderice el nuevo componente.

Ver respuesta

const HelloWorld2 = () => {
  return (
    <h1>Hola, mi nombre es Diego Saavedra</h1>
  );
};

export default HelloWorld2;

import './App.css'

function App() {

}

return (
  <div>
    <MostrarNombre />
    <MostrarNombreJs />
  </div>
);

const MostrarNombre = () => {
  return <h1>Diego Saavedra</h1>
}

const MostrarNombreJs = () => {
  return 'Diego Saavedra'
}

export default MostrarNombre;

Conclusiones

En esta sección aprendimos a crear un proyecto Vite con React y a crear nuestro primer componente en React, en la siguiente sección vamos a entender como está organizada la estructura de un proyecto en React.