image
author

Thomas Wilfred

Front-end Mobile Engineer


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.


How useful was this post?

How useful was this post?

Click on a star to rate it!

Average rating 2.7 / 5. Vote count: 3

No votes so far! Be the first to rate this post.

Please do Rate Us and Share!

Related Blogs

  • author
    Adam Davidson

    Best Android Emulator for PC

    Android emulator for PC or MACs is one of the best for gamers to focus and improve their gaming skills.There are many reasons for emulating Android on your Windows PC, because with the help of emulation it is much easier to test apps on-screen or desktop than a mobile device. Android developers can debug...

  • author
    Adam Davidson

    Companies that Use Node JS in Production

    Despite of being arrived late on the scene, NodeJS is dominating the entire application development scenario with its great optimal features. This is a well-kept secret for the seamless distribution of their services that some of the top companies that use NodeJS for its web-based applications today. From concurrence to being a lightweight runtime,...

  • author
    Lucas White

    How to Use callBack With setState in React

    Today we are going to explore the callback function in setState and get to know about how we can use it.  First of all, I’d like to explain the ‘callBack’ and ‘setState’. callBack functions is a function that is passed as an argument to another function, to be “called back” at a later time....

image

About The Author

Thomas is a front-end Mobile Engineer with experience working for startups and multinationals across the world. As a certified Scrum Master, Thomas has worked with a team of 10 engineers located in three different countries for eBay.

Recents

Nicolas says:

[…] is the most easier platform to build a website as well as one more programming language which is React-Native-Web, but this language is not used by everyone as people know less about it and this language is also […]

Try our One-Week Risk Free Trial for Hiring a Coder

Know more Hire a Coder