DEV Community

loading...

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

ishakmohmed profile image Mohmed Ishak Updated on ・2 min read

Alt Text

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
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
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",
  }
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
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.

Discussion (4)

Collapse
koolkishan profile image
Kishan Sheth

Your Article was great.

Follow my YouTube Channel for amazing Web Development Tutorials.
youtube.com/channel/UCDT8sIFy3pW8L...

Collapse
ishakmohmed profile image
Mohmed Ishak Author

Sure, thanks man. 😄

Collapse
ibnabbas1429 profile image
Aminu Ismail

Your article is great.

Collapse
ishakmohmed profile image
Mohmed Ishak Author

Thank you so much.

Forem Open with the Forem app