React Native is a Javascript framework that's used to develop native apps for both mobile platforms(popular these days) - iOS and Android. React Native has everything similar to ReactJS, the difference being that instead of using web components, React Native uses native components of mobile OS as building blocks. React native uses JSX syntax for building blocks that are a mixture of Javascript and XML markup. It also has an exposed Javascript interface, so we can also access all the features of any platform like a Phone camera, location, storage, etc.
So we can use React Native to build production-ready native mobile applications that have all the features and some big companies like Facebook, Instagram, TaskRabbit, etc. are already using React native in their mobile apps.
Who developed React-Native?
React native is developed by Facebook for creating a native style for apps. In the initial phase, it was only developed to support the iOS platform. But in a recent update, Android support was also added. So now we can develop mobile UI for both platforms using React Native.
Advantages of React native
-
Other frameworks of Javascript that were earlier used to build mobile applications using JS, HTML, and CSS used to render all the components in web views, but using web views affects the performance of UI, hence most of these frameworks outdated with time. But with react native, all the markup and Javascript is translated into real native UI elements. So the performance of UI never goes down.
-
React also works separately from the main UI thread. And whenever the props and state change, react-native updates all the views automatically. And all this can be done using the core UI libraries of the React platform. So it's totally free from HTML and CSS markup.
-
The main advantage is realized when we develop an application with react native. How easy it is to use and understand, because of its strong developer tools that come with less error and meaningful messages, is a great advantage.
-
Apart from that react native is just a combination of Javascript and XML so changing the code is also easy. Just like we make changes in our HTML page and save it, we can do it in React native too.
-
It's also platform-independent. So whatever browser and tool you know or are familiar with, you can use it with React native. For example, Chrome, Safari, or Xcode, Android studio, etc.
Disadvantages of React Native
-
The only risk or disadvantage is that in the terms of maturity, React native is still relatively new. Support for it was released in 2015 and the documentation needs slight improvements.
-
Some features of Android and iOS are still not supported in it and react native also uses its own layer so it's a little bit hard to debug the code in between react and host platform.
How React Native works
React native uses JSX, components, state, and props for creating basic building blocks for any application. So we need to understand these things in order to understand react native.
1. JSX
It is a syntax for embedding XML within Javascript. JSX let us write markup code inside our Javascript code.
2. Components
The component is a thing or building blocks that we use to add new features inside our code, like adding a new button, etc.
3. props
We use props to customize our components and this feature makes a single component to be reused in different places in our app or project. But props cannot change over time because they are read-only. And we can pass the props as a variable from their parent component to a child component.
4. State
The state allows a react component to change its output over time in response to a user action. Like we click on a button and its value is incremented by one. The states are the variables that cannot be passed as parameters but rather, components initialize and manages internally.
So this was the basic introduction to React native, in our next article we will cover some more basics of react native with examples.
