CODEWITHSUNDEEP
javascripthtmlreactjsnpmbuild
bambi022
bambi022

Reputation: 31

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

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.

Upvotes: 3

Views: 378

Answers (1)

dance2die
dance2die

Reputation: 36945

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.

Upvotes: 2

Related Questions