react with jquery code example
Example 1: jquery in react
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
Example 2: import library react js
// ---- REACT JS -----
// using
<link rel="shortcut icon" href="%PUBLIC_URL%/js/bootstrap.min.js"> </link>
<script src="%PUBLIC_URL%/js/bootstrap.min.js"> </script>
// public
// --- js
// ------ bootstrap.min.js
// --- css
// ------ bootstrap.min.css
Example 3: use javascript library in react
class MainView extends Component {
render() {
// don't render anything
return <div/>;
},
componentDidMount() {
// find the DOM node for this component
const node = ReactDOM.findDOMNode(this);
// widget does stuff
$(node).activateMyCoolWidget();
// start a new React render tree with widget node
ReactDOM.render(<div>{this.props.children}</div>, node);
}
});
Example 4: react in jquery
class SomePlugin extends React.Component {
componentDidMount() {
this.$el = $(this.el); this.$el.somePlugin(); }
componentWillUnmount() {
this.$el.somePlugin('destroy'); }
render() {
return <div ref={el => this.el = el} />; }
}