I am a beginner in react.js and i have to re implement another system in react.js. The other system uses RequireJS and I am not sure how to include it in a react component.
My render code looks like this:
import React, {Component} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'
import Neo4jDBService from "../../api/Neo4jDBService";
import {Helmet} from "react-helmet";
class WelcomeComponent extends Component {
constructor(props){
super (props)
this.handleSucessfulResponse = this.handleSucessfulResponse.bind(this)
this.handleErrorResponse = this.handleErrorResponse.bind(this)
this.state ={
letter : [],
selected: '',
welcomeMessage : '',
}
}
componentDidMount() {
console.log('didmount');
this.getLetterNames();
}
getLetterNames(){
console.log('filter')
var counter = 0;
Neo4jDBService.retrieveAllLetterNames()
.then( response => {
response.data.map (data => {
console.log(data)
})
this.setState({letter: response.data})
});
}
initEditor(){
}
render() {
console.log('draw');
return (
<div>
<Helmet>
<title>Editor</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta charSet="utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<link href="/../../standoff-properties-editor-master/css/bootstrap.min.css" type="text/css"/>
<link href="/../../standoff-properties-editor-master/css/bootstrap-theme.min.css" type="text/css"/>
<link href="/../../standoff-properties-editor-master/css/font-awesome.css" type="text/css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="/../../standoff-properties-editor-master/css/app/editor.css" type="text/css"/>
</Helmet>
<body style={{backgroundColor: 'blue'}}>
<div style={{display: 'none'}} id="modal-nav"></div>
<section id="main-template">
<div data-bind="template: { name: 'text-edit-part-template', data: $data }"></div>
</section>
<script src="../../standoff-properties-editor-master/scripts/require.js"></script>
<script src="../../standoff-properties-editor-master/scripts//app/app.require.config.js"></script>
<script type="text/html" id="text-edit-part-template">
<div className="container" style={{marginTop: '40px'}}>
<div className="row">
<div className="col-md-6">
<label>
File
</label>
<div className="input-group">
<select className="form-control" data-bind="value: $data.file, options: $data.files, optionsText: 'text', optionsValue: 'value'"></select>
<span className="input-group-btn">
<button className="btn btn-primary" data-bind="click: $data.loadClicked">Load</button>
</span>
</div>
</div>
</div>
<div className="row" style={{marginTop: '20px'}}>
<div className="col-md-12">
<div className="row">
<div className="col-md-6">
<div>
<label>
Annotations
</label>
</div>
<button style={{borderBottom: '3px solid red'}} data-toggle="tooltip" data-original-title="Person"
className="btn btn-default tip" data-bind="click: $data.personClicked"><span className="fa fa-user"></span></button>
<button style={{borderBottom: '3px solid pink'}} data-toggle="tooltip" data-original-title="Place"
className="btn btn-default tip" data-bind="click: $data.placeClicked"><span className="fa fa-map"></span></button>
<button style={{borderBottom: '3px solid cyan'}} data-toggle="tooltip" data-original-title="Date"
className="btn btn-default tip" data-bind="click: $data.dateClicked"><span className="fa fa-clock-o"></span></button>
<button style={{borderBottom: '3px solid blue'}} data-toggle="tooltip" data-original-title="Event"
className="btn btn-default tip" data-bind="click: $data.eventClicked"><span className="fa fa-calendar"></span></button>
<button style={{borderBottom: '3px solid green'}} data-toggle="tooltip" data-original-title="Concept"
className="btn btn-default tip" data-bind="click: $data.conceptClicked"><span className="fa fa-lightbulb-o"></span></button>
<button style={{borderBottom: '3px solid yellow'}} data-toggle="tooltip" data-original-title="Text"
className="btn btn-default tip" data-bind="click: $data.textClicked"><span className="fa fa-file-text"></span></button>
<button style={{borderBottom: '3px solid lightgreen'}} data-toggle="tooltip"
data-original-title="Web Link" className="btn btn-default tip" data-bind="click: $data.webLinkClicked"><span
className="fa fa-link"></span></button>
<button style={{borderBottom: '3px solid yellow'}} data-toggle="tooltip" data-original-title="Footnotes"
className="btn btn-default tip" data-bind="click: $data.footnoteClicked"><span style={{fontWeight: 600}}>f</span></button>
<button style={{borderBottom: '3px solid purple'}} data-toggle="tooltip" data-original-title="Domain" className="btn btn-default tip" data-bind="click: $data.domainClicked"><span>|</span></button>
</div>
<div className="col-md-2" style={{paddingTop: '20px', paddingLeft: '40px'}}>
<label>Expansions</label>
<input data-bind="checked: $data.checkbox.expansions" type="checkbox"/>
</div>
</div>
<div className="row" style={{marginTop: '10px'}}>
<div className="col-md-12">
<div data-role="editor" spellCheck="false" contentEditable="true" className="editor"></div>
<div data-role="monitor" className="form-control monitor"></div>
</div>
</div>
<div className="row" style={{marginTop: '10px'}}>
<div className="col-md-12">
<button className="btn btn-default" data-bind="click: $data.cancelClicked">Cancel</button>
<button className="btn btn-primary" data-bind="click: $data.saveClicked">Save</button>
</div>
</div>
<hr />
<div className="row">
<div className="col-md-12">
<button className="btn btn-primary" data-bind="click: $data.unbindClicked">Unbind</button>
<button className="btn btn-primary" data-bind="click: $data.bindClicked">Bind</button>
</div>
</div>
<div className="row" style={{marginTop: '10px'}}>
<div className="col-md-12">
<textarea className="form-control" rows="5" data-bind="value: $data.viewer"></textarea>
</div>
</div>
</div>
</div>
</div>
</script>
dsfdsffsdfsdsfd
</body>
<script>
var editor;
require(["part/text-edit", "jquery"], function (Editor, $) {
//
// This ensures that tooltips are applied to all targets, whether or not they are dynamically created.
//
$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});
var urlParams = new URLSearchParams(window.location.search);
var file = urlParams.get("file");
var node = document.getElementById("main-template");
$.get(file, function (json) {
var editor = new Editor({
template: node,
editor: json
});
editor.applyBindings(node);
});
});
</script>
</div>
)
}
handleSucessfulResponse(response) {
this.setState({welcomeMessage: response.data.message})
}
handleErrorResponse(error) {
//console.log(error.response);
this.setState({welcomeMessage: error.response.data.message})
}
}
export default WelcomeComponent
However, I get the following error message:
./src/components/todo/WelcomeComponent.jsx Line 172:23: Parsing error: Unexpected token, expected "}"
170 | $("body").tooltip({ 171 | selector: '[data-toggle="tooltip"]'
172 | }); | ^ 173 | var urlParams = new URLSearchParams(window.location.search); 174 | var file = urlParams.get("file"); 175 | var node = document.getElementById("main-template");
Where and how can I use/integrate the
var editor;
require(["part/text-edit", "jquery"], function (Editor, $) {
//
// This ensures that tooltips are applied to all targets, whether or not they are dynamically created.
//
$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});
var urlParams = new URLSearchParams(window.location.search);
var file = urlParams.get("file");
var node = document.getElementById("main-template");
$.get(file, function (json) {
var editor = new Editor({
template: node,
editor: json
});
editor.applyBindings(node);
});
});
</script>
script function into my React component? Many thanks in advance
