Hacker News Reader

Comment by DoctorOW | Hacker News Reader

So pardon my ignorance but I thought React was already for web and React Native merely a set of tools to help port React web apps to native mobile apps. What is the difference between React for web and React Native for web?

View on HN

An important distinction that often gets lost is that React itself is an abstract, standalone layer above web and native. It handles deciding what to render and when. When you learn the concepts of React, you're learning this layer.

Then there are layers that decide how to render. Regular React has a renderer that accepts HTML tags spits out HTML for the browser. React Native has a renderer that accepts more abstract tags (<View>, <Text>) and spits out native views for apps. There are other projects that make renderers for making PDFs, animations, etc.

React Native for Web is basically a renderer that accepts the abstract tags React Native uses (<View>, <Text>) and spits out HTML. React Native does not really help you directly port a web app to native, but React Native for Web is designed to directly port a native app to the web.

I'm curious why it's a special renderer vs just another React component library?

As far as I know, it is. I think OP simplified for the explanation but when I last used it, RNW did not include a react render, it uses react-dom.

React, react-native and react-native-web are really interesting. Classic react (for the web) was built with a plugin based rendering system. Classic react's renderer targets HTML and the DOM. React-native swaps out the renderer for one that renders to native elements (for example, instead of a <div> you would use a <View>, which then renders a native "box" using system primitives). They are both running the same react code, just with different renders. There's a whole system in react-native to be able to wrap native APIs and access them via javascript, but at the end of the day, both systems are running the same react (just different renders).

React-native-web is basically a classic react component library that aims to be 100% compatible with react-native. You can literally do "npm install react-native-web", then "import {View, Text} from "react-native" and just start writing react-native code in a classic react-project. It's nearly feature complete, and pretty incredible. Really the only downside is that (obviously) react-native-web can't use those 3rd party libraries that use that "native API wrapper" features of react-native. That being said, a lot of packages are starting to offer react-native-web compatibility by writing web-specific "polyfills" for the native components.

Adding to this - jsx (the templating that react and other libraries use) is compiled down to calls for React.createElement (this is configurable). And jsx is a sort of superset of html so it's not exactly html tags, it just looks a lot like it.

https://www.typescriptlang.org/play?#code/DwEwlgbgfAsAUAAgcA...

> And jsx is a sort of superset of html

More accurately, JSX is shaped like HTML, and some of the the transforms for JSX to JS have built in special handling for the standard HTML tags.

I am waiting for "React Native for the Web for Native" as a tool to port React Native for the Web pages to native apps.

To be followed by "React Native for the Web for Native for the Web" to port those apps back to the Web..

At some point they will just emulate a browser into a PC into a browser to make your code more portable

React Native for web allows you to use the same primitives (View, Text, Image, Button) across platforms (web/iOS/Android/etc)

React Native for web is, as the name implies, React Native components used for building websites. The idea is that you can share code between your native apps and your web app.

It's simply React (for web), but for native, ported for web. Would be cool to see a react-native-web-native port to use react-native-web for native apps!

React and React Native are separate tools, and they don't play with each other. You actually need to build two separate apps and you don't get much of any re-use. For example, you can't use Material UI for React in React Native, and you can't build a React component library and just pull it into React Native.

So if you want a fully cross platform React experience, you need React Native from the get-go and to compile it for web when you want web.

Almost holding my breath for the time we see a version of react native for web getting packaged into a container that mimicks a native mobile app. And back then I thought that I've seen it all when apps built with scalajs-react-native appeared on Android.

This isn't really accurate. Presuming you're using react-native-web [1] (the most popular version of RN targeting the web, although there are others), it's essentially just a set of components and APIs, fulfilling RN's API, which sit on top of React DOM.

So anything you could do in React, you can also do in RNWeb, as it's a superset of React.

Of course, you'd need to use the RN components if you want to share code between web and native mobile. But there's nothing stopping you reaching a high degree of code re-use, and/or using React components for the web-only portion of a RNWeb project.

[1] https://github.com/necolas/react-native-web

Reply on news.ycombinator.com