React-Native-Web vs ReactJS

user_601862 0
Viewed 8251

Just happened to see React-Native-Web(RNW) , my thought was what? Why do we need another React for Web version? We have already had ReactJS(RJS).

So I went to its website and saw the document saying it allows you to use Native component by using React DOM, high quality etc.

I am still not quite clear about the differences and benefits of using RNW.

Could someone enlighten me with some concrete examples and performance data etc. please?

I know Twitter and a few other apps are using it, but by just telling me "Twitter is using it" is good enough but not clear enough to state the differences.

react-native-web react-native reactjs
3 Answers

To be honest the reasoning for using react-native-web are somewhat aesthetic, take this for example:

React Native is a pure UI language. It defines some base components that define UI primitives, and those are thought to be independent of the platform that runs them. All the components we can create in React Native is based on primitives like View, Text, or Image, which are basic elements that make sense to any visual interface, no matter where it is run.

On the other hand, React’s primitives are just DOM nodes — HTML tags like div, p, or a, which are not pure UI. They weren’t created to define a visual language; rather, they’re meant to structure and make sense of the hypertext. React’s primitives have meaning beyond the interface, and that meaning doesn’t make much sense outside of browsers.

which is taken from here. I developed both ReactJs and RN applications and websites and the only true benefit that I can see is the unified coding language. Since I started with RN and then added ReactJS to my resume, I found it a pain in the butt to find the equivalent of RN components in ReactJs, oh I should use p and span instead of Text?, oh shoot it is 'input type="text"' not 'TextInput' etc etc. I think you get my point. Probably it is same for React developers who came into RN world. But it comes with its cons too and unfortunately using react-native-web need some hassles and you have to PREPARE your project for it.

thanks for your explanation. Could you please be more specific and provide more details or examples for the "some hassles"? thanks!

For example React-Native (and some its libraries) are based upon Promise framework which is not normal JS, or Object.assign is added ES6, in order to use them you have to modify webpack.config.js and .bael-rc files add multiple lines inside those files. If you are using other helper tools like Flow or Jest or etc they had to be configured too. It sure slows you down at start but if you dedicate the time to set things up it pays of in long run.

user_43581380

If you need to port a react-native app to the web use RNW. If you need to create a web-app only, use react with a ui library like e.g. material-ui (my favorite ui library).

user_116347930

The problem

Some components like react-navigation, pickler, contacts accessor components and etc. are not fully supported by react-native-web and you will get module/component not resolved error when building the web output! To handle this problem the best approach is to divide code (components) into 4 parts (folders):

   project-folder/
       android/
       ios/
       web/
       common/

You will write components that are supported by all of the platforms in the common folder and some components that are platform-specific in their own folders.

As a developer, you will use a lot of conditions and codes in rendering as my opinion and the code base will be big enough to be confusing!

The other problem will be the responsiveness of web app, Many years ago, We were trying to make desktop made websites to be rendered responsively in mobile screens. These days we are trying to make mobile websites to be responsive in desktop screens and not having a lot of space-between in desktop screens!

Other approches

  1. You can use react-native for developing apps for ios and android only and use HTML, JS, or reactjs for developing websites.

  2. You can develop PWA websites that are installable by browsers for android and ios and can store data for offline usages.

user_75808390
Related