0

I have to use a complex and ready to use component developed using jQuery v2.2.4, javascript html and css inside one of my react pages, because its a fairly huge component with lots of features it really doesn't make sense for us to redevelop this inside react and make it reacty.
So my question is how can i use this inside react?
I simply want to render this component in the middle of my page, whats the best way to do this?, i'm a bit new to this and i don't know where to start.
This is the index.html which calls upon the said component, i thought maybe it helps in someway ?

<!DOCTYPE html>
<html>
<haed>
    <title>Test</title>
</haed>
<body>
    <link href="ol.css" rel="stylesheet" type="text/css" />
    <link href="ls.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js"></script>
    <script src="ol.js"></script>
    <script src="ls.js"></script>
    <script src="wss_map.js"></script>
    <div id="map" style="width: 100%; height: 500px;"></div>
<script>
    var i = 0;
    var mp=$("#map").wssmap({
        maps: [
            {
                name: 'm2',
                type: 'osm',
                order: 0,   
                zoomrange: { min: 0, max: 19 },
                visible: true,
            }
        ],
        onClick:function(point) {
            i++;
            var options= {
                longitude:point.longitude,
                latitude:point.latitude,
                label:i
            }
            mp.addMarker(options);
        },
        zoom:10
    });
    var marker=mp.addMarker({ longitude: 51.404343, latitude: 35.715298,label:'Testcase'});
</script>
</body>
</html>

Thanks.

Ali Ahmadi
  • 701
  • 6
  • 27
  • i'd advise against this. like there isn't any reason to do this. but if you must, you should place it componentDidMount() { // place here } or in your useEffect(()=>{ // here },[]) – Rogelio Nov 14 '19 at 08:24
  • Simple answer is you cannot use. There are lots of third party react components you can replace your jquery component with one of them – mstfyldz Nov 14 '19 at 08:24
  • @mstfyldz But this component was developed for a certain client and is really specific to their needs and has lots of feature made simply for that client, creating this in react will take a fair amount of time and resources, plus this is a working component, is there really no option to load this component inside a react page? – Ali Ahmadi Nov 14 '19 at 08:27
  • 1
    here is a better explanation on how to implement it https://stackoverflow.com/questions/38518278/how-to-use-jquery-with-reactjs – Rogelio Nov 14 '19 at 08:29

1 Answers1

1

Just follow this instructions:

1: install JQuery via npm : npm install jquery --save

2: import $ from Jquery on top of you react component file: import $ from 'jquery';

3: now you can call your JQuery component on maybe React componentDidMount()

  componentDidMount() {
    var mp=$("#map").wssmap({ ... })
  }
Alireza Esfahani
  • 701
  • 7
  • 16
  • Can you take a look at the `demo.js` inisde https://codesandbox.io/s/mutable-forest-2475y?fontsize=14&hidenavigation=1&theme=dark , am i importing the `js` files correctly ?, you can use the html in my question for comparison – Ali Ahmadi Nov 14 '19 at 08:45
  • No, you must remove `import "./jquery.min.js";` line , right? – Alireza Esfahani Nov 14 '19 at 09:17
  • To be honest i have never used anything outside of `reactjs`, so i don't have any experience with `jQuery` or etc, so i am not sure which line should be removed or imported, is it possible for you to help me with correctly loading this component? maybe using an example?, thank you. – Ali Ahmadi Nov 14 '19 at 09:21