image
author

William Dawson

Full Stack Developer

Often many of you are wondering isn’t React already existing for many years now and what is the point of the react-native web? Also, some people are thinking are both React native web and React the same thing?

Let’s check this comparison guide for 2020 for React native web and React and find out how “React-native for web” makes it possible to run React native components and APIs on the web using React DOM.

It is as simple as that. So, if you have an app and you want to build a web version of it, you should definitely learn React Native Web.

React Native Web Vs React

React web came before react native and much before react native for web.

Since react used 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 web was born.

Is React Obsolete now or can React Native Web And React Together?


Although react native web is a great way to build your website, but I’d say use it only when you have plans 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.

But, If you are looking to build only the website, then React is the way to go.

Advantages 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 html background to jump in. Whereas in react-native-web, we use <View>, <Text> which is what is used in reactnative, and is different than html way of coding.
  • You can easily fiddle with browser’s inspect element and change the html over there to test your changes in React, as the conversion of React code to the browser is relatively straightforward. Whereas in react native for web, the metro bundler auto-generates the classes, and it looks like the following:  You can’t really change the html directly for trial and error, you need to change the code in your editor itself.
react native web vs react

  • You can easily integrate thirdparty 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’d find a lot of documentation about almost everything on the web. Additionally, React has great community support.
  • React native for web is relatively new technology and you won’t find a lot of documentation for it. But it is picking up, so it’s a very good technology to learn.

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 choose 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 if you want to build app and web versions together as it provides maximum code sharing, whereas with React you have to keep the view files separately.

As the community is driving towards using styledcomponents everywhere, slowly it is going to be quite similar development efforts to use react-native-web and react.


Now, Let’s have a look at the fundamentals of react-native-web:

Fundamentals of the React-Native Web:

Every frontend framework needs to have few things to make it usable.

  • Easy to start
  • Great development experience
  • Navigation
  • Styling
  • Good community support



Easy to Start

Setting up react native for web is quite easy with the expo. Since expo sdk version 33, expo gave the support of react-native web. Check out this detailed article for the react-native-web setup with expo.

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 html background and don’t’ have much experience with react-native.

Navigation

React-navigation is one of the most popular navigation library for react-native, and since version 3.0 it has extended the support for react-native for the web as well. Here is a great article if you are interested in integrating react-navigation with react-native-web.

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. You can file issues on the official github repo https://github.com/necolas/react-native-web, ask questions over stackoverflow, reach out to us at codersera.com/contact. And If you are looking for a react-native-web developer to build your app and web all in one go, you can try our 7 days risk-free trial services.

Codersera risk free policy

How useful was this post?

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Please do Rate Us and Share!

Related Blogs

  • author
    Adam Davidson

    Best Android Emulator for PC

    Android emulator for PC or MACs is one of the best for gamers to focus and improve their gaming skills.There are many reasons for emulating Android on your Windows PC, because with the help of emulation it is much easier to test apps on-screen or desktop than a mobile device. Android developers can debug...

  • author
    Adam Davidson

    Companies that Use Node JS in Production

    Despite of being arrived late on the scene, NodeJS is dominating the entire application development scenario with its great optimal features. This is a well-kept secret for the seamless distribution of their services that some of the top companies that use NodeJS for its web-based applications today. From concurrence to being a lightweight runtime,...

  • author
    Lucas White

    How to Use callBack With setState in React

    Today we are going to explore the callback function in setState and get to know about how we can use it.  First of all, I’d like to explain the ‘callBack’ and ‘setState’. callBack functions is a function that is passed as an argument to another function, to be “called back” at a later time....

image

About The Author

William is a CTO and a full-stack engineer with 10 years of experience. He has spent the past seven years doing web and mobile apps. He’s good at designing architecture and implementing agile development process. The technologies he’s worked with include: Node.js, Elixir, Rails, AngularJS, React, React Native, Objective-C, iOS, Java, Android. He’s also familiar with C++, Haskell, C#/.NET. He is an enthusiastic programmer and a great guy to know

Try our One-Week Risk Free Trial for Hiring a Coder

Know more Hire a Coder