In this article, we will discuss the difference between React vs React Native, its difference, setting up/ developing react, and react-native applications on Windows.
Table of Contents
Prerequisites:
● You should have a basic knowledge of HTML, CSS, JavaScript, and little but exposure to React concepts.
● Install Visual Studio Code, Node,xampp, and npm.
What is React?
What exactly is React Native ?
It is a mobile application framework that allows the developers to build native friendly mobile applications by using React concepts. It creates a real native app that is going to compile all the User Interfaces components to native code (such as buttons and other UI elements will be the native equivalent depending on which platform they are running on.
React Native can build cross-platform applications with the help of reusable native components that helps the application to run on different platforms such as IOS, Android, and Web. React native is build on React and JavaScript. In short, it means you can utilize your knowledge of React and JavaScript for building mobile applications.
However, it is not like React as it does not provide you with libraries, built-in reusable components, or pre-styled components. In its place, they provide you with building blocks that are for composing and styling. It does give better performance but also makes the development a bit harder.
Creating React App:
npm init 
for setting up a new or existing npm package.
Step 4: Create an app by typing
npx create-react-app reactapp 
cd reactapp npm start 
Congratulations! Now your React App is created. Now you can open your react project on Visual Studio Code and make modifications in your React App by changing code in the App.js file.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
<h1>Hi! Welcome to React App ^_^</h1>
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App; 
Creating React-Native App on windows:
npm init 
Similar to how you did for creating the React app.
Step 2: Type the following:
npm install -g create-react-native-app create-react-native-app reactnativeapp For creating the React-Native App, then code the command written below to open the folder:
cd reactnativeapp npm install --global expo-cli npm expo install To set-up a new or existing expo package inside the reactvativeapp folder, you will have to use the command mentioned below:
expo init reactnativeapp 
It will ask you to choose a template. Press enter to leave it blank.
Step 4: Lastly, type the following command for executing your React-Native App.
expo start 
Executing your React Native App:
Step 1: Open App Store or Play Store anything depending on your device and search for expo client App.
Android:
IPhone:
Now you can make changes in your newly created App (running on IOS or Android devices) by opening the React-Native-App folder on Visual Studio Code and modifying code in the App.js file.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hi! Welcome to React-Native App ^_^</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
}); 
React vs React Native:
differences:
React
React-Native
It is used for creating Web apps or websites that are going to run in the browser.
You have to import tags like View and Text etc. as we don’t know where React Native is going to run. As it can be executed in a variety of platforms so these tags are platform-agnostic that’s why it has its own tags.
CSS property display is set to flex by default and flex-direction is by default set to the column.
It uses Custom components.
React uses virtual DOM which leads to faster building and enhanced performance, due to its partial refreshing.
similarities
However, you can make a progressive web app using React, can run it on mobile. You can also make a website on react-native. So, that is an overlap there.
Logic and state management are the same in both React and React Native. Therefore, it means if you know how to use state, hooks, context API, Redux, props, render props, higher-order components in React. It will behave the same in React Native.
As React concepts are used so react or react-native are interchangeable.
