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.

Improve this question
6
  • Do you mean to make another component which the App.js app can use? Commented Dec 24, 2020 at 2:01
  • No, i mean i want to turn the app into a web-component. That is i want it to be a web-component, instead of just a normal react app. Commented Dec 24, 2020 at 2:03
  • Oh i'm not sure about that then. Commented Dec 24, 2020 at 2:05
  • alright, thanks a lot for your time. Commented Dec 24, 2020 at 2:12
  • Why? What do you want to do with the Web Component what you can't do now? There is no single answer. Commented Dec 24, 2020 at 10:10

2 Answers 2

Reset to default
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:

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Hmm, I see.. I guess I should have thought of this better before using react..
Anyways, since it's doable like you said, I would have to develop all dependencies..
Yes, adding more and more to your already bloated React bundle size.
How will I go about developing the dependencies.. And will I tweak it into making it work..
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.
|
0

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

Improve this answer

1 Comment

Direflow doesn't appear to be maintained and is not compatible with React 17+.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.