I try to convert this jquery code into the react js format but i don't have any idea how i achi-CodePudding

how can I use jquery in react js

<script>
    $('#demo').daterangepicker({
        "startDate": "01/21/2023",
        "endDate": "01/27/2023"
    }, function(start, end, label) {
      console.log('New date range selected: '   start.format('YYYY-MM-DD')   ' to '   end.format('YYYY-MM-DD')   ' (predefined range: '   label   ')');
    });
</script>

CodePudding user response：

Go to your project folder via terminal and run these commands

npm install jquery --save
npm i --save-dev @types/jquery

Use import $ from jquery into your JSX file where you need to use. your main.jsx file will be like this

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';


//   react code here


$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: "   data   "\nStatus: "   status);
    });
});

// react code here

and your index.html will be like this

<!DOCTYPE html>
<html>
<head>
    <script src="main.jsx"></script>
</head>
<body>
    //your code
</body>
</html>

Reference

CodePudding user response：

Converting jQuery code to React.js can be a bit of a process, as the two libraries have different concepts and approaches. Here is a general outline of the steps you can take to convert jQuery code to React.js:

Understand the core concepts of React.js, such as components, state, and props.
Identify the elements and functionality in your jQuery code that you want to convert to React.js.
Create new React components for each element or group of elements that you identified in step 2.
Replace any jQuery selectors in your code with React refs or findDOMNode to access the underlying DOM elements.
Replace any jQuery event handlers with React's onClick, onChange, and other event handlers.
Replace any jQuery DOM manipulation with React's setState and render methods.
Re-implement any jQuery utility functions using vanilla JavaScript or a utility library that works with React.

Test your React.js code to make sure it works as expected.

Repeat steps 2-8 for any remaining jQuery code that you want to convert to React.js.

Please note that this is a general outline and depending on your requirements, you may need to add or remove steps. Additionally, depending on the size of your project, you might need to use different libraries and tools to handle state management, routing, form handling, and many other features.

It's always good to take a look at the documentation of React and other libraries you are using, and also to check other open-source projects that are similar to the one you are building, to have a better understanding of the architecture, design patterns and best practices.