5 ms·

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

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?

giaset 5y ago
React Native for web allows you to use the same primitives (View, Text, Image, Button) across platforms (web/iOS/Android/etc)
notamy 5y ago
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.
deleted 5y ago
[deleted]
robertoandred 5y ago
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.
- gedy 5y ago
  I'm curious why it's a special renderer vs just another React component library?
  - kall 5y ago
    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.
  - gorbypark 5y ago
    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.
- zachrip 5y ago
  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/DwEwlgbgfAsAUAAgcADgg9gOwMIBswDGA1gLwDeAFAJQIlQIFYDO6uApgHS7oDmFA5ACN06FPyoBfKABc2TacAD0KWHCXhoQA https://www.typescriptlang.org/play?#code/DwEwlgbgfAsAUAAgcA...
  - dragonwriter 5y ago
    > 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.
- sharikone 5y ago
  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
lemax 5y ago
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.
- usrusr 5y ago
  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.
- jamesisaac 5y ago
  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 https://github.com/necolas/react-native-web
lxe 5y ago
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!

giaset 5y ago

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

notamy 5y ago

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.

deleted 5y ago

[deleted]

robertoandred 5y ago

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.

gedy 5y ago
I'm curious why it's a special renderer vs just another React component library?
- kall 5y ago
  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.
- gorbypark 5y ago
  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.
zachrip 5y ago
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/DwEwlgbgfAsAUAAgcADgg9gOwMIBswDGA1gLwDeAFAJQIlQIFYDO6uApgHS7oDmFA5ACN06FPyoBfKABc2TacAD0KWHCXhoQA https://www.typescriptlang.org/play?#code/DwEwlgbgfAsAUAAgcA...
- dragonwriter 5y ago
  > 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.
sharikone 5y ago
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

lemax 5y ago

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.

usrusr 5y ago
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.
jamesisaac 5y ago
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 https://github.com/necolas/react-native-web

lxe 5y ago

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!