Installatie & Snippets

Maak een nieuw project aan

We beginnen met het aanmaken van een project in VS Code. Open de terminal en voer het volgende commando uit:

npx create-expo-app@latest

Geef het project een naam

Na het uitvoeren van het bovenstaande commando wordt je gevraagd om een naam voor je project in te voeren.

Run het project in een simulator

npx expo start

In je terminal staat nu wat je moet doen om het in de juiste simulator te runnen.

Run het project in Expo-app

Wil je het project runnen in de expo-app op je telefoon en ben je op school, run dan het volgende commando:

npx expo start --tunnel

npm i @expo/ngrok@4.1.0

Project opschonen

Voordat je kunt beginnen met programmeren, moet je wel wat bestanden verwijderen van het project.

Verwijder de volgende mappen:

• components
• constants
• hooks
• scripts

Vervolgens verwijder je alles in de app folder en maak je een nieuw bestand aan genaamd: index.jsx

In dit bestand maak je een component:

import {View} from 'react-native'

export default function App() {
  return (
    <View>app</View>
  )
}

Extensies installeren

Installeer de volgende extensies in VS Code om je productiviteit te verhogen:

Shortcuts

Gebruik de volgende shortcuts om sneller te werken:

rnf - React Native Functional Component

Type rnf en druk op Tab om automatisch een component aan te maken:

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

export default function ComponentName() {
  return (
    <View style={styles.container}>
      <Text>ComponentName</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {}
})

rnss - React Native StyleSheet

Type rnss en druk op Tab om automatisch een StyleSheet aan te maken:

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