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 react–native, 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.
- 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’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 styled–components 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
- 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.
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 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.
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...
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,...
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....
Please leave a comment here and share your valuable feedback with us!