Cross Platform React Component Rendering

user_13879957 0
Viewed 125

I'm learning React. My goal is to create a few components that render cross-platform. Specifically, I'd to create components with the option to a) render in the browser b) render on the server c) render natively on Windows and d) render natively in iOS. Based on my limited understanding, it seems like each of these cases are possible. I'm trying to understand the simplest way to do this though. It almost seems like each scenario requires a different approach, which almost results in four different components. This seems like a misunderstanding on my part though.

If I wanted to render a button in the four scenarios above, what is the simplest approach? I figured a tutorial showing this would exist, but I haven't found one.

Thank you

react-native reactjs
4 Answers

What I know from React is that React components are different from React Native ones. you can't have a single component to be used both in React and React Native and you should create separate projects for each one. but in React Native you code once and you can run it on both android and IOS and as they introduced recently no windows and mac too (1).

So to wrap things up, you should separate your web application from your native applications (which can be android, IOS, windows, and mac) but since React and React Native are not that different from each other, it won't be as hard as starting a new project.

user_122572830

Your react native code works in both Android and Ios(unless you use some libraries which are platform specific) . To run your react native code in web, use react-native-web. For windows and macOS use this.

Best part with all this is, you write the code only once but run it everywhere.

user_143732130

First of all, try to use packages that support all of your environments. But if you need separate implementation then you should do it like this Button example you mentioned:

  1. create a button folder
  2. create a Button.js or index.js file
  3. create Button.[enviroment].js files you need and export only one Button component in the root Button.js file. like this:
-- /components
  -- /button
    -- `index.js`
    -- `Button.web.js`
    -- `Button.android.js`
    -- `Button.windows.js`


// Button.web.js
export const Button = ({title}) => {
// web specific implementation
}

// Button.windows.js
export const Button = ({title}) => {
// windows specific implementation
}

// index.js
export {Button} from './Button'
user_71788600

Interesting - I thought I'd post some related thoughts based on my own efforts on unified UIs. It may not answer your question directly, but I hope it is of interest.

REACT AND APPROACH

I would argue that you should use the right tool for the job. React is a great choice for Single Page Apps, and also surprisingly good for Desktop Apps:

  • An SPA will run in all desktop and mobile browsers on any OS
  • A desktop app will run on Windows, MacOS and Linux

MOBILE

I work a lot with security tech, which requires up to date native support. In these cases Swift and Kotlin shine, and technologies such as React Native become hard work, because you are always going through extra layers, with many annoyances.

CODE EXAMPLES

My ongoing struggles with cross platform UI technologies are here, and they include a React SPA and React desktop app, both of which deal with difficult OpenID Connect security flows.

UI code is the same in all cases, including mobile, but I avoid React for mobile apps. Code sharing would be more effort than it is worth. Also, in a real company, mobile and web is often developed by different teams, who should be able to choose their own tech.

SUMMARY

The thing that should be shared is design patterns, not technology or code. Design patterns will scale over time, whereas code sharing will not.

user_90198850
Related