Building React with ES6 imports in traditional HTML/CSS/JS environment?

Question

I have a big old website that I am adding react components to. It uses node/express and handlebar templates mostly. Basically I do it like this:

The site imports react libs in the old way (in an html file):

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

And then I use it like this:

HTML:

<div id="react-container"></div>
<script src="react-component.jsx" type="text/babel"></script>

react-component.jsx:

const Component = ()=>{ ... }

const container = document.getElementById("react-container");
ReactDOM.render(React.createElement(Component), container);

The issue is if I want to import libraries, they have to be available from CDN via script tags. I have found a couple now that aren't and also it would be nice to be able to see what I'm importing at the top of a file instead of just having a bunch of libraries floating around on the window object.

Anway, I can't use create-react-app but I'm wondering how I can go about inserting a small build step into my system to make it possible to npm/yarn install libs and then import them into my code.

Thanks.

Peter Catalin · Accepted Answer · 2021-07-07 22:34:25Z

2

I am not familiar with the technologies you're using but I thought your question was interesting and I looked a bit into it.

Here is what I would try to do:

Since you're using node you could use Webpack to bundle each of your react components in its own separate file (https://webpack.js.org/concepts/output/#multiple-entry-points) and tell Webpack to put the generated files in a folder that can be served by express. (https://expressjs.com/en/starter/static-files.html). Webpack will take care of bundling all the dependencies that you might install using npm. You just need to expose the component to the window by exporting it so that it can then be accessed by step 2.
You could then use a <script> to load the component bundle you need in a specific template and then render it using ReactDOM.render(React.createElement(YourComponent), document.getElementById('the-container')).

If you're not familiar with Webpack you can take a look at this article: https://www.valentinog.com/blog/webpack/#how-to-set-up-react-webpack-5-and-babel-from-scratch

I did not test this so I'm not sure it works but as I said I thought it was an interesting question and I want it to give it a go and maybe give you some useful ideas.

answered Jul 7, 2021 at 22:34

Peter Catalin

1,4721 gold badge17 silver badges23 bronze badges

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

3 Comments

Christopher Reid Over a year ago

Thank you, this is useful information, gonna try it out now.

Christopher Reid Over a year ago

Hey, I followed the link you posted at the bottom for initial setup and JS (skipped CSS and HTML) and I'm off to the races! This is a nice light / plug in way to use webpack to compile my React code that flawlessly fit into my existing build without forcing me to go all in with webpack. Can't wait to build on top of it.

Peter Catalin Over a year ago

I'm glad I could help.

Collectives™ on Stack Overflow

Building React with ES6 imports in traditional HTML/CSS/JS environment?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related