I am a freshman of javascript and react. My question is: How to convert the following code to react code?
<div id="SOHUCS" sid="xxx"></div>
<script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: 'xxx',
conf: 'xxxxx'
});
</script>
componentDidMount()import React, {Component} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends Component {
componentDidMount() {
const script = document.createElement("script");
script.async = true;
script.src = "https://some-scripturl.js";
this.div.appendChild(script);
}
render() {
return ( <
div className = "App"
ref = {
el => (this.div = el)
} > < h1 > Hello react < /h1> {
/* Script is inserted here */ } <
/div>
);
}
}
export default App;
react-helmetReact helmet is an npm library that manages browser head manager, It is very easy to change web page lines of code inside a head tag. First, install react-helmet with the npm install command
npm install react-helmet
It adds the dependency to package.json
"dependencies": {
"react-helmet": "^6.1.0",
}
Complete component code to add a script tag to component using react-helmet.
import React, { Component } from 'react';
import { Helmet } from 'react-helmet';
class AddingScriptExample extends Component {
render() {
return (
<div className="application">
<Helmet>
<script src="https://use.typekit.net/hello.js" type="text/javascript" />
</Helmet>
...
</div>
);
}
}
export default AddingScriptExample;
You can't convert a html website to a react project. You can only create a new react project and recreate your site by adapting your code in the app file. To create a react app, you can use this website.