Guia d'inici a React: construeix la teva primera interfície d'usuari des de zero

React és una biblioteca de JavaScript per construir interfícies d'usuari. Desenvolupada i mantinguda per Facebook, s'ha convertit en una de les eines més populars en el desenvolupament front-end. Aquesta guia et portarà des de zero, pas a pas, per entendre els conceptes bàsics de React i construir una interfície d'usuari senzilla.

Per què triar React?

React té els avantatges següents:

• Componentització: React descompon la interfície d'usuari en components independents i reutilitzables. Això fa que el codi sigui més fàcil de mantenir i entendre.
• Declaratiu: React utilitza un estil de programació declaratiu, el que significa que només has de descriure el que vols presentar i React s'encarregarà automàticament de les actualitzacions i el renderitzat.
• Eficient: React utilitza un DOM virtual i un algorisme diff intel·ligent, que permet actualitzar la interfície d'usuari de manera eficient, reduint el renderitzat innecessari.
• Gran suport de la comunitat: React té una gran comunitat i un ric ecosistema, on pots trobar una gran quantitat de tutorials, biblioteques i eines per ajudar-te a desenvolupar.
• Capacitat multiplataforma: React Native et permet utilitzar React per desenvolupar aplicacions mòbils natives (iOS i Android).

Preparació

Abans de començar, has d'assegurar-te que tens instal·lades les eines següents al teu ordinador:

• Node.js: Node.js és un entorn d'execució de JavaScript que s'utilitza per executar eines de desenvolupament de React. Pots descarregar-lo i instal·lar-lo des de https://nodejs.org/.
• npm o yarn: npm (Node Package Manager) i yarn són gestors de paquets de JavaScript que s'utilitzen per instal·lar i gestionar les dependències de React. Normalment, npm s'instal·la juntament amb Node.js. yarn es pot instal·lar des de https://yarnpkg.com/.

Crea la teva primera aplicació React

Utilitzarem create-react-app per crear ràpidament un projecte React.

1. Crea amb npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Crea amb yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Després d'executar les ordres anteriors, create-react-app crearà automàticament un directori anomenat my-first-react-app i inicialitzarà un projecte React en aquest directori. L'ordre npm start o yarn start iniciarà el servidor de desenvolupament i podràs accedir a la teva aplicació React al navegador visitant http://localhost:3000.

Estructura de directoris

L'estructura de directoris del projecte creat per create-react-app és la següent:

my-first-react-app/
├── node_modules/         # Les biblioteques de les quals depèn el projecte
├── public/               # Recursos estàtics (per exemple, fitxers HTML)
│   ├── index.html        # El fitxer HTML d'entrada de l'aplicació
│   └── ...
├── src/                  # Codi font de React
│   ├── App.css           # Estils CSS del component App
│   ├── App.js            # Component App
│   ├── App.test.js       # Fitxer de prova del component App
│   ├── index.css         # Estils CSS globals
│   ├── index.js          # El fitxer JavaScript d'entrada de l'aplicació
│   ├── logo.svg          # Logo de React
│   └── ...
├── .gitignore            # Fitxer d'ignorància de Git
├── package.json          # Metadades i dependències del projecte
├── README.md             # Documentació del projecte
└── yarn.lock             # Fitxer de bloqueig de versions de dependències (si s'utilitza yarn)

Comprendre els components de React

Una aplicació React està formada per components. Els components són blocs de codi independents i reutilitzables que s'utilitzen per renderitzar parts específiques de la interfície d'usuari.

Al fitxer src/App.js, podeu veure un component App per defecte:

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

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Explicació del codi:

• import React from 'react'; Importa la biblioteca React.
• function App() { ... } Defineix un component de funció anomenat App.
• return ( ... ) Retorna una expressió JSX que descriu el contingut que ha de renderitzar el component.
• export default App; Exporta el component App perquè es pugui utilitzar en altres fitxers.

JSX (JavaScript XML)

JSX és una extensió de sintaxi de JavaScript que us permet escriure codi similar a HTML al codi JavaScript. A l'exemple anterior, ... és una expressió JSX. El codi JSX es converteix en codi JavaScript estàndard per Babel perquè el navegador el pugui entendre.

Modificar el component App

Modifiquem el component App per crear un comptador senzill.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Comptador

      Compte actual: {count}

      +
      -
    
  );
}

export default App;

Modificacions:

• import React, { useState } from 'react'; Importa el Hook useState. useState és un Hook de React que s'utilitza per afegir estat als components de funció.
• const [count, setCount] = useState(0); Utilitza el Hook useState per crear una variable d'estat anomenada count i inicialitzar-la a 0. setCount és una funció que s'utilitza per actualitzar l'estat de count.
• const increment = () => { setCount(count + 1); }; Defineix una funció anomenada increment que s'utilitza per augmentar l'estat de count en 1.
• const decrement = () => { setCount(count - 1); }; Defineix una funció anomenada decrement que s'utilitza per disminuir l'estat de count en 1.
• Compte actual: {count} Mostra el valor de l'estat de count a la pàgina. {count} és una expressió JSX que s'utilitza per inserir variables de JavaScript al codi JSX.
• + i - Crea dos botons, enllaçant les funcions increment i decrement respectivament. onClick és un gestor d'esdeveniments que s'utilitza per executar la funció especificada quan es fa clic al botó.

Després de desar el fitxer src/App.js, el navegador s'actualitzarà automàticament i veuràs un comptador senzill. Fer clic al botó "+" augmentarà el recompte, fer clic al botó "-" disminuirà el recompte.

Utilitzar estils CSS

Pots utilitzar CSS per embellir la teva aplicació React. create-react-app admet CSS Modules i fitxers CSS normals.

Utilitzar CSS Modules:

CSS Modules et permet crear estils CSS independents per a cada component, evitant conflictes d'estil. Per utilitzar CSS Modules en un component, has de crear un fitxer que acabi en .module.css.

Per exemple, crea un fitxer anomenat App.module.css i afegeix-hi els següents estils CSS:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Després, importa CSS Modules al fitxer src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importa CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Utilitza l'objecte styles per referenciar les classes CSS */}
      

# Comptador

      Comptatge actual: {count}

      +
      -
    
  );
}

export default App;

Utilitzant un fitxer CSS normal:

També pots utilitzar un fitxer CSS normal per definir estils globals. Al fitxer src/index.css, pots definir estils globals.

Per exemple, afegeix el següent estil CSS:

body {
  font-family: sans-serif;
}

Aquest estil s'aplicarà a l'element body de tota l'aplicació.

Següents passos

Felicitats, has completat la teva primera aplicació React! A continuació, pots aprendre més sobre React, per exemple:

• Comunicació entre components: Aprèn com fer que diferents components es comuniquin entre si.
• Processament de formularis: Aprèn com crear i processar formularis.
• Enrutament: Aprèn com utilitzar React Router per crear aplicacions de múltiples pàgines.
• Redux o Context API: Aprèn com gestionar l'estat de l'aplicació.
• Hooks: Aprofundeix en els React Hooks, com ara useEffect, useContext, etc.

Recorda, React és una tecnologia que requereix pràctica i aprenentatge constants. Que gaudeixis aprenent!