{"id":17998312,"url":"https://github.com/primaryobjects/jquery-react","last_synced_at":"2025-08-22T08:02:52.700Z","repository":{"id":139343249,"uuid":"89614301","full_name":"primaryobjects/jquery-react","owner":"primaryobjects","description":"Integrate React with a JQuery app.","archived":false,"fork":false,"pushed_at":"2017-05-06T01:43:59.000Z","size":9,"stargazers_count":20,"open_issues_count":0,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-21T06:41:34.992Z","etag":null,"topics":["bootstrap","html5","javascript","jquery","pub-sub","pubsub","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/primaryobjects.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-27T15:46:25.000Z","updated_at":"2023-03-11T12:19:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"17220fae-5079-455e-83c6-da0fd2f40d21","html_url":"https://github.com/primaryobjects/jquery-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/primaryobjects%2Fjquery-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/primaryobjects%2Fjquery-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/primaryobjects%2Fjquery-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/primaryobjects%2Fjquery-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/primaryobjects","download_url":"https://codeload.github.com/primaryobjects/jquery-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245589267,"owners_count":20640255,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","html5","javascript","jquery","pub-sub","pubsub","react","reactjs"],"created_at":"2024-10-29T21:24:54.962Z","updated_at":"2025-03-26T04:31:51.050Z","avatar_url":"https://github.com/primaryobjects.png","language":"HTML","readme":"JQuery to React\n===============\n\nExample projects demonstrating a React component integrating with an existing JQuery web application.\n\n### Example 1\n\n[Example 1](/example1) ([Demo](http://primaryobjects.github.io/jquery-react/example1/index.html)) 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.\n\n```javascript\nReactDOM.render(React.createElement(MyComponent, { context: $('body') }), document.getElementById('root'));\n});\n```\n\n### Example 2\n\n[Example 2](/example2) ([Demo](http://primaryobjects.github.io/jquery-react/example2/index.html)) 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.\n\n```javascript\nReactDOM.render(React.createElement(MyComponent, { context: UIManager }), document.getElementById('root'));\n});\n```\n\n### Example 3\n\n[Example 3](/example3) ([Demo](http://primaryobjects.github.io/jquery-react/example3/index.html)) 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.\n\n```javascript\nReactDOM.render(React.createElement(MyComponent, { context: PubSubManager }), document.getElementById('root'));\n\n// ...\n\n// Subscribe to color events.\nthis.state.context.subscribe(this, this.onColor);\n\n// ...\n\nonColor(color, that) {\n  // Event callback from JQuery app. Update the state value for color.\n  that.setState({ color: color });\n}\n```\n\n## License\n\nMIT\n\n## Author\n\nKory Becker\nhttp://www.primaryobjects.com/kory-becker\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprimaryobjects%2Fjquery-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprimaryobjects%2Fjquery-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprimaryobjects%2Fjquery-react/lists"}