Getting Started with Expo

---

What is Expo and React Native?

• React Native: A framework that lets you build mobile apps using JavaScript and React.

• Expo: A set of tools and services built around React Native to help you build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript codebase.

---

Why Use Expo?

1. Easy to Start: No need to install Android Studio or Xcode initially.

2. Fast Development: Live reloading and easy testing.

3. Community Support: There are lots of libraries and a helpful community.

Certainly! Here's a simple and easy-to-understand blog post for starting with Expo and React Native.

---

Prerequisites

Before we start, you need:

1. Node.js: Download and install it from nodejs.org.

2. Expo CLI: Command-line tool to create and run your Expo projects.

3. A Text Editor: I recommend VS Code.

---

Step 1: Install Node.js

1. Go to nodejs.org.

2. Download the LTS version.

3. Install it by following the instructions.

Step 2: Install Expo CLI

Open your terminal and run:

npm install -g expo-cli

This installs the Expo CLI globally on your system.

Step 3: Create a New Project

Now, let's create a new Expo project. In the terminal, run:

expo init MyFirstApp

• Choose the template "blank".

• Navigate to your project folder:

cd MyFirstApp

Step 4: Run Your Project

To run your app, use:

expo start

• This opens a new tab in your browser.

• Scan the QR code using the Expo Go app on your phone (available on the App Store and Google Play).

Step 5: Start Coding!

Open the project in your text editor (VS Code). Your project structure should look like this:

MyFirstApp/
├── App.js
├── node_modules/
├── package.json
└── ...other files

Open App.js and you will see:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Change the text inside the <Text> tag to:

<Text>Hello, World!</Text>

Save the file. You should see the changes immediately in the Expo Go app.

Conclusion

Congratulations! You have successfully set up your first Expo and React Native project. From here, you can start exploring more components and libraries to build your app.

Useful Resources

• Expo Documentation

• React Native Documentation

Keep learning and happy coding!

---

Feel free to reach out if you have any questions. Happy coding!