search

congzhangzh / react-native-remote-web

Server-side execution for React 🌋
https://www.npmjs.com/package/caldera
1 stars 0 forks source link

[thirdparty components][react-bootstrap] find a solution to transparent support react-bootstrap #3

Open congzhangzh opened 2 years ago

congzhangzh commented 2 years ago

Why

a great UI component is a must needed for common daily use.

Why choose react-bootstrap

A component focus on react side state manager is a must need, other solutions like base on Canvas/WebGL/Skia/Heavily none react js is not suitable, as it's not remote web friendly.

which is suitable for remote web is the only one that is based on HTML/CSS/React state manager.

Rebuilt with React is very attractive

Ideas

possible trouble part

  1. import CSS problem
  2. Dom operator, like https://github.com/react-bootstrap/react-bootstrap/blob/master/src/safeFindDOMNode.ts https://www.pluralsight.com/guides/how-to-use-react.finddomnode-in-typescript

possible of solution

webpack to split server part and client part, and then inject server part in the head part, one interesting webpack config ref: https://github.com/ant-design/react-starter-kit/commit/6e345f69bf7dd639ca2c56e4f51f928926c0ee76?diff=split , which seems very cool @afc163

it should be possible

as most of the component is SSR friendly, it should be possible for us to render from the server side with some additional trick

step to try and check

sample content, a button to control a dialog show and hidden

I am not so familiar with bootstrap, so I need to check and compare tribble way:

  1. one raw CSS/js base bootstrap usage
  2. one reactjs based usage
  3. one react-native-remote-web based usage

done in https://github.com/medlab/react-native-remote-web-bootstrap-migration

congzhangzh commented 2 years ago

It seems very hard to do it, maybe start from a easy lib is a better idea?