Photo by Lautaro Andreani on Unsplash

React-Native Basics

In this article, we will be diving into the basics and advanced concepts of React Native. We will be learning what React Native is, how it is different from react.js, and how it is working internally. Although, there is one obvious prerequisite to reading this article, and that is, React. One must know how React works or have some basic knowledge of it.

What is React Native?

With the help of ReactJS and React Native we can build Native mobile apps for Android and iOS. These apps can be deployed to PlayStore and AppStore respectively.

React is a JS library that is used for building user interfaces. Actually, React is used with react-dom to build interfaces for web development. So, React in itself is just a library that is platform-independent, and will need the support of libraries such as react-dom for the web support it provides.

React JS

React Native, on other hand, is like react-dom. It gives React the connection to specific platforms. It provides built-in react components, handles compilation of these components with the native UI elements, and also provides APIs which are exposed to JS (for eg- accessing the camera).

React Native

Thus, in order to work with React Native, one must have some basic knowledge of the react.js library.

React Native Working

Code in react native is similar to what we have in react. In the below code, we are defining a functional component that is used for rendering <View> and <Text> components (given by react-native)

const App = () => {
  return (
    <View>
      <Text> Hello, World! </Text>
    </View>
  );
};

The above snippet should look familiar to you, although there are some components(<View> and <Text>) that you might have never seen, as they are provided to us by the react-native library. React Native compiles and maps reusable components to respective platform equivalents.

This snippet will get bundled up to provide a real native mobile app. The compilation of components and JSX code is done by react native, not the JS logic. By JS logic, we mean any of the pre/post-processing that we might be doing in this component.

Components Compilation

So, where will JS logic be running? The answer to this is, in the JS thread that is run by the respective platform app, and that is not compiled by react-native.

JS Logic

Conclusion:

We have learned about react-native and how is it different from react.js, although now we know that the comparison between react and react-native is not the one we should be doing. We should compare react-dom and react-native, as they provide support to react.js

I hope you have enjoyed the article. Your valuable suggestions are always welcome. Also, will try to bring more articles at regular intervals on react-native in the coming future.
Happy Learning!!!