What Do I Need To Know About React Native Coming From React JS?

#react #reactnative #javascript #webdev

This post is for the people who are interested in React Native because they have experience with React JS. People who know that being able to develop for mobile and web helps their job prospects but who also want to know how easy it's going to be before they sink in too much time wading through the documentation (which is actually really good, you should check it out).

Getting Started

Getting React Native set up is incredibly easy, so definitely don't let that stop you. In less than five minutes you can be building out an app that you can see displayed on your own phone.

We'll be using Expo CLI to get rolling quickly (more on the differences between the two here and the limitations of using Expo here). As long as you're on Node 12+, you can install using npm, and create a new project.

npm install -g expo-cli

expo init MyFirstProject
cd MyFirstProject
npm start

For your most basic setup, that's really it. You're ready at this point to start developing your app (after you read the rest of this post so you know the basic differences between React JS and React Native).

Display Options

Running npm start (or expo start) works just like with React JS, except the browser window that opens gives you some options for how to render your project.

You'll see these menu options

As well as a QR code

Quickest but least fun option: Run in web browser
This is exactly the same as React JS. A new tab will open and display the welcome message from App.js or whatever you choose to render. Saving automatically updates the code in the browser.
Still pretty quick, definitely really fun option: QR code
If you download the Expo Go app on your mobile device, you can use the QR code scanner in the app (as long as the two devices are on the same network) to display your project on your phone. Once you've scanned it, the app will remember that project so you can go back to it in the future. Honestly, this is my favorite option
Slower setup but probably most practical option: iOS/Android Simulator
The novelty of having it on your own phone is really cool, but for long-term development, looking down at your phone just isn't as efficient as having a simulator/emulator up on the screen right next to your code. To make that happen though you'll need Xcode and Android Studio, which can take a significant amount of time to install and configure for the first time.

Pick the option that's right for your goals, and let's get to the important bit: Is this just React JS with a couple new twists, or do I have to learn a whole new syntax?

What's Different In React Native?

This is by no means a complete list, but the following are four big differences from React JS that we need to address to get comfortable quickly in React Native. Once you're starting to branch out from the basics, if you need something, there's probably a component for it here.

No HTML syntax

This is how a basic Welcome component might look in React JS

function Welcome(){
  return(
    <div>
      <h1>Welcome to my React App!</h1>
      <h3>Log in below</h4>
      <UserLoginForm />
    </div>
  )
}

Now, I know that everything here that looks like HTML is actually JSX, but the point is that this JSX is trying really hard to match the syntax of HTML. React Native still uses JSX, but none of the HTML-like components are permitted.

This makes sense since we're no longer developing for the web, but it can still be a bit of an adjustment. To recreate the above function in React Native, we'll have to use some of its core components.

Note: All of the following components need to be imported by name in order to be used. Don't forget your imports!

Div Becomes View / ScrollView

The simple React Native equivalent for a <div> tag is a <View> component. They behave almost exactly the same (in terms of nesting, styling, etc.), and for our example, switching out the <div> is pretty quick and painless.

import {View} from 'react-native'

function Welcome(){
  return(
    <View>
      <h1>Welcome to my React App!</h1>
      <h3>Log in below</h4>
      <UserLoginForm />
    </View>
  )
}

One distinction here is that Views are not scrollable, so if we wanted all, or part, of this Welcome component to be scrollable, we would have to wrap that part of the component in a <ScrollView> or replace the <View> altogether.

Note: ScrollViews must have a bounded height to function properly. More on that here

The Text Component

We've fixed our <div> error, now what do we do about these <h1> and <h3> tags? Enter <Text>: the simple solution to basically everything text in React Native. The closest straight comparison for <Text> would be a <p> tag.

import {View, Text} from 'react-native'

function Welcome(){
  return(
    <View>
      <Text>Welcome to my React App!</Text>
      <Text>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

No more errors! At least, no errors assuming I have a UserLoginForm component written elsewhere and properly imported/exported. But you've probably noticed a small problem. In our original Welcome, we had two different header sizes, but now we just have two identical text components. That's because there is no separate header text component in React Native. We have to add one little extra step and style them ourselves.

The StyleSheet Component

Just like there's no HTML in React Native, there's also no CSS. But don't worry, the StyleSheet component is so similar you'll hardly even notice the difference. Inline styles are still an option:

import {View, Text} from 'react-native'

function Welcome(){
  return(
    <View>
      <Text style={{fontSize: 40}}>Welcome to my React App!</Text>
      <Text style={{fontSize: 20}}>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

But the most common way you'll see styling is by creating an object under the constant styles with keys for the appropriate elements.

import {View, Text, StyleSheet} from 'react-native' // NEW IMPORT

const styles = StyleSheet.create({
  title: {
    fontSize: 40
  },
  subTitle: {
    fontSize: 20
  }
})

function Welcome(){
  return(
    <View>
      <Text style={styles.title}>Welcome to my React App!</Text>
      <Text style={styles.subTitle}>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

So there we go, we've fixed all of our errors and matched the same code we started with in React JS (although the font size numbers may not precisely match an <h1> and an <h3>). The docs do a great job with explaining more about styling, so I won't go deeper into that here.

Note: One easy-to-overlook difference in React Native is that there are no units (such as 'px') on the stylesheet numbers.

What's The Same In React Native?

The short answer: a lot! Obviously there are different challenges that arise and need to be addressed building native applications, especially as the projects get more complex, but the good news is that the fundamentals are the same.

I won't go through and list every single thing that's the same (the differences tend to be a lot more significant anyways), but there are a couple fundamental things I think React JS developers will be relieved to discover they already know how to do in React Native without even trying.

Building out components has to be the biggest, because components are the heart of React and significant changes to how they're structured or used in React Native would be a big pain. Not that anyone was expecting a major difference here (they're obviously made by the same people and made to work together), but that's the kind of thing that makes deciding to learn a lot less intimidating.

Can I still build class components? Yes.
Functional components? Yes.
Local state and props? Exactly the same.
Hooks? Of course.
Event handling? Slightly different syntax but works the same.
Fetch requests? The same.
What if I want to use Async/Await? Feel free!

You get the point. You already know way more React Native than you thought you did!

There are a ton of great tutorials out there if you don't have a specific idea for a project to try things out, so if you're coming from a React JS background and thinking about React Native, there's no reason not to give it a shot. The setup is super easy, and it's a lot of fun even just to play around with.