Twitter.com's HTML, which is produced by React Native for Web, explained

Re:Twitter.com's HTML, which is produced by React Native for... by robertoandred on Thursday September 02, 2021 @12:56PM (#28394447)

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.

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by sharikone on Thursday September 02, 2021 @02:45PM (#28395790)

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

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by zachrip on Thursday September 02, 2021 @01:17PM (#28394717)

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...

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by dragonwriter on Thursday September 02, 2021 @06:16PM (#28398058)

> 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.

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by gedy on Thursday September 02, 2021 @01:10PM (#28394618)

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

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by gorbypark on Thursday September 02, 2021 @09:18PM (#28399437)

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.

[ Parent | on HN ]

Re:Twitter.com's HTML, which is produced by React Native for... by kall on Thursday September 02, 2021 @03:46PM (#28396490)

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.

[ Parent | on HN ]