Getting Started with React Native: Your First App and Folder Structure

React Native is one of the most popular frameworks for building cross-platform mobile apps using JavaScript and React. In today's class, we explored how to set up a React Native project using Expo, launch the development server, and understand the folder structure of a newly created project. Let’s go step by step.

1. Setting Up Your First React Native App

To begin, we use Expo, a framework that simplifies the setup and development of React Native apps. Instead of manually configuring native dependencies, Expo provides an easy way to start.

Step 1: Install Node.js and Expo CLI

Before creating a React Native app, ensure you have Node.js installed. You can download it from Node.js official website.

Once Node.js is installed, you can create a new React Native app with Expo by running:

npx create-expo-app@latest MyFirstApp

Replace MyFirstApp with your desired project name.

Step 2: Navigate to Your Project

After the installation is complete, navigate into your project directory:

cd MyFirstApp

Step 3: Start the Development Server

To run the app, use the command:

npm start

expo start

This will open the Expo Developer Tools in your browser, where you can scan the QR code with the Expo Go app (available on iOS and Android) to view the app on your mobile device.

2. Understanding the Project Folder Structure

Once your project is set up, you’ll notice several folders and files inside your project directory. Here’s what they do:

📂 Folders

.expo/ – Stores Expo’s internal data (cache, settings). You don’t need to modify this.
.vscode/ – Contains VS Code settings for debugging and configurations.
app/ – The main folder where you’ll write most of your code (screens, navigation, etc.).
assets/ – Stores static files like images, fonts, and icons.
components/ – Contains reusable UI components (buttons, cards, etc.).
constants/ – Stores global variables such as API URLs and theme settings.
hooks/ – Holds custom React hooks for handling logic and state management.
node_modules/ – Stores installed dependencies. You don’t modify this manually.
scripts/ – Can include scripts for automation tasks (optional).

📄 Important Files

.gitignore – Specifies files that should not be committed to Git.
app.json – Configuration file for the Expo project (app name, splash screen, etc.).
package.json – Defines dependencies, scripts, and metadata for the project.
tsconfig.json – TypeScript configuration file (if using TypeScript).
README.md – A markdown file with project instructions.

3. Where Will You Work the Most?

If you're new to React Native, you’ll primarily work inside:

app/ → Contains the core app logic (screens, navigation, components).
components/ → Where you create reusable UI elements.
assets/ → To manage images, fonts, and icons.
app.json → For modifying app settings like the splash screen.

Conclusion

Today, we successfully set up a React Native app using Expo, explored its folder structure, and understood where to write code. In the next session, we’ll start building screens and integrating navigation into our app!

Stay tuned for more coding adventures! 🚀