Getting Started with Expo
Hello everyone! Today, we will learn how to start building mobile apps using Expo and React Native. This guide is simple and beginner-friendly.
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?
Easy to Start: No need to install Android Studio or Xcode initially.
Fast Development: Live reloading and easy testing.
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:
Node.js: Download and install it from nodejs.org.
Expo CLI: Command-line tool to create and run your Expo projects.
A Text Editor: I recommend VS Code.
Step 1: Install Node.js
Go to nodejs.org.
Download the LTS version.
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
Keep learning and happy coding!
Feel free to reach out if you have any questions. Happy coding!