En aquest tema, aprendrem a configurar l'entorn de desenvolupament necessari per començar a treballar amb React. Això inclou la instal·lació de Node.js, la creació d'un projecte amb Create React App i la configuració d'un editor de codi.

Node.js és un entorn d'execució per a JavaScript que ens permet executar codi JavaScript fora del navegador. També inclou npm (Node Package Manager), que és essencial per gestionar les dependències del projecte.

1. Descarregar Node.js:

   • Visita la pàgina oficial de Node.js: https://nodejs.org/
   • Descarrega la versió recomanada per a la teva plataforma (Windows, macOS, Linux).

2. Instal·lar Node.js:

   • Executa l'instal·lador descarregat i segueix les instruccions de la pantalla.
   • Assegura't que l'opció per instal·lar npm també estigui seleccionada.

3. Verificar la instal·lació:

   • Obre una terminal o línia de comandes.
   • Executa les següents comandes per verificar que Node.js i npm s'han instal·lat correctament:

     node -v
     npm -v
     

   • Hauries de veure les versions instal·lades de Node.js i npm.

Create React App és una eina oficial de React que ens permet crear un nou projecte de React amb una configuració mínima.

1. Instal·lar Create React App:

   • Obre una terminal o línia de comandes.
   • Executa la següent comanda per instal·lar Create React App globalment:

     npm install -g create-react-app
     

2. Crear un nou projecte:

   • Navega fins al directori on vols crear el teu projecte.
   • Executa la següent comanda per crear un nou projecte:

     create-react-app my-app
     

   • Substitueix my-app pel nom que vulguis donar al teu projecte.

3. Navegar al directori del projecte:

   • Després que el projecte s'hagi creat, navega fins al directori del projecte:

     cd my-app
     

4. Iniciar l'aplicació:

   • Executa la següent comanda per iniciar l'aplicació:

     npm start
     

   • Això obrirà una nova pestanya al teu navegador amb l'aplicació de React en funcionament.

Per desenvolupar aplicacions de React, necessitem un editor de codi. Un dels editors més populars és Visual Studio Code (VS Code).

1. Descarregar VS Code:

   • Visita la pàgina oficial de Visual Studio Code: https://code.visualstudio.com/
   • Descarrega la versió adequada per a la teva plataforma (Windows, macOS, Linux).

2. Instal·lar VS Code:

   • Executa l'instal·lador descarregat i segueix les instruccions de la pantalla.

3. Instal·lar extensions recomanades:

   • Obre VS Code.
   • Instal·la les següents extensions per millorar l'experiència de desenvolupament amb React:
     • ESLint: Ajuda a identificar i corregir errors de codi.
     • Prettier - Code formatter: Formatador de codi per mantenir un estil consistent.
     • Simple React Snippets: Proporciona fragments de codi per a React.
     • vscode-icons: Afegeix icones als fitxers per facilitar la navegació.

1. Fes clic a la icona d'extensions a la barra lateral esquerra de VS Code.
2. Cerca el nom de l'extensió (per exemple, "ESLint") i fes clic a "Install".

En aquesta secció, hem après a configurar l'entorn de desenvolupament per treballar amb React. Hem instal·lat Node.js, creat un projecte amb Create React App i configurat l'editor de codi Visual Studio Code amb extensions útils. Amb aquest entorn configurat, estem preparats per començar a desenvolupar aplicacions de React.

En el següent tema, crearem la nostra primera aplicació de React amb un simple "Hola Món".