📱 Tutorial pas a pas: React Native amb Expo

Aquest tutorial està pensat per a estudiants de Batxillerat que volen fer la seva primera app mòbil amb React Native, de manera senzilla i guiada.

1. Què és React Native?

React Native és una tecnologia creada per Facebook que permet crear aplicacions per Android i iOS amb JavaScript. Utilitzarem Expo, que facilita molt el procés.

2. Requisits previs

• Un ordinador amb Windows, macOS o Linux
• Instal·lar Node.js des de: https://nodejs.org
• Instal·lar Expo CLI
• Un telèfon amb l’app Expo Go (gratuïta) instal·lada

3. Instal·lació de l’entorn

Obre el terminal (CMD, Terminal, etc.) i escriu:

npm install -g expo-cli

Després, crea una nova app:

expo init PrimeraApp

cd PrimeraApp
npm start

S'obrirà una pestanya al navegador. Escaneja el codi QR amb l’app Expo Go al mòbil. Ja veuràs l’app!

4. Primer codi React Native

Obre el fitxer App.js i canvia’l per aquest codi:

import React, { useState } from 'react';
import { Text, View, Button } from 'react-native';

export default function App() {
  const [comptador, setComptador] = useState(0);

  return (
    
      
        Comptador: {comptador}
      
       setComptador(comptador + 1)} />
    
  );
}

5. Explicació del codi

• useState: crea una variable que canvia (estat)
• View: una secció de la pantalla
• Text: mostra text
• Button: botó amb acció

6. Propostes d'exercicis

1. Canvia el text del botó a "Sumar 1"
2. Fes que es pugui restar amb un altre botó
3. Mostra un missatge si el comptador arriba a 10

7. Recursos útils

• Documentació oficial
• Snack: editor online Expo
• FreeCodeCamp articles React Native

8. Final

Amb això ja tens el teu primer projecte fet! Pots continuar millorant-lo amb navegació, estils, dades, etc.