I'm sure most of you would agree that we don't need an introduction to React. It is the unquestionable leader of the framework world. But then, Facebook went ahead and released React Native web. "So what is the meaning of this?" is what most of you would be thinking. Is it the same thing? If not, then doesn't it make React completely redundant?
Well, this article is all about clearing that doubt only. You will be clear about both by the end of this article.
React Native Web vs React
Since React used the virtual DOM concept and there was a code conversion from jsx to HTML, developers thought of using the same concept for the apps, i.e. Write jsx and convert the code into java and objective c under the hood. And that’s how React native was born.
Also, developers thought of simplifying the code writing process by writing one code instead of two codebases. This way you have to write just one code and let it get converted into HTML, java, and objective c under the hood. And that’s how React native for the web was born.
Is React obsolete now or can React Native Web and React Native work together?
Although React Native web is a great software for creating your own website, it is advisable to use it only when you have to build both web and app versions together, or if you already have an app in react native and are planning to launch the web version.
Advantage of React over React Native web
React’s syntax is close to HTML. In React, we use div, h1, h2, p, etc, and it is easier for a frontend engineer with the HTML background to jump in. Whereas in react-native-web, we use , which is what is used in react–native and is different than the HTML way of coding.
You can easily experiment with the browser's inspect element and change the HTML over there to test your changes to React, as the conversion of React code to the browser is pretty straightforward.
You can easily integrate third-party libraries. Most of the third-party libraries have React packages, even if they don’t you can easily integrate the library in the raw HTML and js form. Whereas with react-native-web integrating third-party libraries may not be that straightforward, although sometimes you can always create mocks.
React is more stable and you can obtain a lot of documentation on the web.
The community support that React has is very large compared to the React Native web.
React Native web is a comparatively new technology so there isn't a lot of documentation on the internet right now.
Advantages of React Native Web over React
If you already have a codebase in react-native written, then with minimal changes you can run the same code on to the web. Whereas if you select react, then you have to start almost from scratch. Although, you can save some time by setting a monorepo and keeping some utils code common between both the app and the web.
React Native Web is great to use if you want to build app and web versions together as it provides maximum code sharing whereas, with React you have to keep the files separately.
As the community is driving towards using styled-components everywhere, slowly it is going to be quite similar development efforts to use react-native-web and react.
Fundamentals of the React Native web
Every frontend framework needs some fundamentals to show its advantages
- Easy to start
- Great Development experience
- Navigation
- Styling
- Good Community support
Easy to Start
Setting up React Native for the web is quite easy with the expo. Since expo SDK version 33, expo gives support to the react-native web.
Great Development Experience
With the expo kit, you get hot reloading and other great development benefits and experiences. Its been seen that changing styles sometimes get difficult with react-native-web when you are coming from an HTML background and don’t have much experience with react-native.
Navigation
React-navigation is one of the most popular navigation libraries for react-native, and since version 3.0 it has extended the support for react-native for the web as well.
Styling
Styling react-native-web component is exactly the same as styling react-native components. In case, you want to have specific styling for the web, you can always write the conditional styling using Platform.OS === ‘web’ check.
Good Community Support
Since react native web is a recent technology hence it doesn’t have a community as big as react. But you’ll for sure get a lot of help on the web.
Well, this was the comparison between React and the React Native Web. I hope it was helpful to you and provided some new insights to you.
Top comments (0)