keshav Sandhu

Posted on Sep 17

From React to React Native – A Beginner-Friendly Guide🚀

If you’ve been working with React and want to venture into mobile app development with React Native, you’re in for an exciting journey! React Native allows you to build real, natively-rendered mobile apps for iOS and Android using the same React framework you already know and love. This guide will walk you through the basic setup, highlight important concepts for mobile development, and outline steps to deploy your app.

1. Basic Setup

Before you can dive into React Native development, there are a few steps to set up your development environment. React Native uses JavaScript, but you’ll also need some platform-specific tools for building iOS and Android apps.

Step-by-Step Setup:

Install Node.js and Watchman: Ensure that you have the latest version of Node.js installed, as well as Watchman, which is a tool used for watching file changes.
Install React Native CLI: While there are two ways to set up a React Native project (React Native CLI or Expo), we’ll focus on the CLI method here. Install the CLI globally by running:

  npm install -g react-native-cli

Set Up Android Studio and Xcode: To develop for Android, you need Android Studio installed. For iOS development, Xcode is required (macOS only).
Create a New React Native Project:

  npx react-native init MyNewApp
  cd MyNewApp

Run Your App:

For iOS:

npx react-native run-ios

For Android:

npx react-native run-android

Now, you’re ready to start building your first React Native app!

2. Simple Concepts Beyond React

Even though React Native shares many similarities with React, building mobile apps introduces new challenges. Here are a few key concepts to grasp for a smooth transition:

1. Native Components

In React Native, HTML elements like <div> or <span> don’t exist. Instead, you use components like <View>, <Text>, <Image>, etc., which are native to mobile apps. Understanding these core components is crucial for designing mobile interfaces.

2. Styling

React Native uses StyleSheet for styling components, which is very similar to CSS but with a few key differences. You’ll be working with Flexbox for layout, and each component’s style is applied via a JavaScript object:

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

3. Navigation

Unlike React apps that rely on React Router for navigation, React Native uses libraries like React Navigation. You'll need to understand how stack navigation, tab navigation, and drawer navigation work in a mobile context.

4. Platform-Specific Code

React Native allows you to write platform-specific code for Android and iOS by using file extensions like .ios.js and .android.js. This lets you create different experiences on different platforms when needed.

5. App Permissions

Unlike web apps, mobile apps often require permissions (e.g., accessing the camera, location, or storage). You'll need to handle these permissions properly, which requires understanding both React Native APIs and platform-specific guidelines.

3. Deployment Steps

After building your app, the next challenge is getting it into the hands of users. Deployment involves publishing your app to the App Store (iOS) or Google Play Store (Android). Here’s a brief overview of the process:

For Android:

Generate a Signed APK:
- You’ll need to create a keystore file and configure your project to use it. Generate the APK using the command:
```
 cd android && ./gradlew assembleRelease
```
Test the APK on a Physical Device: Always test your release APK on a real Android device to catch any potential issues.
Publish to Google Play Store:
- Create a developer account in the Google Play Console and upload the APK. Follow the instructions to fill in app details, pricing, and content rating.

For iOS:

Prepare Your App for Release:
- Configure your app’s build settings in Xcode, including setting the version number and build number.
Create an Apple Developer Account: You'll need an Apple Developer account to distribute iOS apps.
Test on a Physical Device: Before submitting, always test your app on a real iOS device to make sure everything works smoothly.
Submit to the App Store: Use Xcode to archive your app and submit it to the App Store Connect.

Final Thoughts

Transitioning from React to React Native might seem daunting at first, but once you’ve grasped the key differences and the new concepts specific to mobile app development, the process becomes much smoother. React Native’s component-based architecture and familiar React paradigms will help you hit the ground running, while tools like React Navigation and Expo can further streamline your development workflow.

Happy coding and enjoy building your first React Native app! 🚀

Useful Resources:

React Native Docs
React Navigation Docs
Expo Documentation (for easier development)

DEV Community