score:4
i will divide my answer into 3 parts:
- simple inclusion of react in general
- make your example work
- modules
(i will use yarn below. you can use npm as well, i assume you are familiar with these.)
1. simple inclusion of react in general
index.html:
<html><head>
<title>my old web applciation</title>
</head><body>
<h1>old stuff</h1>
<p>some old html content.</p>
<!-- add a container, where you want to include react components -->
<div id="injected-react-content"></div>
<!-- import the react libraray -->
<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>
<!-- import your react component -->
<script src="giveitem.js"></script>
</body></html>
giveitem.js:
(modified from jsx to js. for jsx see section 2.)
const giveitem = (props) => {
console.log("init give item component");
return react.createelement(
"section",
null,
"give item content"
);
};
const domcontainer = document.queryselector('#injected-react-content');
reactdom.render( react.createelement(giveitem), domcontainer );
2. make your example work
your component uses jsx. you need to transpile it to js, using babel.
giveitem.jsx:
(it is not necessary to call it .jsx, but it makes sense)
const giveitem = (props) => {
return (
<section>
give item
</section>
);
};
const domcontainer = document.queryselector('#injected-react-content');
reactdom.render( react.createelement(giveitem), domcontainer );
install babel:
yarn add @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/preset-react --dev
transpile your jsx file ./src/giveitem.jsx
into a js file in ./dist/giveitem.js
:
yarn babel ./src/giveitem.jsx --presets=@babel/preset-react --out-dir dist
(the dist
folder will be created if it doesn't exist)
if you now copy the index.html into ./dist
,
you should have the same code as in section 1.,
and opening ./dist/index.html
in the browser should work.
3. modules
of course, you would want to import other react components and sub-components.
(and you probably don't want to import everything individually with <script>
tags.)
if an environment is set up already
maybe your old app already runs in a yarn (or npm) environment, then you might be fine with
- install
yarn add react
andyarn add react-dom
- removing the two
<script src="https://unpkg.com/react...
lines (as react is probably already imported inside your components), - then import some root component (instead of
giveitem.js
before), where you do thereactdom.render(...)
and import further modules:
e.g.:
index.html:
<!-- import your react component -->
<script type="module" src="entryintoreactworld.js"></script>
entryintoreactworld.js:
import somecomponent from './somecomponent';
import someothercomponent from './someothercomponent';
const reactroot = props => {
return react.createelement(
"div",
null,
react.createelement(somecomponent, null),
react.createelement(someothercomponent, null)
);
};
reactdom.render(
react.createelement(reactroot),
document.queryselector('#injected-react-content')
);
if environment is not set up already
if your old app is not already running in a yarn (or npm) environment, you have to set one up.
unfortunately, this is not trivial.
(i tried to write a short working minimal example here, but i failed.)
for that you have to enter the world of javascript modules. but modern browsers don't allow many things from the local file system. (e.g. see cors problems, mime problem, ...)
you have to install a server for development. you might start with e.g. http-server, but there you probably still will have problems, so i suggest to already start with writing a server.js
file and use node http.
(maybe expressjs as well. it is not necessary, but everybody uses it, and it is easier to find help and tutorials.)
you also might need webpack.
of course you also have to install yarn add react
and yarn add react-dom
.
Source: stackoverflow.com
Related Query
- How to use React components as part of legacy HTML/JS app?
- How to use HTML with JS in React app to export component
- How to use html js library inside react app
- How to use code splitting with webpack in react app with components exported as export * from '...'
- How to Integrate React Components to a legacy app
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- How to use environment variables in React app hosted in Azure
- How to use SCSS variables into my React components
- How to parse a String containing HTML to React Components
- How to use react j s components in react native app?
- How to embed React Components in html pages
- How to export react app to pure static html
- How to use yarn to create a React app project?
- How to use redux-toolkit createSlice with React class components
- How to use Media Queries inside a React Styled Components Keyframe?
- How to use firebase auth and Cloud Firestore from different components as a single firebase App
- how to import HTML file into React component and use it as a component?
- How to use react components from other files
- React Styled Components - How to access raw html
- how to import data in react from a js file to use in components
- How can I use React Material UI's transition components to animate adding an item to a list?
- how to use .env.qa or .env.staging with create react app
- How to use Tesseract.js in a React app
- How to avoid very long paths and use absolute paths within a Create React App project?
- How to use react ref to get value from html select element?
- How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?
- How to use this.props in React Styled Components
- How to use the updated value in redux store immediately after the action is dispatched in react js functional components
- How to use inheritance with React components and es6 classes
- How to Merge React App into existing Website with existing HTML structure
More Query from same tag
- Prevent User From Triggering Multiple Scrolling
- TypeError: Cannot read properties of undefined (reading 'rejectWithValue') - Redux Toolkit
- Does Meteor createContainer re-compute when the injected params change?
- Bootstrap React Nextjs, doesn't look the same as on the documentation
- Is there a way to get all this datas out and have them in an array
- Local State not updating on Update of Redux State
- Alter text in span tag dynamically with React issue
- React Context with Multiple State Values not updating initial values
- reactjs clear date input after clicking clear button
- Generate multiple docs and zip for download
- Material-UI v1: Using the custom colors for theme configuration
- Typescript incorrect deduces never type
- Adding state to an external variable in React
- How can I set multiple attributes on a firebase object?
- Gatsby's StaticQuery renders nothing
- getCurrentPosition is not getting called ReactJS
- How to store download urls and retrieve them from a collection
- Updating and merging state object using React useState() hook
- How do I pass data to a Fauna Create function
- why is React source code written in JavaScript instead of TypeScript, but still have types?
- Dynamic react state
- Filtering Arrays in a Reducer - Redux
- Unexpected token, expected ...
- TypeScript types for passing a React component to React.cloneElement
- eslint "parsing error: Unexpected token {" in JSX
- Babel es2015 Arrow Function error
- One common dialog for different types of input data
- calling javascript method from react
- Redux: Strange destructuring syntax inside the Redux docs example's connect method?
- Give new item when button clicked