Sett opp verktøyene med Expo

React Native-koden kjører ikke i nettleseren — den kjører i en ekte app. Expo er verktøyet som gjør oppsettet til to kommandoer og en QR-kode. Denne leksjonen handler bare om én ting: få appen din til å dukke opp på telefonen din, i kveld.

Hva Expo gjør for deg

React Native alene er rammeverket; rundt det trenger du prosjektstruktur, en utviklingsserver og noe som viser resultatet — og dette for både iOS og Android. Expo pakker alt sammen, slik at du slipper å installere Xcode og Android Studio for å komme i gang. Tre biter:

• npx create-expo-app — lager prosjektet med alt klart, som create-vite for apper.
• npm start — starter utviklingsserveren som holder koden din og skriver en QR-kode.
• Expo Go — en gratis lese-app (App Store / Play Store) som kjører prosjektet ditt direkte på telefonen.

Kommandoene

1npx create-expo-app notisapp2cd notisapp3npm start

npm start gir deg en QR-kode i terminalen. Skann den med Expo Go — på Android skanner du inne i Expo Go-appen, på iPhone åpner kamera-appen Expo Go for deg. Noen sekunder senere kjører prosjektet på telefonen din.

App.tsx — hele appen din

Prosjektet som lages, er en vanlig React-mappe — og én fil betyr noe i starten: App.tsx, komponenten som *er* appen. Åpner du den, kjenner du deg igjen: en funksjon som returnerer JSX.

1import { StyleSheet, Text, View } from "react-native";2 3const stiler = StyleSheet.create({ ramme: { padding: 24, paddingTop: 60 } });4 5export default function App() {6  return (7    <View style={stiler.ramme}>8      <Text>Hei, telefon!</Text>9    </View>10  );11}

Endrer du teksten i App.tsx og lagrer, dukker endringen opp på telefonen med én gang — uten reinstallering. Det heter Fast Refresh, og det er det som gjør «se det på telefonen» til noe du kan gjøre hele tiden, ikke noe du gjør til slutt.

En ærlig merknad om kurset: arbeidsområdet på denne siden kan kjøre nettleserkode, men ikke React Native. Derfor er alle kodefigurer her statiske, og kurset går gjennom de ekte verktøyene — du lærer ikke en etterligning, du lærer det du faktisk skal bruke.