image
React Developers 3 MINUTE

React-Native-Web: A Brief Introduction

author

Thomas Wilfred

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.
image
Reading Time: 3 minutes


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
    Kela Casey

    TabView in React Native

    Reading Time: 4 minutes React Native is a JavaScript framework that rites actual, natively rendering mobile apps for iOS and Android. It is based on React, Facebook’s JavaScript library for developing user interfaces and it is solely made for mobile devices. React Native allows you...

  • author
    Adam Davidson

    How to Monitor and Scale your Supply Chain Performance

    Reading Time: 7 minutes Supply Chain performance is a critical business method, not just a business purpose. The main trends in the business right now are low-cost country sourcing, outsourcing, customization, globalization— all of these create tremendous complexities in a supply chain. It refers to...

  • author
    Thomas Wilfred

    Bootstrap Vs Material UI | Which Is Best For Next Web App?

    Reading Time: 7 minutes Bootstrap vs Material UI has been a trending topic for a long time amongst developers. The excellent user interface has become particularly significant for companies as it aids in user engagement and brand recognition. Front-end website and app development systems, such...

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

Hire Top 1% Remote Developers, Free For The First Week

Connect with quality remote developers and code your ideas away.

X