CODEWITHSUNDEEP
javascripthtmlreactjs
index.jsx
index.jsx

Reputation: 163

Combine a small React app, with a simple html/css/js website

I built a small react app, with just a few components. What i need to do is unite it with a simple website that has html/css and only 1 js file. The html/css files are quite huge, so turning everything manually into JSX and route them, is not an option.

For the React app, i used react-create-app. Am I missing a simple solution here? Like maybe use React Router somehow?

I haven't done anything similar before, but everything I get on the internet involve quite complicated solutions, including to manually configure webpack, babel, and other tools which in my experience is not a good thing to do.

I have tried the official https://reactjs.org/docs/add-react-to-a-website.html solution, but the explanation there is way too uninvolved.
It also includes using script in the HTML for getting the react and react-dom, with the src attribute to unpkg.com (a global content delivery network for everything on npm). But they have material-ui, that I have used in the React app, only for a very old version.

Upvotes: 1

Views: 5128

Answers (1)

Daniel B. Chapman
Daniel B. Chapman

Reputation: 4687

Without a bit more information it is hard to know specifically how to integrate your app, but yes, you can easily integrate it.

I have a development branch of a large .NET enterprise app that we built in React for speed and the general format is this:

Pseudo Site
- /public //where we serve from
  + bundle.js //your react app
  + index.html
  + other.js //your other javascript
  ...anything else you need

Your index.html would look something like this:

<html>
 <head>demo site</head>
 <script src="bundle.js">
 <body>
  <div>other content</div>
  <div id="react-mount">React Mounts Here</div>
  <script src="bundle.js"></script>
 </body>
</html>

And for React...

//Example react component that is packaged into the bundle "index.js" ES6
import ReactDOM from 'react-dom'
const domContainer = document.querySelector('#react-mount');
ReactDOM.render(e(LikeButton), domContainer);

Don't overthink it, look at the console for errors and see what's going on.

In my app I actually have navigation detection and several other more advanced features and it fits right into the existing framework. It was so successful that my client opted to ditch the .NET implementation in favor of an iOS implementation followed by React Native on Android. I highly recommend it as a way of getting React into an existing project.

Upvotes: 2

Related Questions