En aquest tema, crearem la nostra primera aplicació amb React Native: una simple aplicació "Hello World". Aquest exercici ens permetrà familiaritzar-nos amb l'estructura bàsica d'una aplicació React Native i amb el procés de desenvolupament.

• Crear una nova aplicació React Native.
• Comprendre l'estructura bàsica d'un projecte React Native.
• Escriure i executar una aplicació "Hello World".

1. Instal·lar React Native CLI: Si encara no ho has fet, instal·la React Native CLI globalment al teu sistema:

   npm install -g react-native-cli
   

2. Crear un nou projecte: Utilitza el CLI per crear un nou projecte. Anomena el projecte HelloWorldApp:

   npx react-native init HelloWorldApp
   

3. Navegar al directori del projecte: Un cop creat el projecte, navega al directori del projecte:

   cd HelloWorldApp
   

Un cop creat el projecte, veuràs una estructura de carpetes similar a aquesta:

• App.js: El fitxer principal de la teva aplicació. Aquí és on escriuràs el codi de la teva aplicació.
• index.js: El punt d'entrada de la teva aplicació.
• android/ i ios/: Carpetes que contenen el codi específic per a Android i iOS, respectivament.

Obre el fitxer App.js i modifica'l per mostrar "Hello World". Aquí tens un exemple de codi:

• Importacions:

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

  Importem els components necessaris de React Native.

• Component App:

  const App = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World</Text>
      </View>
    );
  };
  

  Definim un component funcional App que retorna una vista (View) amb un text (Text).

• Estils:

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    text: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
  });
  

  Utilitzem StyleSheet per definir els estils per a la vista i el text.

• Exportació:

  export default App;
  

  Exportem el component App com a exportació per defecte.

1. Assegura't que tens un emulador Android en funcionament o un dispositiu físic connectat.
2. Executa la comanda següent per iniciar l'aplicació:

   npx react-native run-android
   

1. Assegura't que tens Xcode instal·lat i un simulador iOS en funcionament o un dispositiu físic connectat.
2. Executa la comanda següent per iniciar l'aplicació:

   npx react-native run-ios
   

Modifica l'aplicació "Hello World" per mostrar el teu nom en lloc de "Hello World".

Modifica el fitxer App.js de la següent manera:

Substitueix [El teu nom] pel teu nom real.

En aquest tema, hem creat la nostra primera aplicació React Native i hem après sobre l'estructura bàsica d'un projecte. També hem escrit i executat una aplicació "Hello World". Aquest és el primer pas per convertir-te en un desenvolupador de React Native. En el següent tema, explorarem JSX, el llenguatge de marcatge utilitzat en React Native.