Ready to build mobile apps for iOS and Android without learning two different codebases? React Native lets you do just that. This guide will walk you through the initial setup, from creating your first project to previewing it on your phone, setting you up for success in your cross-platform development journey.
textWhat is React Native?
React Native is a cross-platform framework that lets us build applications for iOS, Android, and even the web using just a single codebase. That means we don't need to switch between different languages and tools to target different devices. Instead, we can just write everything in JavaScript or TypeScript alongside React, using components, states, and hooks.
However, instead of using regular HTML like div tags, headings, and anchor tags, we use native components like View, Text, and Image. React Native translates those components into real native elements for iOS and Android.
We can even style React Native apps using Stylesheet objects, which is very similar to using regular CSS. This allows us to write apps for multiple platforms with a single language, a single codebase, and a familiar developer experience for React developers.
Getting Started: Prerequisites
Before we begin, it's beneficial to have some basic knowledge of React for the web, as that knowledge will carry over. You will also need Node.js installed on your computer. If you don't have it, head to nodejs.org to download and install the current version.
Creating a New React Native Project with Expo
The recommended way to create a new React Native app is by using Expo, a framework built on top of React Native that provides extra tooling and features. To create a new project with a blank template, run the following command in your terminal:
npx create-expo-app@latest --template blank ./
This scaffolds a completely blank React Native project with no additional boilerplate code, giving us a clean slate to build upon.
Previewing Your App on a Device
The easiest way to preview your app is to use Expo Go. First, install the Expo Go app on your iOS or Android device by scanning the QR code on the Expo website.
To start your development server and generate a QR code, run:
npx expo start
Scan the QR code with your device's camera to open the project in the Expo Go app. You'll get live reloading, meaning any changes you save will instantly appear on your device.
Setting Up Expo Router
For navigation, we use the Expo Router. Install it with the following command:
npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
Next, update the package.json file to change the main entry point:
"main": "expo-router/entry"
Then, add a scheme to your app.json file to enable deep linking:
"scheme": "myapp"
Delete the default App.js and index.js files. Create an app directory in the root of your project and add an index.jsx file inside it. This file will be your new homepage component.
Preparing a Backend with AppWrite
For features like authentication and a database, we'll use AppWrite, a backend-as-a-service platform. Sign up for a free account at appwrite.io.
Create a new organization and project within your AppWrite console. This gives you a ready-to-use backend project that we can connect to our app later in the course.
Next Steps
Now that your development environment is set up, you're ready to start building! In the next lesson, we'll dive into the code and start working with basic native components and styles.
Comments
Post a Comment