[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3273":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":14,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":14,"lastSyncTime":26,"discoverSource":27},3273,"react-demos","ruanyf\u002Freact-demos","ruanyf","a collection of simple demos of React.js",null,"JavaScript",16473,6265,1051,2,0,1,3,70.3,false,"master",true,[],"2026-06-12 04:00:17","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:\u002F\u002Fgithub.com\u002Fruanyf\u002Fextremely-simple-flux-demo)\n- [Webpack Demos](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Fwebpack-demos)\n- [React Router Tutorial](https:\u002F\u002Fgithub.com\u002Freactjs\u002Freact-router-tutorial)\n- [CSS Modules Demos](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Fcss-modules-demos)\n- [React Testing Demo](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-testing-demo)\n- [A boilerplate for React-Babel-Webpack project](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-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\u002Freact-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>\n\u003Chtml>\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\" \u002F>\n    \u003Cscript src=\"..\u002Fbuild\u002Freact.development.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"..\u002Fbuild\u002Freact-dom.development.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"..\u002Fbuild\u002Fbabel.min.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv id=\"example\">\u003C\u002Fdiv>\n    \u003Cscript type=\"text\u002Fbabel\">\n\n      \u002F\u002F ** Our code goes here! **\n\n    \u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\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:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo01\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo01\u002Findex.html)\n\nThe template syntax in React is called [JSX](http:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fdisplaying-data.html#jsx-syntax). JSX allows you to use HTML tags in JavaScript code. `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>Hello, world!\u003C\u002Fh1>,\n  document.getElementById('example')\n);\n```\n\nTo actually perform the transformation in the browser, you must use `\u003Cscript type=\"text\u002Fbabel\">` to indicate JSX code, and include `babel.min.js`, which is a [browser version](https:\u002F\u002Fbabeljs.io\u002Fdocs\u002Fusage\u002Fbrowser\u002F) of Babel and can be found in the [babel-core@6](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fbabel-core) npm release.\n\nBefore v0.14, React used `JSTransform.js` to translate `\u003Cscript type=\"text\u002Fjsx\">`, but this is now deprecated ([more info](https:\u002F\u002Ffacebook.github.io\u002Freact\u002Fblog\u002F2015\u002F06\u002F12\u002Fdeprecating-jstransform-and-react-tools.html)).\n\n## Demo02: Use JavaScript in JSX\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo02\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo02\u002Findex.html)\n\nYou can also use JavaScript within JSX. Angle brackets (<) symbolize the beginning of HTML syntax, while curly brackets (`{`) represent the beginning of JavaScript syntax.\n\n```js\nvar names = ['Alice', 'Emily', 'Kate'];\n\nReactDOM.render(\n  \u003Cdiv>\n  {\n    names.map(function (name) {\n      return \u003Cdiv>Hello, {name}!\u003C\u002Fdiv>\n    })\n  }\n  \u003C\u002Fdiv>,\n  document.getElementById('example')\n);\n```\n\n## Demo03: Use array in JSX\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo03\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo03\u002Findex.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>Hello world!\u003C\u002Fh1>,\n  \u003Ch2>React is awesome\u003C\u002Fh2>,\n];\nReactDOM.render(\n  \u003Cdiv>{arr}\u003C\u002Fdiv>,\n  document.getElementById('example')\n);\n```\n\n## Demo04: Define a component\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo04\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo04\u002Findex.html)\n\n\n\n`class ComponentName extends React.Component` creates a component class, which implements a render method to return a component instance of the class.\n\nBefore v16.0, React used `React.createClass()` to create a component class, but this is now deprecated ([more info](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Fblob\u002Fmaster\u002FCHANGELOG.md#removed-deprecations)).\n\n```javascript\nclass HelloMessage extends React.Component {\n  render() {\n    return \u003Ch1>Hello {this.props.name}\u003C\u002Fh1>;\n  }\n}\n\nReactDOM.render(\n  \u003CHelloMessage name=\"John\" \u002F>,\n  document.getElementById('example')\n);\n```\n\nYou can use `this.props.[attribute]` to access the attributes of a component. Example: `this.props.name` of `\u003CHelloMessage name=\"John\" \u002F>` 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\u002F\u002F wrong\nclass HelloMessage extends React.Component {\n  render() {\n    return \u003Ch1>\n      Hello {this.props.name}\n    \u003C\u002Fh1>\u003Cp>\n      some text\n    \u003C\u002Fp>;\n  }\n}\n\n\u002F\u002F correct\nclass HelloMessage extends React.Component {\n  render() {\n    return \u003Cdiv>\n      \u003Ch1>Hello {this.props.name}\u003C\u002Fh1>\n      \u003Cp>some text\u003C\u002Fp>\n    \u003C\u002Fdiv>;\n  }\n}\n```\n\n## Demo05: this.props.children\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo05\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo05\u002Findex.html)\n\nReact uses `this.props.children` to access a component's children nodes.\n\n```javascript\nclass NotesList extends React.Component {\n  render() {\n    return (\n      \u003Col>\n      {\n        React.Children.map(this.props.children, function (child) {\n          return \u003Cli>{child}\u003C\u002Fli>;\n        })\n      }\n      \u003C\u002Fol>\n    );\n  }\n}\n\nReactDOM.render(\n  \u003CNotesList>\n    \u003Cspan>hello\u003C\u002Fspan>\n    \u003Cspan>world\u003C\u002Fspan>\n  \u003C\u002FNotesList>,\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 child node, the value is `undefined`; If it has a single child node, the value will be an object; If it has multiple children nodes, the result is an array. Keep this in mind as you code.\n\nReact gave us a utility [`React.Children`](https:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Ftop-level-api.html#react.children) for dealing with the opaque data structure of `this.props.children`. You can use `React.Children.map` to iterate `this.props.children` without worrying if its data type is `undefined` or `object`. Check [official document](https:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Ftop-level-api.html#react.children) for more methods `React.Children` offers.\n\n## Demo06: PropTypes\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo06\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo06\u002Findex.html)\n\nComponents in React have many specific attributes which are called `props` 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\nclass MyTitle extends React.Component {\n  static propTypes = {\n    title: PropTypes.string.isRequired,\n  }\n  render() {\n    return \u003Ch1> {this.props.title} \u003C\u002Fh1>;\n  }\n}\n```\n\nThe above component `MyTitle` has a prop 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} \u002F>,\n  document.getElementById('example')\n);\n```\n\nHere, the prop 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](https:\u002F\u002Freactjs.org\u002Fdocs\u002Ftypechecking-with-proptypes.html) for more PropTypes options.\n\nP.S. If you want to give the props a default value, use `defaultProps`.\n\n```javascript\nclass MyTitle extends React.Component {\n  constructor(props) {\n    super(props)\n  }\n  static defaultProps = {\n    title: 'Hello World',\n  }\n  render() {\n    return \u003Ch1> {this.props.title} \u003C\u002Fh1>;\n  }\n}\n\nReactDOM.render(\n  \u003CMyTitle \u002F>,\n  document.getElementById('example')\n);\n```\n\nReact.PropTypes has moved into a different package since React v15.5. ([more info](https:\u002F\u002Freactjs.org\u002Fdocs\u002Ftypechecking-with-proptypes.html)).\n\n## Demo07: Finding a DOM node\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo07\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo07\u002Findex.html)\n\nSometimes you need to reference a DOM node in a component. React gives you the `ref` attribute to attach a DOM node to instance created by `React.createRef()`.\n\n\n```js\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.myTextInput = React.createRef();\n    this.handleClick = this.handleClick.bind(this)\n  }\n  handleClick() {\n    this.myTextInput.current.focus();\n  }\n  render() {\n    return (\n      \u003Cdiv>\n        \u003Cinput type=\"text\" ref={this.myTextInput} \u002F>\n        \u003Cinput type=\"button\" value=\"Focus the text input\" onClick={this.handleClick} \u002F>\n      \u003C\u002Fdiv>\n    );\n  }\n}\n\nReactDOM.render(\n  \u003CMyComponent \u002F>,\n  document.getElementById('example')\n);\n```\n\nPlease 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:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo08\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo08\u002Findex.html)\n\nReact thinks of component as state machines, and uses `this.state` to hold component's state, `this.setState()` to update `this.state` and re-render the component.\n\n```js\nclass LikeButton extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n    \tliked: false\n    }\n    this.handleClick = this.handleClick.bind(this)\n  }\n  handleClick(event) {\n    this.setState({ liked: !this.state.liked });\n  }\n  render() {\n    var text = this.state.liked ? 'like' : 'haven\\'t liked';\n    return (\n      \u003Cp onClick={this.handleClick}>\n        You {text} this. Click to toggle.\n      \u003C\u002Fp>\n    );\n  }\n}\n\nReactDOM.render(\n  \u003CLikeButton \u002F>,\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:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fevents.html#supported-events).\n\n## Demo09: Form\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo09\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo09\u002Findex.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 <input>, <textarea>, and <option>, 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\nclass Input extends React.Component {\nconstructor(props) {\n  super(props)\n  this.state = {value: 'Hello!'}\n  this.handleChange = this.handleChange.bind(this)\n}\nhandleChange(event) {\n  this.setState({value: event.target.value});\n}\nrender() {\n  var value = this.state.value;\n  return (\n    \u003Cdiv>\n      \u003Cinput type=\"text\" value={value} onChange={this.handleChange} \u002F>\n      \u003Cp>{value}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  );\n}\n}\n\nReactDOM.render(\u003CInput\u002F>, document.getElementById('example'));\n```\n\nMore information on [official document](http:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fforms.html).\n\n## Demo10: Component Lifecycle\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo10\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo10\u002Findex.html)\n\nComponents have three main parts of [their lifecycle](https:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fworking-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\nclass Hello extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {opacity: 1.0};\n  }\n\n  componentDidMount() {\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() {\n    return (\n      \u003Cdiv style={{opacity: this.state.opacity}}>\n        Hello {this.props.name}\n      \u003C\u002Fdiv>\n    );\n  }\n}\n\nReactDOM.render(\n  \u003CHello name=\"world\"\u002F>,\n  document.getElementById('example')\n);\n```\n\nThe following is [a whole list of lifecycle methods](http:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fcomponent-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:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo11\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo11\u002Findex.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\nclass UserGist extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      username: '',\n      lastGistUrl: ''\n    };\n  }\n\n  componentDidMount() {\n    $.get(this.props.source, function(result) {\n      var lastGist = result[0];\n      this.setState({\n        username: lastGist.owner.login,\n        lastGistUrl: lastGist.html_url\n      });\n    }.bind(this));\n  }\n\n  render() {\n    return (\n      \u003Cdiv>\n        {this.state.username}'s last gist is\n        \u003Ca href={this.state.lastGistUrl}>here\u003C\u002Fa>.\n      \u003C\u002Fdiv>\n    );\n  }\n}\n\nReactDOM.render(\n  \u003CUserGist source=\"https:\u002F\u002Fapi.github.com\u002Fusers\u002Foctocat\u002Fgists\" \u002F>,\n  document.getElementById('example')\n);\n```\n\n## Demo12: Display value from a Promise\n\n[demo](http:\u002F\u002Fruanyf.github.io\u002Freact-demos\u002Fdemo12\u002F) \u002F [source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Fblob\u002Fmaster\u002Fdemo12\u002Findex.html)\n\nThis demo is inspired by Nat Pryce's article [\"Higher Order React Components\"](http:\u002F\u002Fnatpryce.com\u002Farticles\u002F000814.html).\n\nIf a React component's data is received asynchronously, we can also use a Promise object as the component's property, as follows.\n\n```javascript\nReactDOM.render(\n  \u003CRepoList promise={$.getJSON('https:\u002F\u002Fapi.github.com\u002Fsearch\u002Frepositories?q=javascript&sort=stars')} \u002F>,\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\nclass RepoList extends React.Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      loading: true,\n      error: null,\n      data: null\n    };\n  }\n\n  componentDidMount() {\n    this.props.promise.then(\n      value => this.setState({loading: false, data: value}),\n      error => this.setState({loading: false, error: error}));\n  }\n\n  render() {\n    if (this.state.loading) {\n      return \u003Cspan>Loading...\u003C\u002Fspan>;\n    }\n    else if (this.state.error !== null) {\n      return \u003Cspan>Error: {this.state.error.message}\u003C\u002Fspan>;\n    }\n    else {\n      var repos = this.state.data.items;\n      var repoList = repos.map(function (repo, index) {\n        return (\n          \u003Cli key={index}>\u003Ca href={repo.html_url}>{repo.name}\u003C\u002Fa> ({repo.stargazers_count} stars) \u003Cbr\u002F> {repo.description}\u003C\u002Fli>\n        );\n      });\n      return (\n        \u003Cmain>\n          \u003Ch1>Most Popular JavaScript Projects in Github\u003C\u002Fh1>\n          \u003Col>{repoList}\u003C\u002Fol>\n        \u003C\u002Fmain>\n      );\n    }\n  }\n}\n```\n\n## Demo13: Server-side rendering\n\n[source](https:\u002F\u002Fgithub.com\u002Fruanyf\u002Freact-demos\u002Ftree\u002Fmaster\u002Fdemo13\u002Fsrc)\n\nThis demo is copied from [github.com\u002Fmhart\u002Freact-server-example](https:\u002F\u002Fgithub.com\u002Fmhart\u002Freact-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:\u002F\u002Fbabeljs.io\u002Fdocs\u002Fusage\u002Fcli\u002F).\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>\n\u003Chtml>\n  \u003Chead>\n    \u003Ctitle>Hello React!\u003C\u002Ftitle>\n    \u003Cscript src=\"build\u002Freact.js\">\u003C\u002Fscript>\n    \u003Cscript src=\"build\u002Freact-dom.js\">\u003C\u002Fscript>\n    \u003C!-- No need for Browser.js! -->\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cdiv id=\"example\">\u003C\u002Fdiv>\n    \u003Cscript src=\"build\u002Fhelloworld.js\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n## Useful links\n\n- [React's official site](http:\u002F\u002Ffacebook.github.io\u002Freact)\n- [React's official examples](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Freact\u002Ftree\u002Fmaster\u002Fexamples)\n- [React (Virtual) DOM Terminology](http:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fglossary.html), by Sebastian Markbåge\n- [The React Quick Start Guide](http:\u002F\u002Fwww.jackcallister.com\u002F2015\u002F01\u002F05\u002Fthe-react-quick-start-guide.html), by Jack Callister\n- [Learning React.js: Getting Started and Concepts](https:\u002F\u002Fscotch.io\u002Ftutorials\u002Flearning-react-getting-started-and-concepts), by Ken Wheeler\n- [Getting started with React](http:\u002F\u002Fryanclark.me\u002Fgetting-started-with-react), by Ryan Clark\n- [React JS Tutorial and Guide to the Gotchas](https:\u002F\u002Fzapier.com\u002Fengineering\u002Freact-js-tutorial-guide-gotchas\u002F), by Justin Deal\n- [React Primer](https:\u002F\u002Fgithub.com\u002FBinaryMuse\u002Freact-primer), by Binary Muse\n- [jQuery versus React.js thinking](http:\u002F\u002Fblog.zigomir.com\u002Freact.js\u002Fjquery\u002F2015\u002F01\u002F11\u002Fjquery-versus-react-thinking.html), by zigomir\n\n## License\n\nBSD licensed\n","这是一个React.js的简单示例集合。项目通过一系列简洁明了的代码示例来展示React的基本特性和用法，包括JSX语法、组件定义、状态管理以及表单处理等核心功能，并且每个示例都配有详细的说明文档。适合于初学者快速上手学习React框架，也适用于有一定基础的开发者作为参考或复习材料。此外，该项目还提供了与其他相关技术（如Flux架构、Webpack打包工具等）结合使用的示例，帮助用户更全面地理解和应用React生态系统中的不同工具和技术。","2026-06-11 02:53:16","top_language"]