Getting Started with React Native

Why I Chose React Native

I've dabbled in web development for a while, and therefore React Native was a natural choice for me. Here's some key factors that drew me to React Native over other mobile development frameworks:

• I can build for both iOS and Android with one codebase
• I can reuse components across different parts of my app
• There's a large and growing community
• Hot reloading is awesome

Setting Up My First React Native Project

Here's some steps on how I set up my development environment using Expo and VS Code.

What You'll Need

• Node.js
• VS Code (my preferred editor)
• A phone or emulator for testing
• Git for version control

Step 1: Installing Expo CLI

First, I installed the Expo CLI globally with this command:

npm install -g expo-cli

I use Expo CLI because it makes managing React Native projects so much easier.

Step 2: Creating My Project

npx create-expo-app@latest

After running the command above, it will ask to name the app:

What is your app named? my-app

Then navigate to the project folder:

cd my-app

Step 3: Setting Up VS Code

Open VS Code and navigate to the project folder.

Step 4: Starting the Dev Server

npx expo start

This will give you a QR code in the terminal that you can scan with your phone.

Step 5: Running on My Phone

1. Install Expo Go on your phone
2. Scan the QR code (camera on iOS, Expo Go app on Android)
3. Watch your app load up!

Step 6: Making My First Change

Go to app > (tabs) > index.js and replace everything with this code:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Let's gooooo, this is my first React Native app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffa07a',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 22,
    fontWeight: 'bold',
  },
});

The app will automatically update when you save - this is called hot reloading.

Issues I Ran Into (And How I Fixed Them)

The main issue I ran into was getting the QR code to work on my phone and actually load the app. Here are some things to check:

• Make sure your phone and computer are on the same WiFi
• If the app freezes, shake your phone to see the dev menu and look for the error
• This one ended up solving my issue: Check out my troubleshooting guide
• The Expo docs are always a great resource

Key Concepts

• Components: These are like LEGO pieces for your app
• Props: How we pass data between components
• State: How we keep track of changing data
• StyleSheet: CSS-like styling that actually makes sense

Next Steps

Next, I'm diving into navigation, state management with Redux, and playing with native device features. Stay tuned for more posts about my React Native journey!