React Native - Project Setup

This lesson is part of a series on React Native.

Step 1 - Project Setup

Before starting this project, you should have completed this tutorial: https://reactnative.dev/docs/getting-started

Make sure you have the ES7+ React/Redux/React Native/JS Snippets extension installed

To create the project

Go here to get started: https://docs.expo.dev/get-started/create-a-project/

To create a blank project (the ./ tells it to make the project int he curent folder - not to make a new folder):

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

Note that this will initialize a Git repository

Todo: review the starter files:

assets/
App.js - root component
app.json - config file
index.js - entry point (loads the App component)

To set up your environemnt:

https://docs.expo.dev/get-started/set-up-your-environment/

• choose the device that you have (ios/android)
• choose Expo Go
• scan the QR code to install the Expo Go app, which will run your project on your device
• when you start the app, you'll be prompted to scan another QR code, you'll see that qr code in when you run the app in VS Code (in the next step)

Then start the app in VS Code:

npx expo start

In the terminal you'll see a QR code, which you can scan with Expo Go (on your device) to run the app

When you save changes it will live reload on your device! BUT if it doesn't Expo Go has a 'reload' feature (you shake your iPhone to see it, not sure about Android).

Shake the device to see the developer control panel

• This wil allow you to force the app to reload, which you have to do occasionally

Running the app in the browser

You can also run it in the browser

First install this:

npx expo install react-dom react-native-web

Then to run it:

npm run web