Integrate React with a JQuery app.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example1 README.md Apr 27, 2017
example2 Update readme.md May 6, 2017
example3 Update index.html Apr 27, 2017
README.md Update README.md May 6, 2017

README.md

JQuery to React

Example projects demonstrating a React component integrating with an existing JQuery web application.

Example 1

Example 1 (Demo) demonstrates a React component modifying an existing JQuery web application by using the $(this) context. The component is passed a reference to JQuery in its constructor.

ReactDOM.render(React.createElement(MyComponent, { context: $('body') }), document.getElementById('root'));
});

Example 2

Example 2 (Demo) demonstrates a React component modifying an existing JQuery web application through an intermediate manager class. The component is passed a reference to the class in its constructor. The component can make changes to web page elements, outside of its internal scope, through calls to the manager class.

ReactDOM.render(React.createElement(MyComponent, { context: UIManager }), document.getElementById('root'));
});

Example 3

Example 3 (Demo) demonstrates a React component changing its own UI elements depending on values from an existing JQuery web application. The component is passed a reference to a publisher/subscriber class in its constructor. The component can listen for events from the JQuery web application and update its own internal UI elements in response.

ReactDOM.render(React.createElement(MyComponent, { context: PubSubManager }), document.getElementById('root'));

// ...

// Subscribe to color events.
this.state.context.subscribe(this, this.onColor);

// ...

onColor(color, that) {
  // Event callback from JQuery app. Update the state value for color.
  that.setState({ color: color });
}

License

MIT

Author

Kory Becker http://www.primaryobjects.com/kory-becker