如何在react js中导入插件

Question

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.

Answer 1

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'));