create a project

npx create-expo-app@latest --template blank ./

install packages to allow you to run the app in the browser

npx expo install react-dom react-native-web

setup up file-based routing

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

update the 'main' property in the package.json file

"main": "expo-router/entry",

updates the files for file-based routing

• delete index.js
• delete App.js
• create a folder (in the project folder) named app
• add a file named index.jsx to the app folder

Put some simple starter code in index.jsx:

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

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  )
}

export default Home

const styles = StyleSheet.create({})

Create a file in the app folder named _layout.jsx and put this starter code into it:

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

const RootLayout = () => {
  return (
    <View style={{flex:1}}>
      <Text>Header</Text>
      <Slot />
      <Text>Footer</Text>
    </View>
  )
}

export default RootLayout

const styles = StyleSheet.create({})

Note that you will most likely want to use Stack navigation or Tab navigation in the _layout file. Which means you will have to change the RootLayout component. For a refresher on how to do this, look at the instructions for Step 7 of the React Native Sample Project

The final step is to link the repository (which was created when we ran the first command) to the GitHub classroom.