React Native Academy · leksjon

Opprette ditt første Expo-prosjekt

Bruk `npx create-expo-app` til å opprette skjelettet for et nytt prosjekt, utforsk de genererte filene og forstå startpunktet for en React Native-applikasjon.

Leksjon 2 av 413 trinn

Opprette ditt første Expo-prosjekt er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Kommandoen create-expo-app

Den enkleste starten er npx create-expo-app MyApp. Den henter den nyeste malen, setter opp mapper og installerer alt. Legg til et malflagg for å starte tomt eller med navigasjon.

# Create a new Expo project
npx create-expo-app MyFirstApp

# Create with a blank TypeScript template
npx create-expo-app MyFirstApp --template blank-typescript

# Create with tabs navigation template
npx create-expo-app MyFirstApp --template tabs

# Move into the project
cd MyFirstApp

Oversikt over den genererte mappestrukturen

Bli kjent med de nye mappene. App.js er inngangspunktet som React gjengir først, app.json inneholder konfigurasjonen, og assets/ lagrer bilder og skrifter. Koden viser hvordan alt henger sammen.

MyFirstApp/
├── App.js          # Root component (entry point)
├── app.json        # Expo configuration
├── package.json    # NPM dependencies & scripts
├── babel.config.js # Babel transpiler config
├── assets/         # Images, fonts, icons
│   ├── icon.png
│   ├── splash.png
│   └── adaptive-icon.png
└── node_modules/   # Installed packages

Konfigurasjonsfilen app.json

app.json er prosjektets konfigurasjonssentral – appnavn, versjon, ikoner, oppstartsskjerm og plattformspesifikke innstillinger for iOS og Android. Endringer krever en ny build, ikke en hot reload.

{
  'expo': {
    'name': 'My First App',
    'slug': 'my-first-app',
    'version': '1.0.0',
    'orientation': 'portrait',
    'icon': './assets/icon.png',
    'splash': {
      'image': './assets/splash.png',
      'resizeMode': 'contain',
      'backgroundColor': '#ffffff'
    },
    'ios': {
      'bundleIdentifier': 'com.yourname.myfirstapp'
    },
    'android': {
      'package': 'com.yourname.myfirstapp'
    }
  }
}

package.json og skriptene

package.json viser avhengighetene og skriptene. Standardene – start, ios, android og web – starter appen på forskjellige steder. De kan også legge til egne skript.

// package.json (excerpt)
{
  'name': 'my-first-app',
  'version': '1.0.0',
  'main': 'node_modules/expo/AppEntry.js',
  'scripts': {
    'start': 'expo start',
    'android': 'expo start --android',
    'ios': 'expo start --ios',
    'web': 'expo start --web'
  },
  'dependencies': {
    'expo': '~50.0.0',
    'react': '18.2.0',
    'react-native': '0.73.x'
  }
}

Forstå App.js – rotkomponenten

App.js eksporterer rotkomponenten som React Native gjengir først – alle andre komponenter ligger inni den. Dette er den første filen De redigerer, omtrent som index.html i et webprosjekt.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

JSX: Beskrive brukergrensesnitt i JavaScript

JSX lar Dem skrive HTML-lignende markup i JavaScript for å beskrive brukergrensesnittet. Det er likevel ikke HTML – bruk style i stedet for class og onPress i stedet for onclick. Koden viser hvordan.

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

const name = 'World';
const count = 42;

export default function App() {
  return (
    <View>
      {/* This is a JSX comment */}
      <Text>Hello, {name}!</Text>
      <Text>You have {count} messages.</Text>
      {count > 0 && <Text>You have unread items.</Text>}
    </View>
  );
}

Babel og transpilering

Expo bruker Babel til å oversette moderne JavaScript og JSX til kode som hver plattform kan kjøre. De trenger sjelden å endre konfigurasjonen – hovedsakelig for å legge til praktiske aliaser som @/components.

// babel.config.js (default Expo config)
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // Example: add module resolver for clean imports
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@components': './components',
            '@screens': './screens',
          },
        },
      ],
    ],
  };
};

Installere flere avhengigheter

For å legge til pakker bør De foretrekke npx expo install fremfor npm install – kommandoen velger versjonen som passer til Expo SDK og unngår subtile feil på grunn av versjonsforskjeller. Vanlig npm fungerer fint for pakker som bare bruker JavaScript.

# Use expo install for SDK-compatible packages
npx expo install expo-camera expo-location
npx expo install react-native-maps

# Use npm install for pure JS packages
npm install lodash date-fns

# Check for outdated Expo SDK packages
npx expo install --check

# Fix version mismatches
npx expo install --fix

Gjøre den første kodeendringen

Åpne App.js, endre teksten og lagre – Fast Refresh oppdaterer appen på under ett sekund samtidig som tilstanden bevares. Prøv å justere en farge for å se tilbakemeldingen umiddelbart. ✨

// Modified App.js
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>I made my first change.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f4ff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 24, fontWeight: 'bold', color: '#333' },
  subtitle: { fontSize: 16, color: '#666', marginTop: 8 },
});

Expo SDK og managed workflow

Expo SDK gir Dem ferdige moduler for kamera, posisjon, sensorer og mer. I managed workflow håndterer Expo den native koden for Dem – enklere, men begrenset til SDK-API-er.

// Example: using Expo SDK modules
import * as Battery from 'expo-battery';
import * as Haptics from 'expo-haptics';

async function checkBattery() {
  const level = await Battery.getBatteryLevelAsync();
  console.log('Battery level:', level); // 0.0 - 1.0
}

async function vibrate() {
  await Haptics.notificationAsync(
    Haptics.NotificationFeedbackType.Success
  );
}

TypeScript-støtte i Expo

Expo har førsteklasses støtte for TypeScript. Start med malen blank-typescript, eller gi App.js nytt navn til App.tsx. TypeScript oppdager typefeil tidlig og gir bedre autofullføring.

// App.tsx with TypeScript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

interface Props {
  greeting?: string;
}

export default function App({ greeting = 'Hello' }: Props) {
  const message: string = greeting + ', TypeScript!';
  return (
    <View style={styles.container}>
      <Text>{message}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

Hurtigsjekk

Test forståelsen Deres av konseptene innen React Native Mobile Development fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

De opprettet grunnstrukturen for den første appen: create-expo-app bygger et komplett prosjekt umiddelbart, app.json styrer innstillingene, og Fast Refresh viser endringer direkte. Neste steg: kjøre appen på enheter! 🚀

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Opprette ditt første Expo-prosjekt» gratis?

Ja – hele teksten i «Opprette ditt første Expo-prosjekt» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Native Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Opprette ditt første Expo-prosjekt»?

Bruk `npx create-expo-app` til å opprette skjelettet for et nytt prosjekt, utforsk de genererte filene og forstå startpunktet for en React Native-applikasjon. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Opprette ditt første Expo-prosjekt»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Installere Node, Expo CLI og simulatorer
Opprette ditt første Expo-prosjekt
Kjøre på enhet og emulator
Forstå prosjektstrukturen

← Tilbake til React Native Academy