{"id":21113972,"url":"https://github.com/bobiscool/reactdemo","last_synced_at":"2025-08-16T23:42:33.682Z","repository":{"id":126322299,"uuid":"71330800","full_name":"bobiscool/reactDemo","owner":"bobiscool","description":"最近学习react 一些练习","archived":false,"fork":false,"pushed_at":"2016-10-19T09:32:09.000Z","size":885,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-21T04:41:36.283Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/bobiscool.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":"2016-10-19T07:32:00.000Z","updated_at":"2016-10-19T09:32:10.000Z","dependencies_parsed_at":"2023-06-16T07:15:29.706Z","dependency_job_id":null,"html_url":"https://github.com/bobiscool/reactDemo","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/bobiscool%2FreactDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobiscool%2FreactDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobiscool%2FreactDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobiscool%2FreactDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bobiscool","download_url":"https://codeload.github.com/bobiscool/reactDemo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243560717,"owners_count":20310980,"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":[],"created_at":"2024-11-20T01:59:56.660Z","updated_at":"2025-03-14T10:26:29.170Z","avatar_url":"https://github.com/bobiscool.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This is a collection of simple demos of React.js.\n\nThese demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful library.\n\n## Related Projects\n\n- [Flux Demo](https://github.com/ruanyf/extremely-simple-flux-demo)\n- [Webpack Demos](https://github.com/ruanyf/webpack-demos)\n- [React Router Tutorial](https://github.com/reactjs/react-router-tutorial)\n- [CSS Modules Demos](https://github.com/ruanyf/css-modules-demos)\n- [React Testing Demo](https://github.com/ruanyf/react-testing-demo)\n- [A boilerplate for React-Babel-Webpack project](https://github.com/ruanyf/react-babel-webpack-boilerplate)\n\n## How to use\n\nFirst copy the repo into your disk.\n\n```bash\n$ git clone git@github.com:ruanyf/react-demos.git\n```\n\nThen play with the source files under the repo's demo* directories.\n\n## HTML Template\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"../build/react.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../build/react-dom.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../build/browser.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"example\"\u003e\u003c/div\u003e\n    \u003cscript type=\"text/babel\"\u003e\n\n      // ** Our code goes here! **\n\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Index\n\n1. [Render JSX](#demo01-render-jsx)\n1. [Use JavaScript in JSX](#demo02-use-javascript-in-jsx)\n1. [Use array in JSX](#demo03-use-array-in-jsx)\n1. [Define a component](#demo04-define-a-component)\n1. [this.props.children](#demo05-thispropschildren)\n1. [PropTypes](#demo06-proptypes)\n1. [Finding a DOM node](#demo07-finding-a-dom-node)\n1. [this.state](#demo08-thisstate)\n1. [Form](#demo09-form)\n1. [Component Lifecycle](#demo10-component-lifecycle)\n1. [Ajax](#demo11-ajax)\n1. [Display value from a Promise](#demo12-display-value-from-a-promise)\n1. [Server-side rendering](#demo13-server-side-rendering)\n\n---\n\n## Demo01: Render JSX\n\n[demo](http://ruanyf.github.io/react-demos/demo01/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo01/index.html)\n\nThe template syntax in React is called [JSX](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax). It is allowed in JSX to put HTML tags directly into JavaScript codes. `ReactDOM.render()` is the method which translates JSX into HTML, and renders it into the specified DOM node.\n\n```js\nReactDOM.render(\n  \u003ch1\u003eHello, world!\u003c/h1\u003e,\n  document.getElementById('example')\n);\n```\n\nAttention, you have to use `\u003cscript type=\"text/babel\"\u003e` to indicate JSX codes, and include `browser.min.js`, which is a [browser version](https://babeljs.io/docs/usage/browser/) of Babel and could be get inside a [babel-core@5](https://www.npmjs.com/package/babel-core) npm release, to actually perform the transformation in the browser.\n\nBefore v0.14, React use `JSTransform.js` to translate `\u003cscript type=\"text/jsx\"\u003e`. It has been deprecated ([more info](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html)).\n\n## Demo02: Use JavaScript in JSX\n\n[demo](http://ruanyf.github.io/react-demos/demo02/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo02/index.html)\n\nYou could also use JavaScript in JSX. It takes angle brackets (\u0026lt;) as the beginning of HTML syntax, and curly brackets (`{`) as the beginning of JavaScript syntax.\n\n```js\nvar names = ['Alice', 'Emily', 'Kate'];\n\nReactDOM.render(\n  \u003cdiv\u003e\n  {\n    names.map(function (name) {\n      return \u003cdiv\u003eHello, {name}!\u003c/div\u003e\n    })\n  }\n  \u003c/div\u003e,\n  document.getElementById('example')\n);\n```\n\n## Demo03: Use array in JSX\n\n[demo](http://ruanyf.github.io/react-demos/demo03/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo03/index.html)\n\nIf a JavaScript variable is an array, JSX will implicitly concat all members of the array.\n\n```js\nvar arr = [\n  \u003ch1\u003eHello world!\u003c/h1\u003e,\n  \u003ch2\u003eReact is awesome\u003c/h2\u003e,\n];\nReactDOM.render(\n  \u003cdiv\u003e{arr}\u003c/div\u003e,\n  document.getElementById('example')\n);\n```\n\n## Demo04: Define a component\n\n[demo](http://ruanyf.github.io/react-demos/demo04/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo04/index.html)\n\n`React.createClass()` creates a component class, which implements a render method to return an component instance of the class. You don't need to call `new` on the class in order to get an instance, just use it as a normal HTML tag.\n\n```javascript\nvar HelloMessage = React.createClass({\n  render: function() {\n    return \u003ch1\u003eHello {this.props.name}\u003c/h1\u003e;\n  }\n});\n\nReactDOM.render(\n  \u003cHelloMessage name=\"John\" /\u003e,\n  document.getElementById('example')\n);\n```\n\nComponents would have attributes, and you can use `this.props.[attribute]` to access them, just like `this.props.name` of `\u003cHelloMessage name=\"John\" /\u003e` is John.\n\nPlease remember the first letter of the component's name must be capitalized, otherwise React will throw an error. For instance, `HelloMessage` as a component's name is OK, but `helloMessage` is not allowed. And a React component should only have one top child node.\n\n```javascript\n// wrong\nvar HelloMessage = React.createClass({\n  render: function() {\n    return \u003ch1\u003e\n      Hello {this.props.name}\n    \u003c/h1\u003e\u003cp\u003e\n      some text\n    \u003c/p\u003e;\n  }\n});\n\n// correct\nvar HelloMessage = React.createClass({\n  render: function() {\n    return \u003cdiv\u003e\n      \u003ch1\u003eHello {this.props.name}\u003c/h1\u003e\n      \u003cp\u003esome text\u003c/p\u003e\n    \u003c/div\u003e;\n  }\n});\n```\n\n## Demo05: this.props.children\n\n[demo](http://ruanyf.github.io/react-demos/demo05/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo05/index.html)\n\nReact uses `this.props.children` to access a component's children nodes.\n\n```javascript\nvar NotesList = React.createClass({\n  render: function() {\n    return (\n      \u003col\u003e\n      {\n        React.Children.map(this.props.children, function (child) {\n          return \u003cli\u003e{child}\u003c/li\u003e;\n        })\n      }\n      \u003c/ol\u003e\n    );\n  }\n});\n\nReactDOM.render(\n  \u003cNotesList\u003e\n    \u003cspan\u003ehello\u003c/span\u003e\n    \u003cspan\u003eworld\u003c/span\u003e\n  \u003c/NotesList\u003e,\n  document.getElementById('example')\n);\n```\n\nPlease be mindful that the value of `this.props.children` has three possibilities. If the component has no children node, the value is `undefined`; If single children node, an object; If multiple children nodes, an array. You should be careful to handle it.\n\nReact gave us an utility [`React.Children`](https://facebook.github.io/react/docs/top-level-api.html#react.children) for dealing with the `this.props.children`'s opaque data structure. You could use `React.Children.map` to iterate `this.props.children` without worring its data type being `undefined` or `object`. Check [official document](https://facebook.github.io/react/docs/top-level-api.html#react.children) for more methods `React.Children` offers.\n\n## Demo06: PropTypes\n\n[demo](http://ruanyf.github.io/react-demos/demo06/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo06/index.html)\n\nComponents have many specific attributes which are called ”props” in React and can be of any type.\n\nSometimes you need a way to validate these props. You don't want users have the freedom to input anything into your components.\n\nReact has a solution for this and it's called PropTypes.\n\n```javascript\nvar MyTitle = React.createClass({\n  propTypes: {\n    title: React.PropTypes.string.isRequired,\n  },\n\n  render: function() {\n     return \u003ch1\u003e {this.props.title} \u003c/h1\u003e;\n   }\n});\n```\n\nThe above component of `MyTitle` has a props of `title`. PropTypes tells React that the title is required and its value should be a string.\n\nNow we give `Title` a number value.\n\n```javascript\nvar data = 123;\n\nReactDOM.render(\n  \u003cMyTitle title={data} /\u003e,\n  document.getElementById('example')\n);\n```\n\nIt means the props doesn't pass the validation, and the console will show you an error message.\n\n```bash\nWarning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.\n```\n\nVisit [official doc](http://facebook.github.io/react/docs/reusable-components.html) for more PropTypes options.\n\nP.S. If you want to give the props a default value, use `getDefaultProps()`.\n\n```javascript\nvar MyTitle = React.createClass({\n  getDefaultProps : function () {\n    return {\n      title : 'Hello World'\n    };\n  },\n\n  render: function() {\n     return \u003ch1\u003e {this.props.title} \u003c/h1\u003e;\n   }\n});\n\nReactDOM.render(\n  \u003cMyTitle /\u003e,\n  document.getElementById('example')\n);\n```\n\n## Demo07: Finding a DOM node\n\n[demo](http://ruanyf.github.io/react-demos/demo07/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo07/index.html)\n\nSometimes you need to reference a DOM node in a component. React gives you the `ref` attribute to find it.\n\n```js\nvar MyComponent = React.createClass({\n  handleClick: function() {\n    this.refs.myTextInput.focus();\n  },\n  render: function() {\n    return (\n      \u003cdiv\u003e\n        \u003cinput type=\"text\" ref=\"myTextInput\" /\u003e\n        \u003cinput type=\"button\" value=\"Focus the text input\" onClick={this.handleClick} /\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n\nReactDOM.render(\n  \u003cMyComponent /\u003e,\n  document.getElementById('example')\n);\n```\n\nThe desired DOM node should have a `ref` attribute, and `this.refs.[refName]` would return the corresponding DOM node. Please be mindful that you could do that only after this component has been mounted into the DOM, otherwise you get `null`.\n\n## Demo08: this.state\n\n[demo](http://ruanyf.github.io/react-demos/demo08/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo08/index.html)\n\nReact thinks of component as state machines, and uses `this.state` to hold component's state, `getInitialState()` to initialize `this.state`(invoked before a component is mounted), `this.setState()` to update `this.state` and re-render the component.\n\n```js\nvar LikeButton = React.createClass({\n  getInitialState: function() {\n    return {liked: false};\n  },\n  handleClick: function(event) {\n    this.setState({liked: !this.state.liked});\n  },\n  render: function() {\n    var text = this.state.liked ? 'like' : 'haven\\'t liked';\n    return (\n      \u003cp onClick={this.handleClick}\u003e\n        You {text} this. Click to toggle.\n      \u003c/p\u003e\n    );\n  }\n});\n\nReactDOM.render(\n  \u003cLikeButton /\u003e,\n  document.getElementById('example')\n);\n```\n\nYou could use component attributes to register event handlers, just like `onClick`, `onKeyDown`, `onCopy`, etc. Official Document has all [supported events](http://facebook.github.io/react/docs/events.html#supported-events).\n\n## Demo09: Form\n\n[demo](http://ruanyf.github.io/react-demos/demo09/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo09/index.html)\n\nAccording to React's design philosophy, `this.state` describes the state of component and is mutated via user interactions, and `this.props` describes the properties of component and is stable and immutable.\n\nSince that, the `value` attribute of Form components, such as \u0026lt;input\u0026gt;, \u0026lt;textarea\u0026gt;, and \u0026lt;option\u0026gt;, is unaffected by any user input. If you wanted to access or update the value in response to user input, you could use the onChange event.\n\n```js\nvar Input = React.createClass({\n  getInitialState: function() {\n    return {value: 'Hello!'};\n  },\n  handleChange: function(event) {\n    this.setState({value: event.target.value});\n  },\n  render: function () {\n    var value = this.state.value;\n    return (\n      \u003cdiv\u003e\n        \u003cinput type=\"text\" value={value} onChange={this.handleChange} /\u003e\n        \u003cp\u003e{value}\u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n\nReactDOM.render(\u003cInput/\u003e, document.getElementById('example'));\n```\n\nMore information on [official document](http://facebook.github.io/react/docs/forms.html).\n\n## Demo10: Component Lifecycle\n\n[demo](http://ruanyf.github.io/react-demos/demo10/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo10/index.html)\n\nComponents have three main parts of [their lifecycle](https://facebook.github.io/react/docs/working-with-the-browser.html#component-lifecycle): Mounting(being inserted into the DOM), Updating(being re-rendered) and Unmounting(being removed from the DOM). React provides hooks into these lifecycle part. `will` methods are called right before something happens, and `did` methods which are called right after something happens.\n\n```js\nvar Hello = React.createClass({\n  getInitialState: function () {\n    return {\n      opacity: 1.0\n    };\n  },\n\n  componentDidMount: function () {\n    this.timer = setInterval(function () {\n      var opacity = this.state.opacity;\n      opacity -= .05;\n      if (opacity \u003c 0.1) {\n        opacity = 1.0;\n      }\n      this.setState({\n        opacity: opacity\n      });\n    }.bind(this), 100);\n  },\n\n  render: function () {\n    return (\n      \u003cdiv style={{opacity: this.state.opacity}}\u003e\n        Hello {this.props.name}\n      \u003c/div\u003e\n    );\n  }\n});\n\nReactDOM.render(\n  \u003cHello name=\"world\"/\u003e,\n  document.getElementById('example')\n);\n```\n\nThe following is [a whole list of lifecycle methods](http://facebook.github.io/react/docs/component-specs.html#lifecycle-methods).\n\n- **componentWillMount()**: Fired once, before initial rendering occurs. Good place to wire-up message listeners. `this.setState` doesn't work here.\n- **componentDidMount()**: Fired once, after initial rendering occurs. Can use `this.getDOMNode()`.\n- **componentWillUpdate(object nextProps, object nextState)**: Fired after the component's updates are made to the DOM. Can use `this.getDOMNode()` for updates.\n- **componentDidUpdate(object prevProps, object prevState)**: Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated.\n- **componentWillUnmount()**: Fired immediately before a component is unmounted from the DOM. Good place to remove message listeners or general clean up.\n- **componentWillReceiveProps(object nextProps)**: Fired when a component is receiving new props. You might want to `this.setState` depending on the props.\n- **shouldComponentUpdate(object nextProps, object nextState)**: Fired before rendering when new props or state are received. `return false` if you know an update isn't needed.\n\n## Demo11: Ajax\n\n[demo](http://ruanyf.github.io/react-demos/demo11/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo11/index.html)\n\nHow to get the data of a component from a server or an API provider? The answer is using Ajax to fetch data in the event handler of `componentDidMount`. When the server response arrives, store the data with `this.setState()` to trigger a re-render of your UI.\n\n```js\nvar UserGist = React.createClass({\n  getInitialState: function() {\n    return {\n      username: '',\n      lastGistUrl: ''\n    };\n  },\n\n  componentDidMount: function() {\n    $.get(this.props.source, function(result) {\n      var lastGist = result[0];\n      if (this.isMounted()) {\n        this.setState({\n          username: lastGist.owner.login,\n          lastGistUrl: lastGist.html_url\n        });\n      }\n    }.bind(this));\n  },\n\n  render: function() {\n    return (\n      \u003cdiv\u003e\n        {this.state.username}'s last gist is\n        \u003ca href={this.state.lastGistUrl}\u003ehere\u003c/a\u003e.\n      \u003c/div\u003e\n    );\n  }\n});\n\nReactDOM.render(\n  \u003cUserGist source=\"https://api.github.com/users/octocat/gists\" /\u003e,\n  document.getElementById('example')\n);\n```\n\n## Demo12: Display value from a Promise\n\n[demo](http://ruanyf.github.io/react-demos/demo12/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo12/index.html)\n\nThis demo is inspired by Nat Pryce's article [\"Higher Order React Components\"](http://natpryce.com/articles/000814.html).\n\nIf a React component's data is received asynchronously, we can use a Promise object as the component's property also, just as the following.\n\n```javascript\nReactDOM.render(\n  \u003cRepoList\n    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript\u0026sort=stars')}\n  /\u003e,\n  document.getElementById('example')\n);\n```\n\nThe above code takes data from Github's API, and the `RepoList` component gets a Promise object as its property.\n\nNow, while the promise is pending, the component displays a loading indicator. When the promise is resolved successfully, the component displays a list of repository information. If the promise is rejected, the component displays an error message.\n\n```javascript\nvar RepoList = React.createClass({\n  getInitialState: function() {\n    return { loading: true, error: null, data: null};\n  },\n\n  componentDidMount() {\n    this.props.promise.then(\n      value =\u003e this.setState({loading: false, data: value}),\n      error =\u003e this.setState({loading: false, error: error}));\n  },\n\n  render: function() {\n    if (this.state.loading) {\n      return \u003cspan\u003eLoading...\u003c/span\u003e;\n    }\n    else if (this.state.error !== null) {\n      return \u003cspan\u003eError: {this.state.error.message}\u003c/span\u003e;\n    }\n    else {\n      var repos = this.state.data.items;\n      var repoList = repos.map(function (repo) {\n        return (\n          \u003cli\u003e\n            \u003ca href={repo.html_url}\u003e{repo.name}\u003c/a\u003e ({repo.stargazers_count} stars) \u003cbr/\u003e {repo.description}\n          \u003c/li\u003e\n        );\n      });\n      return (\n        \u003cmain\u003e\n          \u003ch1\u003eMost Popular JavaScript Projects in Github\u003c/h1\u003e\n          \u003col\u003e{repoList}\u003c/ol\u003e\n        \u003c/main\u003e\n      );\n    }\n  }\n});\n```\n\n## Demo13: Server-side rendering\n\n[source](https://github.com/ruanyf/react-demos/tree/master/demo13/src)\n\nThis demo is copied from [github.com/mhart/react-server-example](https://github.com/mhart/react-server-example), but I rewrote it with JSX syntax.\n\n```bash\n# install the dependencies in demo13 directory\n$ npm install\n\n# translate all jsx file in src subdirectory to js file\n$ npm run build\n\n# launch http server\n$ node server.js\n```\n\n## Extras\n\n### Precompiling JSX\n\nAll above demos don't use JSX compilation for clarity. In production environment, ensure to precompile JSX files before putting them online.\n\nFirst, install the command-line tools [Babel](https://babeljs.io/docs/usage/cli/).\n\n```bash\n$ npm install -g babel\n```\n\nThen precompile your JSX files(.jsx) into JavaScript(.js). Compiling the entire src directory and output it to the build directory, you may use the option `--out-dir` or `-d`.\n\n```bash\n$ babel src --out-dir build\n```\n\nPut the compiled JS files into HTML.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eHello React!\u003c/title\u003e\n    \u003cscript src=\"build/react.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"build/react-dom.js\"\u003e\u003c/script\u003e\n    \u003c!-- No need for Browser.js! --\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"example\"\u003e\u003c/div\u003e\n    \u003cscript src=\"build/helloworld.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Useful links\n\n- [React's official site](http://facebook.github.io/react)\n- [React's official examples](https://github.com/facebook/react/tree/master/examples)\n- [React (Virtual) DOM Terminology](http://facebook.github.io/react/docs/glossary.html), by Sebastian Markbåge\n- [The React Quick Start Guide](http://www.jackcallister.com/2015/01/05/the-react-quick-start-guide.html), by Jack Callister\n- [Learning React.js: Getting Started and Concepts](https://scotch.io/tutorials/learning-react-getting-started-and-concepts), by Ken Wheeler\n- [Getting started with React](http://ryanclark.me/getting-started-with-react), by Ryan Clark\n- [React JS Tutorial and Guide to the Gotchas](https://zapier.com/engineering/react-js-tutorial-guide-gotchas/), by Justin Deal\n- [React Primer](https://github.com/BinaryMuse/react-primer), by Binary Muse\n- [jQuery versus React.js thinking](http://blog.zigomir.com/react.js/jquery/2015/01/11/jquery-versus-react-thinking.html), by zigomir\n\n## License\n\nBSD licensed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobiscool%2Freactdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbobiscool%2Freactdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobiscool%2Freactdemo/lists"}