React-Native-Web: A Brief Introduction


You have read about the React for the app, here in this article we read about React Native for the web.
In this article, we mention how to create 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 starts a new react native project to build your website.


What is REACT NATIVE WEB?


React native web is one of the best website developing a library for UI developers build 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 it’s components and APIs on the web by using React DOM.

There are two qualities of React Native Web :

High-quality web interfaces:

It is the 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 integrates 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 to 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 that how to work or we can say create a web in react native web. Take note and don’t confuse about react and react native, unfortunately, React and React native both are built on a different set of primitives. In other words, React build for mobile applications whereas the React native build for web development. React native uses <View>, <Text> as well as <TextInput>.

To start the project in React Native (look Fig.1)

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 run 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 --save
npm i webpack-dev-server --save-dev

Moreover, here what you package file look 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 configuring 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 a 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 the

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

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


1 thought on “React-Native-Web: A Brief Introduction”

  1. Pingback: Nicolas

Leave a Comment

Your email address will not be published. Required fields are marked *