2

I am working on a react app with mapbox that gets data from a JSON file and adds the data on the app.. I have successfully built the app. But what I want now is that I want to be able to use my react-app as a web component. In a way that it will be usable in websites and web apps.

Ogundipe Pelumi
  • 57
  • 2
  • 8

2 Answers2

2

Think of it this way:

Your React application is the U-Haul truck that delivers everything from the Web Server (Back-End) to the Browser (Front-End)

Now you say you want everything wrapped in a (native) Web Component:
<move-house></move-house>

It is do-able, but you as the Developer have to develop all dependencies

It starts by fully understanding what React is and does, so you can wrap all its behaviour.

Unlike other Frameworks (Angular, Vue, Svelte) React has no "Make-it-a-Web-Component" option,
because React, with its virtual DOM, is a totally different (and rather outdated) beast that doesn't comply with modern Web Standards. (today [Dec2020] React only scores 71% on the Custom Elements Everywhere test)

See: https://custom-elements-everywhere.com/libraries/react/results/results.html
for what you as the developer have to fix, because React does not do that for you

Some say React compared to modern JavaScript technologies, Frameworks, Web Component libraries like Lit and Stencil or Svelte, is more like:

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
  • Hmm, I see.. I guess I should have thought of this better before using react.. – Ogundipe Pelumi Dec 24 '20 at 12:15
  • Anyways, since it's doable like you said, I would have to develop all dependencies.. – Ogundipe Pelumi Dec 24 '20 at 12:16
  • Yes, adding more and more to your already bloated React bundle size. – Danny '365CSI' Engelman Dec 24 '20 at 12:16
  • How will I go about developing the dependencies.. And will I tweak it into making it work.. – Ogundipe Pelumi Dec 24 '20 at 12:17
  • Identify 3 User Stories, Complex, Medium and Easy, and try those. TRY, the objective is to be able to plan the whole project. But before that; WHY do you want this? No 3rd party is going to buy a software solution like this.. unless you have great sales people. – Danny '365CSI' Engelman Dec 24 '20 at 12:28
  • It's not my personal project, I'm helping a client to build it.. so how he plans to sell it, I have no idea, but what he wants is just a web components that will be resuable. – Ogundipe Pelumi Dec 24 '20 at 12:35
  • Then you have decision to make; tell your client the honest truth, or continue with React, make sure you get paid, and accept the client will curse you a year from now. – Danny '365CSI' Engelman Dec 24 '20 at 13:09
  • X is the time required to continue with React. Y is the time required to rebuilt the application. You have to calculate if Y < X. Taking into account no 3rd party will buy solution X (a very big bundle) when there will be other options available in the future. You searched the Web for solutions that wrapped React IN a Web Component.. the number of search results is an indication of viability. Think of it this way.. React is the new Flash.. which, this month, is officially dead technology. – Danny '365CSI' Engelman Dec 24 '20 at 13:39
  • Okay, i get your point,but i have a question tho, do you think it would have been different if it's a vanilla Javascript? – Ogundipe Pelumi Dec 24 '20 at 19:10
  • No, it just takes longer to develop, but once done it will work for as long as JavaScript runs in a Browser. Also see: https://stackoverflow.com/questions/64304353/main-differences-between-lit-element-react/64307820#64307820 – Danny '365CSI' Engelman Dec 24 '20 at 20:13
0

It is possible in react using direflow. https://direflow.io/

Vijay122
  • 884
  • 8
  • 12