React-Native-Web: A Brief Introduction

You have read about React for the app, here in this article we read about React Native for the web.
In this article, we mention how to create a React-Native website using React native web. As well as in this article you find the basic concept of react native web and how it works, and also how to start a new react native project to build your website.

What is React Native Web?

React native web is one of the best websites developing a library for UI developers built by Facebook, which is also used to run an application on phones or browsers just using a single codebase.
React Native for Web make all the possibility to run its components and APIs on the web by using React DOM.

There are two qualities of React Native Web :

High-quality web interfaces:

It is fast and easy to create and work in it as well as it’s an adaptive web UIs in JavaScript. Although it provides native quality interaction as well as supports multiple input modes, also optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, as well as integration with React Dev Tools.

Write once, render anywhere:

In react native, you can easily develop or create new components for native and web without rewriting the existing code.
Meanwhile, it can also render HTML as well as critical CSS on the server.

To create React Native for Web
in React Native Web.

How it works:

Let’s start with our very first step on how to work or we can say create a web in react native web. Take note and don’t confuse react and react native, unfortunately, React and React native both are built on different sets of primitives. In other words, React build for mobile applications whereas React native is built for web development. React native uses <View>, <Text> as well as <TextInput>.

To start the project in React Native

react-native init ReactNativeWeb

You have to put the name of the problem, and here the project name is ReactNativeWeb. If everything is correct then your iOS or Android simulator as well as the device.

Next, Let’s move to the next step called Managing Dependencies.

npm i react react-dom react-native-web --save

Before running your app in a web browser as well as below you see, your project.

Move to next,

{
	"name": "ReactNativeWeb",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start"
	},
	"dependencies": {
		"react": "15.1.0",
		"react-dom": "15.1.0",
		"react-native": "0.28.0",
		"react-native-web": "0.0.25"
	}
}

Here are two installation commands to run your web.

npm i webpack babel-loader babel-preset-react babel-preset-es2015 --savenpm i webpack-dev-server --save-dev

Moreover, here is what your package file looks like see below.

{
	"name": "ReactNativeWeb",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start"
	},
	"dependencies": {
		"babel-loader": "6.2.4",
		"babel-preset-es2015": "6.9.0",
		"babel-preset-react": "6.5.0",
		"react": "15.1.0",
		"react-dom": "15.1.0",
		"react-native": "0.28.0",
		"react-native-web": "0.0.25",
		"webpack": "1.13.1"
	},
	"devDependencies": {
		"webpack-dev-server": "1.14.1"
	}
}

To configure the web as well as to check your program:

const webpack = require('webpack');

module.exports = {
	entry: {
		main: './index.web.js',
	},
	module: {
		loaders: [{
			test: /\.js?$/,
			exclude: /node_modules/,
			loader: 'babel',
			query: {
				presets: ['es2015', 'react'],
			},
		}, ],
	},
	resolve: {
		alias: {
			'react-native': 'react-native-web',
		},
	},
};

However, here is an INDEX.HTML,

<!DOCTYPE html>
<html>
<head>
  <title>React Native Web</title>
  <meta charSet="utf-8" />
  <meta content="initial-scale=1,width=device-width" name="viewport" />
</head>
<body>
  <div id="react-app"></div>
  <script type="text/javascript" src="/bundle.js"></script>
</body>
</html>

INDEX.WEB.JS

import React, {
	Component
} from 'react';
import {
	AppRegistry,
	StyleSheet,
	Text,
	View
} from 'react-native';

class ReactNativeWeb extends Component {
	render() {
		return ( <
			View style = {
				styles.container
			} >
			<
			Text style = {
				styles.welcome
			} >
			Welcome to React Native!
			<
			/Text> <
			Text style = {
				styles.instructions
			} >
			To get started, edit index.web.js <
			/Text> <
			Text style = {
				styles.instructions
			} >
			Press Cmd + R to reload <
			/Text> <
			/View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF',
	},
	welcome: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
	},
	instructions: {
		textAlign: 'center',
		color: '#333333',
		marginBottom: 5,
	},
});

AppRegistry.registerComponent('ReactNativeWeb', () => ReactNativeWeb);
AppRegistry.runApplication('ReactNativeWeb', {
	rootTag: document.getElementById('react-app')
});

After this run and webpack open in your browser. And you get this:

./node_modules/.bin/webpack-dev-server –inline

This is how you work with React-Native-Web.

FAQ

Q1. What is the difference between ReactJS & React Native?

Ans- React is a JavaScript library of reusable components designed to create skeletons of the apps, whereas React Native is designed to build native mobile apps with reusable components.

Q2. Does React Native use HTML?

Ans- React is a JavaScript library that enables developers to create user interface components. Traditional web pages use HTML and CSS to build the UI, but with React, the UI is built purely using JavaScript.

Q3. Is React Native hard to learn?

Ans- It's pretty clear that React Native has a tremendously huge community, and it's among the most trending technologies. If you already know JavaScript or React JS, React Native fits you, and I recommend you to use React Native on your mobile app. Otherwise, React Native is still easy to learn and very useful.