En aquesta secció, aprendrem a crear la nostra primera aplicació React i a mostrar un simple missatge "Hola Món" a la pantalla. Aquest és un pas fonamental per familiaritzar-nos amb la sintaxi i l'estructura bàsica d'una aplicació React.

• Crear una nova aplicació React utilitzant Create React App.
• Comprendre l'estructura bàsica d'una aplicació React.
• Escriure i renderitzar un component simple que mostri "Hola Món".

Abans de començar, assegura't de tenir Node.js i npm (Node Package Manager) instal·lats al teu sistema. Pots descarregar-los des de nodejs.org.

Create React App és una eina oficial de React per configurar una nova aplicació amb una configuració mínima. Per crear una nova aplicació, obre el terminal i executa la següent comanda:

Aquesta comanda crearà una nova carpeta anomenada hola-mon amb tots els fitxers necessaris per començar a desenvolupar una aplicació React.

Un cop creada l'aplicació, navega a la carpeta del projecte:

Per iniciar l'aplicació, executa la següent comanda:

Aquesta comanda iniciarà el servidor de desenvolupament i obrirà l'aplicació en el teu navegador per defecte a http://localhost:3000.

Quan crees una nova aplicació amb Create React App, obtens una estructura de carpetes similar a aquesta:

Els fitxers més importants per a nosaltres ara són src/index.js i src/App.js.

Obre el fitxer src/App.js i modifica'l per mostrar "Hola Món":

• Importació de React: Importem la biblioteca React per poder utilitzar JSX i altres funcionalitats de React.
• Funció App: Definim un component funcional anomenat App que retorna un element div amb un h1 que conté el text "Hola Món".
• Exportació del component: Exportem el component App perquè pugui ser utilitzat en altres parts de l'aplicació.

El fitxer src/index.js és el punt d'entrada de l'aplicació. Aquí és on el component App es renderitza al DOM:

• Importació de React i ReactDOM: Importem les biblioteques React i ReactDOM.
• Importació de l'estil i el component App: Importem el fitxer d'estils index.css i el component App.
• Renderització del component App: Utilitzem ReactDOM.render per renderitzar el component App dins de l'element amb l'ID root al fitxer public/index.html.

En aquesta secció, hem après a:

• Crear una nova aplicació React utilitzant Create React App.
• Comprendre l'estructura bàsica d'una aplicació React.
• Escriure i renderitzar un component simple que mostra "Hola Món".

Ara que tenim una comprensió bàsica de com crear i renderitzar components en React, estem preparats per aprofundir en altres conceptes fonamentals de React en les següents seccions.