ReactJS vs React Native

#beginners #javascript #computerscience

When I first heard of React Native, I hardly new ReactJS. I remember thinking, "there's more than one?" The person who introduced it to me jumped right in, talking about how they were using it in their project and all of the features it came with. But it left me wondering how exactly it was different from what I'd learned in ReactJS. And now that I am actually working with it for my own project, the question came up again from one of my peers. So for anyone else wondering the difference between ReactJS and React Native, I am going to attempt to address the main distinctions.

ReactJS

Let's start with a brief touch up on ReactJS. React is a component-based JavaScript library for building user interfaces. Created by Facebook, it's meant to be an easy way to build single-page applications. ReactJS was open-sourced in May of 2013, making it 7 years old! Happy Birthday, React. How "easy" you are really is in the eye of the developer, though. Anyway, this is basically what a React component looks like:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Facebook</li>
        </ul>
      </div>
    );
  }
}
export default ShoppingList;

A standard shopping list component with some HTML elements we all know and love(?).

React Native

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. "Native" meaning web developers can write directly to the device using JavaScript. Normally, in order to write an iOS application, you'd have to learn Swift or Objective C. With Android, Kotlin or Java. I don't have time to be learning a whole new language right now, so React Native can be real beneficial.

So after that, it might seem like you would just naturally transition from ReactJS to React Native to shift from being a web browser developer to a mobile developer. But in actuality, you don't need to learn ReactJS at all before jumping into React-Native. It can help, but many developers skip it entirely (depending on what they plan on working on, like mobile vs browser).

Different Characteristics

Let's take a look at the main differences:

//ReactJS
<div style={{
  height: '25px',
  width: '100px',
  display: 'flex',
  flexDirection: 'column'
}}
>
  <h1>React</h1>
  <p>
    Hello!
  </p>
</div>

//React Native
import {View, Text} from 'react-native';

<View style={{height: 25, width: 100}}>
  <Text>React Native</Text>
  <Text>
    Hello!
  </Text>
</View>

These two examples show the same thing.

With react, you can pretty much use any HTML stuff in the components. Obviously the styling object is a little different, but you can also have a CSS file to style however you’re comfortable with. But basically all HTML will also be valid React code.

With React Native, you cannot use any HTML. Instead, we use a View. So while a div is a container that you can do whatever you want with in terms of styling, a View is that in React Native.

In HTML there are many ways to put text on the screen, header or p for example, that determines default styling or lets the browser know what kind of text it is.

React Native just has Text. And you need to import both View and Text because they are not available by default. This is because React Native is platform agnostic. It doesn't know if you're developing for iOS or Android (and it doesn't care). There’s no built in styling, so you would have to style Texts to differentiate them.

The styling is different as well. There’s no need for px and % for dimensions, for the value to be in a string, or anything like that, and by default React Native uses display flex and flexDirection column since it’s for a mobile screen. (ReactJS is by default flexDirection row for web browsers)

So to wrap it up, ReactJS is mainly used when you want to build a website that will run in a browser. React Native is used when you want to build something that runs on a mobile device. Technically you could use ReactJS for mobile development and vice-versa, but, like, don't do that to yourself.

Hope this cleared up any questions you had, and if you know something that I didn't add, make sure to tell me! I'm still learning as well, and thanks for reading!