Can I use a React app as a component on a static HTML page

Question

I'm new to React and JS, and working with react-csv-viewer.

It works as expected and I can build and deploy it on a local server. But I do not require this, I just want to integrate the app as a component of a static HTML page.

I've tried following the process listed on the React tutorial for this, but I have trouble understanding the build process and how can I achieve this.

All I wish to achieve is to be able to use <CsvViewer /> provided by the author, possibly like this

const rootElement = document.getElementById("root");
ReactDOM.render(<CsvViewer />, rootElement);

and get the viewer app rendered at my HTML file, without building and deploying the viewer app on a (local) server.

Will appreciate any help or hints in this regard.

It's just a component. You import it and embed it like any other React component. Following the tutorial, just drop it in the return of the render in your JSX. — jmargolisvt
– jmargolisvt, Commented Nov 29, 2019 at 15:28

dance2die · Accepted Answer · 2019-11-29 15:30:33Z

2

You can add React as it was shown in the tutorial you linked. The downside is that, you can't use JSX syntax (as it should be converted to JS during build time as it's not recognized by browsers as so).

Here is a post explaining how you can do so without transpilaton steps.

https://codepen.io/alexkrolick/post/react-without-a-build-step

Alias React.createElement, and call it to create components. e.g.)

const h = createElement // convenient alias

// Instead of
<div className="foo" />

// create an element like so
h("div", { className: "foo" })

For more info on how that works, check out the official documentation.
https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects

But I really doubt anyone writes React code that way without a transpilation step in real life.

Would creating a separate site/page with React be a problem by chance? You can check out ParcelJS to easily create a React site if you aren't familiar with transpilation.

answered Nov 29, 2019 at 15:30

dance2die

37.2k39 gold badges137 silver badges200 bronze badges

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

2 Comments

bambi022 Over a year ago

I do not wish to create a separate page, as this is supposed to add a small widget-like, functionality to a page which already exists and is rendered independently.

dance2die Over a year ago

@bambi022 CsvViewer is a CJS module, which needs require. You can find a way to use require on the browser but CsvViewer isn't necessarily built to be used directly on the browser. If you need a starting point with React, try this Sandbox I created.

Collectives™ on Stack Overflow

Can I use a React app as a component on a static HTML page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related