1---
2title: Create your first app
3---
4
5import { Terminal } from '~/ui/components/Snippet';
6import ImageSpotlight from '~/components/plugins/ImageSpotlight';
7import { A } from '~/ui/components/Text';
8import { Step } from '~/ui/components/Step';
9import { BoxLink } from '~/ui/components/BoxLink';
10import { BookOpen02Icon, Download03Icon } from '@expo/styleguide-icons';
11
12In this chapter, let's learn how to create a new Expo project and how to get it running.
13
14## Prerequisites
15
16We'll need the following tools to get started:
17
18- Install [Expo Go](https://expo.dev/client) on a physical device.
19- Prepare for development by [installing the required tools](/get-started/installation/#requirements).
20
21This 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](https://react.dev/learn).
22
23<Step label="1">
24
25## Initialize a new Expo app
26
27We will use <A href="/more/glossary-of-terms/#create-expo-app">`create-expo-app`</A> to initialize a new Expo app. It is a command line tool that allows to create a new React Native project with the `expo` package installed.
28
29It will create a new project directory and install all the necessary dependencies to get the project up and running locally. Run the following command in your terminal:
30
31<Terminal
32  cmd={[
33    '# Create a project named StickerSmash',
34    '$ npx create-expo-app StickerSmash',
35    '',
36    '# Navigate to the project directory',
37    '$ cd StickerSmash',
38  ]}
39  cmdCopy="npx create-expo-app StickerSmash && cd StickerSmash"
40/>
41
42This command will create a new directory for the project with the name: **StickerSmash**.
43
44</Step>
45
46<Step label="2">
47
48## Download assets
49
50<BoxLink
51  title="Download assets archive"
52  Icon={Download03Icon}
53  description="We'll be using these assets throughout this tutorial."
54  href="/static/images/tutorial/sticker-smash-assets.zip"
55/>
56
57After 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.
58
59Now, let's open the project directory in our favorite code editor or IDE. Throughout this tutorial, we will use VS Code for our examples.
60
61</Step>
62
63<Step label="3">
64
65## Install dependencies
66
67To run the project on the web, we need to install the following dependencies that will help to run the project on the web:
68
69<Terminal cmd={['$ npx expo install react-dom react-native-web @expo/webpack-config']} />
70
71</Step>
72
73<Step label="4">
74
75## Run the app on mobile and web
76
77In the project directory, run the following command to start a <A href="/more/glossary-of-terms/#development-server">development server</A> from the terminal:
78
79<Terminal cmd={['$ npx expo start']} />
80
81Once the development server is running, the easiest way to launch the app is on a physical device with Expo Go. For more information, see <A href="/get-started/create-a-project/#open-the-app-on-your-device">Open app on a device</A>.
82
83To see the web app in action, press <kbd>w</kbd> in the terminal. It will open the web app in the default web browser.
84
85Once it is running on all platforms, the project should look like this:
86
87<ImageSpotlight
88  alt="App running on an all platforms"
89  src="/static/images/tutorial/01-app-running-on-all-platforms.jpg"
90  style={{ maxWidth: 720 }}
91/>
92
93The 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.
94
95</Step>
96
97## Next step
98
99We have created a new Expo project and are ready to develop our StickerSmash app.
100
101<BoxLink
102  title="Build your app's first screen"
103  Icon={BookOpen02Icon}
104  description="In the next chapter, we'll learn how to build the app's first screen."
105  href="/tutorial/build-a-screen"
106/>
107