Introduction to React Native
Hi, guys!!! Welcome to my first article series, React Native for beginners. I hope this will be helpful for the React Native beginners.
Let’s talk about the introduction of the react Native.
What is React Native?
React is a JavaScript framework/library maintain by Facebook for creating user interfaces. React is agnostic. React-DOM uses for web development (web app).
React native is a library that compiles react components into native components/widgets. It allows us to build mobile apps only using JavaScript.
React Native allows us to create both native android and iOS applications using React. IOS and Android applications are separate apps. Components used to create iOS apps are not equaling to the components used to create Android apps.
With React Native, we can build apps for both iOS and Android platforms by creating one codebase. Because React Native components are re-usable to their respective platform equivalent. So that saves lots of time. This is the one main benefit of the usage of React Native to build mobile applications.
Difference between React Native and web
React Native relies on React core. But React web and React Native has some differences from each other.
· Base components — React Native components are specific for mobile platforms. They do not exist in web.
· Style — The way that we use to style elements in React Native is slightly different
· React Native hasn’t browser API — SVG, Canvas, CSS Animation, etc. In React Native there are some methods or functions for some browser APIs. (Ex: fetch, timers, console, etc.)
How does React Native works
In React Native JavaScript is bundled.
There are separate threads for UI, layout, and JavaScript. Those threads are communicating asynchronously through a “bridge”.
JavaScript thread will request UI elements to be shown and then UI thread will show that elements. JavaScript thread can be blocked. While JavaScript thread blocked UI will still work.
This bridge here is asynchronous. So if something happens on JavaScript and the JavaScript is clogged and blocking, the UI thread can still do its thing.
Also when you touch something on the UI JavaScript doesn’t know until the bridge says that. UI thread can talk to the JavaScript thread like “Hey, this button was pressed.” In that way those threads communicate each other and provide interactive app.
React Native components
The scope of the React Native components is not globally like React web components.
Import from ‘react-native’
Components are different from React web components.
div → View
span → Text
button →Button
ScrollView (not exists in react web)
There are many more other components.
For exploring more about React Native you can refer the React Native Documentation.
In my next article, let’s talk about expo CLI and React Native CLI.
Thank you for reading. I hope you learnt something about React Native. Hope to see you with the next article in near future.
Happy coding…!!!
