Do you know React.js and want to learn React Native or need some Kickstart Introduction of React Native? Then this is where this blog comes in to get you some hands on info on React.js to React Native
Before we start, let’s have a 2 line introduction of React Native.
If you are familiar with React.js, or come from kind of front end development background, you may have heard that React.js uses a virtual DOM which acts as a shadow to real DOM available but let me tell you one thing clearly, React Native uses no such DOMzz rather than Native Components which are provided by iOS and Android, this also means NO WEB VIEWS IN REACT NATIVE!
React Native also uses
React Native has its own wrappers around the native components and do not make use of every HTML element. For example,
<View> which is considered similar to
<div> of HTML. This also means that you cannot reuse every library that renders HTML and is available for React.js. It has its own navigation modules.
So, forget all your reusable wrappers which you have written on React.js 🙁
THAT’S ALL YOU NEED FOR AN INTRODUCTION…
1. Node.js >= 4.0
2. Some Native SDKs for specific platforms of course…
iOS (install Xcode, most probably pre installed) & Android (Instructions herefor Android)
3. What else left? Duh, react-cli
npm install -g react-native-cli
If you want to quickly prototype an application and you can use Create React Native App module that is very similar to Create React App. For Create React Native App you are not required to install above dependencies (of course you need Node.js for
npm modules) and platform specific SDKs. Facebook itself recommends using Expo client on your phone to see the app in action.
So on your cli;
react-native init HelloWorld
When you are done looking the architecture/hierarchy of the app, you will notice something. There is no react-dom imported throughout the code,remember… because there is no DOM in React Native.
AppRegistery is the entry point to run a React Native application. App component or any other root component in the app should register by using AppRegistry.registerComponent such that a native system can load the bundle of the app and run the app by starting AppRegistry.runApplication.
1. Since there is no DOM, we won’t have
className. So, for e.g. in order to style your
<View> or any native component, we use
style object passed as props.
2. How does React Native renders, please look into this Stack Overflow Answer
3. React Native Bridge concept can be learned by this awesome link
That’s all! You can now jump to the official documentation of React Native.