React Native Web: Write Once Render Anywhere

Vaibhav Singh

19 Nov 2018

React since its inception has gained popularity amongst developers and has completely changed the way web applications were developed. React has gained a vast majority of its fame because of Virtual DOM. Virtual DOM is not something restricted to React World, but other UI frameworks also have been built around the concept of the Virtual DOM-like, Vue.JS. The main reason of React’s immense popularity is because it was developed by Facebook.

 

After leaving its mark on the web world, Facebook launched React native to conquer over the ever-growing mobile world. With React Native into the picture, we can develop mobile apps using Javascript which builds native applications which can easily run on Android as well as iOS.

But the write-once runs anywhere philosophy of React Native is restricted to the mobile world only.

 

Enter the picture… React Native Web (Link: https://github.com/necolas/react-native-web)

 

React Native Web turns your react native mobile application into a web application without even writing a single line of code and it is pretty simple and straightforward to do it.

 

yarn install react react-dom react-native-web

create-react-native-app my-app --with-web-support
AppRegistry.runApplication('App', { rootTag: document.getElementById('root') });
import React from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.box}>
        <Text style={styles.text}>Hello, world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: { padding: 10 },
  text: { fontWeight: 'bold' }
});

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

class App extends React.Component {
  render() {
    return (
      <View style={styles.box}>
        <Text style={styles.text}>Hello, world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: { padding: 10 },
  text: { fontWeight: 'bold' }
});

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

If you would have noticed only adding a single line of code has converted your mobile application to a web application, and you only have to “Write once and render everywhere (Mobile + Web)”.

 

React native web is still not mature and lacks support to a lot of native libraries but it is really super cool convert your mobile application to the web without even writing any code.

In case it interests you check out the following links:

 


Have a question?

Need Technology advice?

Connect

+1 669 253 9011

contact@hashedin.com

facebook twitter linkedIn youtube