Let's Get You Started With React Native (If You're A React Developer)!

#reactnative #react #mobile #webdev

I know that you know React. I know that you don't know React Native. In this post, let's get you started with React Native.

What's React Native?

A cross-platform (native*) mobile development JavaScript framework made on top of React, so it resembles React in a lot of ways.

But I wanna learn Flutter/Native development using Java/Kotlin/Swift...

Cool. Why don't you just try making a "Hello, world!" app by following the rest of the post.

Disclaimer: I'll teach you how to make a React Native app using Expo CLI (in my opinion a great productivity tool, but has it's fair share of haters too).

Step 1:

Install Expo globally.

npm i -g expo-cli

Step 2:

Download Expo Go in your phone to view the app (it has hot reloading too).
App Store: https://apps.apple.com/us/app/expo-go/id982107779
Play Store: https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en&gl=US

Step 3:

Initialize a new project.

expo init myproject

Step 4:

Choose a workflow. I recommend managed workflow (blank) for starters. With this workflow, you'll have pure JavaScript project without the underlying Android and iOS codes, so your experience will be similar to building React apps on web.

Step 5:

Type this in App.js.

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

export default function App() {
  return (
    <View>
      <Text style={styles.myStyle}>Hello, world! The sky is blue.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  myStyle: {
     fontWeight: "bold",
  }
});

Explanation: In React Native, there are no divs or heading tags. Instead we've got React Native components such as Text and View (equivalent to div in React). As for the styles, we need to import StyleSheet and define our CSS styles there, just like how we'd do it in React. In CSS, you'd write font-weight (kebab case) and in React/React Native, the equivalent is fontWeight (camel case). I assume you know this already.

Step 6:

Run the project.

npm start

Step 7:

Expo Developer Tools will be launched on your browser. From your Expo Go app in your phone, scan the provided QR code. Make sure your phone and computer are on the same network.

Done!

As you can see, React Native is very similar to React. Of course, when it comes to cross-platform mobile app development, there are so much of arguments. Some of them include "Flutter Vs. React Native", "Is Cross-Platform Mobile Dev Worth It", and so on. My advice to you is that if you know React already, it wouldn't hurt to learn React Native too. If anything, you can totally forget React Native and move on with your programming journey.