React-Native-Web vs ReactJS [closed]

Question

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.

Answer 1

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.

Answer 2

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).