unidad 6 – cat

En aquest exercici prepararem el projecte, seguint els passos:

Nivell 1

Exercici 1

1. Instal·lar Nodejs.

Per a facilitar la creació del projecte i gestió de paquets, utilitzarem npm. Per a poder utilitzar-ho haurem de descarregar Node.js al nostre ordinador.

https://nodejs.org/en/download/

unidad 6 - cat 1

2. Instal·lar git.

Per a poder executar el comando del següent pas, hem de tenir instal·lat git:

https://git-scm.com/
unidad 6 - cat 2

3. Instal·lar la plantilla del nostre projecte.

Clonem un projecte que ens servirà de plantilla per als nostres exercicis:

git clone https://github.com/monteserin/react-template

4. Obrir el projecte amb el Visual Studio Code.

Veuràs que en executar el comando anterior, s’ha creat una carpeta amb el nom del projecte.

Arrosseguem el directori acabat de crear al Visual Studio Code per obrir el projecte amb l’editor.

Hem de descarregar els mòduls del projecte, per això, obrim la terminal (drecera del teclat ctrl + ñ) → i executem el comando:

npm i
unidad 6 - cat 3

5. Comprendre l’estructura del projecte creat.

Veuràs que s’han creat diversos arxius i directoris, és important conèixer l’estructura del projecte. A continuació es mostra informació de cada part:

  • Carpeta node_modules → Aquí es guarden les dependències del projecte.
  • Carpeta src → Aquesta carpeta conté el codi de l’aplicació. Per defecte el component principal es diu App.js. També hi haurà un index.js que s’encarregarà d’introduir el component App en el <div> del index.html.
  • package.json → En aquest arxiu es defineixen les dependències de npm. Pots afegir més dependències instal·lant els paquets amb el comando:
npm i nom del paquet

Quan executem el comando:

npm i

El que estarem fent serà instal·lar tots els mòduls referenciats en el package.json.

  • .gitignore → Aquí es definiran els arxius o carpetes que volem que git no tingui en compte.

6. Arrencar el projecte i visualitzar-lo en el navegador.

Desplegarem el nostre projecte en un entorn local (localhost) executant el comando:

npm start

Instal·lant l’extensió de Visual Studio Code npm de egamma podrem executar el comando anterior fent clic en un botó.

unidad 6 - cat 4
unidad 6 - cat 5

Una vegada executat el botò del play del pas anterior, hauràs de veure el missatge d’èxit:

unidad 6 - cat 6

Si entrem en http://localhost:3000 podrem veure l’aplicació:

unidad 6 - cat 7

Exercici 2

Enhorabona! Ja tens el projecte funcionant. Ara només farem petits canvis per jugar amb React.

Com ja sabràs, una aplicació amb React està composta de components, diguem que cada component és una peça del puzle.

Pots crear tants components com vulguis, i sempre que ho consideris necessari, pots utilitzar un o diversos components dins d’un altre.

Per exemple, si féssim una landing page amb react, dins del component principal (base de la web) podríem importar el component header, menú, formulari de contacte….

En aquest exercici, crearem un component i l’importarem en el component principal App.

1. Crear l’arxiu book.js.

2. Després copia aquest codi i completa’l perquè retorni el text “Viatge a la lluna”:

export default () => 

Ara farem ús del component Book en App.js. Completa el component App.js:

import Book from './book';
export default () => {
    return (
        <div>
        </div>
    );
};

El resultat ha de ser:

unidad 6 - cat 8

Nivell 2

Exercici 3

En lloc de harcodear (escriure directament) el valor del component en el seu interior, li ho passarem com prop des del component App.

El resultat hauria de continuar sent el mateix. L’única cosa que canviarà serà la implementació del codi.

Nivell 3

Exercici 4

Llegirem els llibres que mostrarà la nostra aplicació des d’un fitxer JSON. Per això, importarem aquest fitxer en la nostra aplicació i ho recorrerem amb una estructura .map.

Aquest és el JSON amb el array de frases:

[
  {
    "title": "Viatge a la lluna",
    "author": "Julio Verne"
  },
  {
    "title": "El metge",
    "author": "Noah Gordon"
  }
]

El resultat final ha de ser alguna cosa així:

unidad 6 - cat 9