👉 This guide is for beginner React devs with no knowledge of Expo, or building mobile apps.
Expo lets you build and deploy real iOS, Android, and Web apps with React and JavaScript. Expo websites are performant and highly customizable; meaning you can use them with any of your existing React tools like Next.js, Gatsby, Preact, Electron, etc...
This guide will quickly show you the basics for creating a website and deploying it to the web in minutes! For more on mobile apps check out the Expo docs.
You'll Learn how to:
Getting Started
Install the Expo CLI and make a new universal project (Web, iOS, Android):
💡 Absolute beginners with no coding experience should visit snack.expo.io to get started in the browser without using the terminal.
$ npm install -g expo-cli
Create a new Expo project:
$ expo init myProject
Now enter the project and start it:
$ cd myProject
$ expo start --web
Your browser will automatically open to the website and you'll see this:
Building
Creating a production build is simple:
💡 Expo Web builds live in the
web-build
folder.
$ expo build:web
You can deploy the website using any hosting service. For this example we'll use Netlify:
$ npx netlify deploy --dir web-build
And that's all! You just created and deployed your first universal Expo website!! See some examples and learn more in the Expo Documentation.
🤔 How Expo Web Works
Every screen in an Expo app is a React Component, but instead of using <div/>
, <p/>
, <img/>
- Expo uses <View />
, <Text />
, <Image />
, <ScrollView />
, etc...
The first component in your app is whatever JSX you export from App.js
:
import React from 'react';
import { Text } from 'react-native';
function App() {
return <Text>Expo Everywhere!</Text>
}
export default App;
🏃🏻♂️ Running Everywhere
- 🌐 Try Expo Web in the browser with: ```sh
$ expo start --web
or faster in web-only mode
$ expo start:web
- 💻 Run in the **simulator** with:
```sh
$ expo start --ios
# or Android
$ expo start --android
- 📱 You can also open this on your phone with the Expo client!
🕵️♀️ Learn More
- 🎨 Now you can style the text
- 🚗 Start Navigating and Routing with Expo's React Navigation.
- 🚀 Use with Next.js or Gatsby for simple web-only navigation and routing.
- 🔥 Use a Universal Expo Component Library to get moving faster:
- ⭐️ You can also simply visit snack.expo.io to get started in the browser without installing anything!
👋 Thanks for Reading
That's all for now. Keep up with the latest Expo Web news by following 👇
Top comments (3)
those. simple test just doesnt work for me
Is Expo the only way to use React Native Web? Or can it also be used with Plain React Native?
Is Expo Web able to be added in to an existing Expo project?