Intro
React and React Native are two open-sourced technologies for building user interfaces. They both were developed by Facebook and gained great recognition among frontend developers for their opportunities to create interactive UIs. In the article, we describe these two technologies and explain their differences.
React or ReactJS is a JavaScript library that is used for building user interfaces especially for the web. React uses declarativeprogramming, that allows developers to design a simple view for every state and then delegate the responsibility of keeping the app views consistent while you have to worry only about the state.
React is a component-based library which means that you can build several reusable components and then use them for building the complex UI of the app, while React takes care of the rendering of UI components. Applications built with React can change data in separate parts of the page without a full page reload. It provides support for both the frontend and server-side.
React Native is a framework for building native cross-platform applications for Android and IOS using React. React Native compiles native code that allows you to create truly native mobile apps with natural user experience for Android and IOS.
**Developing with ReactJS is no way like developing mobile apps with React Native, and they serve different purposes. **React Native is used for building **native mobile applications, **while ReactJS is for building interactive web pages for the web.
React Native was customized to build desktop apps for Mac and Windows (see GitHub repository for macOS and windows), but first of all, that framework was designed to power mobile apps development.
Some facts about ReactJS:
Ranked 2nd and 1st on StackOverflow Developer Survey Results in 2020 in the categories Most Loved and Most Wanted Web Frameworks respectively.
Ranked 2st as the most popular Web Framework among professional developers in 2020.
From 2016 till 2019 (the latest survey) ReactJS Ranked 1st on Awareness, interest, and satisfaction ratio rankings.
In 2020, React has 157 k stars on GitHub, making it the #2 most popular JavaScript project after the Vue library.
There are about 1 004 379 websites using React all around the world.
60 608 developers on StackShare have stated that they use React In 2020.
About 9 000 companies reported that they use React in their Tech Stack, including Uber, Airbnb, Facebook, Netflix, Instagram, Amazon, Twitter. The median of React developer salaries in the USA is 120 000 $ per year. The most skilled developers get up to 160 000 $ per year.
Some facts about React Native:
React Native is in the 5th place on StackOverflow Survey 2020 in the category of other most popular frameworks, libraries, and tools among professional developers.
React Native goes with 90,5 k stars on GitHub.
About 1400 companies stated they use React Native in the development.
The most known mobile apps that were built using React Native are Skype (before React Native was replaced by Electron in June 2020), Facebook, Instagram, Pinterest, Bloomberg, Discord, Tesla.
13,5 k developers on StackShare noted that they use React Native in 2020.
The average salary in the USA for React Native developers is 121,875 $ a year. The most experienced developers can claim up to 200 000 $ per year.
React vs React Native – key differences
How to start and what you need
Since React is a JavaScript library, all you need to start work with it is to plug React library in the HTML page in script tag:
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
That’s all. https://reactjs.org/docs/add-react-to-a-website.html Then you can create your first React Component and add it to your HTML website.
The only other thing you need to work with big projects is a bundler. If you use for new projects instruments like a create-react-app command, Next.js, or Gatsby framework, you will already have a configured Webpack to bundle your application. Otherwise, you will need to configure a Webpack yourself.
Bundlers compile all imported files with code into one large and complex file. Besides Webpack there are other bundlers such as Rollup or Browserify.
React-Native is a framework, so you need an installed development environment like Xcode for iOS or Android Studio for Android.
Depending on your development OS you need to install additional tools like Node, the React Native command-line interface, a JDK, Watchman, etc. After that, you can start a new project just with one line in the React Native CLI. To see the created app you should either run a mobile simulator or use your own devices.
Since you install a full-fledged framework it comes with a lot of developer tools out of the box such as Hot reloading that allows you to inject new versions of the files that you edited at runtime keeping the app running. That becomes especially helpful if you are tweaking the interface.
The migration from ReactJS to React Native is not a complicated thing. If you are familiar with React and JavaScript it takes several months to get used to the React Native framework and build your first native app, it is just a different way of using React.
The base of technologies
ReactJS is just a JavaScript (and TypeScript a little), there are no additional things you need to know. Your skills in JavaScript allow you to become a good React developer in a few hours when you get acquainted with the technical documentation. React focuses on one thing: building interactive User interfaces for the web via JavaScript.
React Native is a framework that uses React.JS for building mobile user interfaces. It comes with all the advantages that React.js brought you and uses declarative components just like React.
But React Native is not a pure JavaScript framework, it also contains Java, C++, Objective-C, Objective-C++ code. That fact is essential because the diversity of used languages allows us to build native components that are in fact native. Let’s find out what it means.
#react #react-native #programming #developer
