Edit this page
In this tutorial, learn how to create a new Expo project.
Edit this page
In this chapter, let's learn how to create a new Expo project and how to get it running.
We'll need the following tools to get started:
This tutorial also assumes that you have a basic knowledge of JavaScript and React. If you have never written React code, go through the official React tutorial.
1
We will use create-expo-app
to initialize a new Expo app. It is a command line tool that allows us to create a new React Native project with the expo
package installed. Run the following command in your terminal:
# Create a project named StickerSmash
-
npx create-expo-app StickerSmash --template blank
# Navigate to the project directory
-
cd StickerSmash
This command will create a new directory for the project with the name StickerSmash. The create-expo-app
has a --template
option, which we can use to create and set up a new project with different pre-installed libraries. In this case, we're using the blank
which installs the minimum required libraries. We'll continue to add more libraries throughout this tutorial when needed.
2
We'll be using these assets throughout this tutorial.
After downloading the archive, unzip it and replace the existing assets directory with it in the project directory. This will override the default assets created when the new project was initialized.
Now, let's open the project directory in our favorite code editor or IDE. Throughout this tutorial, we will use VS Code for our examples.
3
To run the project on the web, we need to install the following dependencies that will help to run the project on the web:
-
npx expo install react-dom react-native-web @expo/metro-runtime
4
In the project directory, run the following command to start a development server from the terminal:
-
npx expo start
Once the development server is running, the easiest way to launch the app is on a physical device with Expo Go. For more information, see Open app on a device.
To see the web app in action, press w in the terminal. It will open the web app in the default web browser.
Once it is running on all platforms, the project should look like this:
The text displayed on the app's screen above can be found in the App.js file which is at the root of the project's directory. It is the entry point of the project and is executed when the development server starts.
We have created a new Expo project and are ready to develop our StickerSmash app.
In the next chapter, we'll learn how to build the app's first screen.