how to import plugin in 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.

If you install the "react-datepicker" package using npm i react-datepicker, the package will be downloaded to he node_modules folder of the project. You can then, import the react-datepicker and use in the files. — Praveen Jaya Kumar Ramesh
– Praveen Jaya Kumar Ramesh, Commented Feb 3, 2020 at 13:12
@Praveen - There was some other issue. Now import is working fine but I am getting another issue. Inline Babel script:3 Uncaught ReferenceError: require is not defined — Tariq Husain
– Tariq Husain, Commented Feb 3, 2020 at 13:20
require is not installed then. Try installing it using, npm i require. — Praveen Jaya Kumar Ramesh
– Praveen Jaya Kumar Ramesh, Commented Feb 3, 2020 at 13:37

kimo_ouz · Accepted Answer · 2020-02-03 14:19:34Z

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/[email protected]
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'));

answered Feb 3, 2020 at 14:19

kimo_ouz

4096 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kimo_ouz Over a year ago

but its better to work with gulp or webpack bro for beautifull code

Tariq Husain Over a year ago

this is not working with latest react file <script crossorigin src="unpkg.com/react@16/umd/react.production.min.js"></…> <script crossorigin src="unpkg.com/react-dom@16/umd/…>

kimo_ouz Over a year ago

you should install some kind of package manager i recomend you yarnpkg.com it's will make your life easy. after installing it download this github.com/hekar/react-gulp-starter and work in src file as you want. if you done you can do just a commend "yarn build" or "gulp build" and for devloppment process u can do "yarn default" o "gulp default"

kimo_ouz Over a year ago

about your last question of latest version of react production ; yes it will work but with the latest version of react dom also; some times packages does't support eachother after updates . and this is the job of packages manager .

Collectives™ on Stack Overflow

how to import plugin in react js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related