I am a beginner in ReactJs and i am facing some issue while importing a new plugin in my react app.
I am using working on react without node or npm as below.
<!-- some HTML -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- babel is required in order to parse JSX -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- import react-dom.js -->
<script crossorigin="anonymous" type="text/babel">
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
cclass Example extends React.Component {
state = {
startDate: new Date()
};
handleChange = date => {
this.setState({
startDate: date
});
};
render() {
return (
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);
</script>
<div id="root"></div>
I had to install a date picker plugin which I have downloaded using npm.
https://www.npmjs.com/package/react-datepicker
However, the import function is not working in this. I have tried to use require("path") and by adding
<script src="path to date picker file"> </script>.
None of the above seems to work for me. Could anyone help me how can I include a new plugin from a different file if I am using react without npm and node?
Thank you.
https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.37.0/react-datepicker.min.css https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js https://unpkg.com/react-onclickoutside@5.7.1
https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.37.0/react-datepicker.js
class Application extends React.Component {
constructor(props){
super(props)
this.state = {date: moment()};
this.dateChanged = this.dateChanged.bind(this);
this.clear = this.clear.bind(this);
}
dateChanged(d){
this.setState({date: d});
}
clear(){
this.setState({date: null});
}
render() {
return (
<div>
<DatePicker selected={this.state.date}
onChange={this.dateChanged} />
<input type="button" onClick={this.clear} value="Clear"/>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('app'));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.