Getting Started with Expo Web

#javascript #tutorial #beginners #webdev

👉 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:

🔽 Install	💫 Initialize	🏃🏼‍♀️ Start	🚀 Build	🔼 Deploy

🔽 Components

💫 Run Everywhere

🏃🏼‍♀️ Learn More

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:

💡 Learn more about expo init



$ 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!