{"id":19012215,"url":"https://github.com/binaryify/react-webpack-es6-demo","last_synced_at":"2025-04-22T23:40:37.643Z","repository":{"id":74334897,"uuid":"46707826","full_name":"Binaryify/react-webpack-ES6-demo","owner":"Binaryify","description":"react-webpack-ES6-demo","archived":false,"fork":false,"pushed_at":"2016-05-15T01:17:04.000Z","size":428,"stargazers_count":11,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-17T16:04:00.096Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/Binaryify.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}},"created_at":"2015-11-23T08:48:46.000Z","updated_at":"2021-11-16T12:31:50.000Z","dependencies_parsed_at":"2024-02-09T15:42:34.286Z","dependency_job_id":null,"html_url":"https://github.com/Binaryify/react-webpack-ES6-demo","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/Binaryify%2Freact-webpack-ES6-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Binaryify%2Freact-webpack-ES6-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Binaryify%2Freact-webpack-ES6-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Binaryify%2Freact-webpack-ES6-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Binaryify","download_url":"https://codeload.github.com/Binaryify/react-webpack-ES6-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250343599,"owners_count":21415035,"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-08T19:17:11.113Z","updated_at":"2025-04-22T23:40:37.624Z","avatar_url":"https://github.com/Binaryify.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This is a demo for webpack-react demo using ES6;\n\n#Features\n* Equip with React 0.14, ES6 \u0026 Babel 6\n* Lint with ESlint and Airbnb's .eslintrc\n* Build with Webpack\n* Support hot module replacement\n* Auto Open a new browser tab when Webpack loads, and reload the page when you modified the code\n* Support git pre-commit hook used to lint and test your code\n\n![](http://binaryify.github.io/images/webpack2.png)\n\n![](http://binaryify.github.io/images/webpack.png)\n\n\n#start\n```\n$ git clone git@github.com:zhuangtongfa/react-webpack-ES6-demo.git\n\n$ npm install\n\n$ npm start\n\n```\n\nYou should see a new browser tap opening and a demo in http://127.0.0.1:8080.\n\n# main.jsx\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom'\nimport CommentBox from './component.jsx';\nimport $ from 'jquery'\n\nvar commentBox = ReactDOM.render( \u003c CommentBox url = \"comments.json\" / \u003e , $('#app').get(0));\nconsole.log(commentBox.state.comments)\nsetTimeout(()=\u003e{\n  commentBox.setState({\n      comments:[]\n  })\n},1000)\n```\n# component.jsx\n```js\nimport React from 'react';\nimport $ from 'jquery'\nimport './app.scss';\nvar style={\n  background:\"#eee\",\n  padding:\"20px\"\n}\nclass CommentForm extends React.Component{\n  handleSubmit(ev){\n    ev.preventDefault();\n    console.log(this.refs.author.value.trim())  //trim 去除两边空格\n    const author=this.refs.author.value.trim()\n    const comment=this.refs.comment.value.trim()\n    this.props.onSubmit({author:author,comment:comment})\n  }\n  render(){\n    return(\n        \u003cform ref=\"form\" className=\"comment-form\" onSubmit={(ev)=\u003e{this.handleSubmit(ev)}}\u003e\n        \u003ch1\u003eCommentForm\u003c/h1\u003e\n        \u003cinput type=\"text\" placeholder=\"your name\" ref=\"author\"/\u003e\n        \u003cinput type=\"text\" placeholder=\"input your comment\" ref=\"comment\"/\u003e\n        \u003cinput type=\"submit\" value=\"add comment\" /\u003e\n        \u003c/form\u003e\n    )\n  }\n}\nclass CommentFormB extends React.Component{\n  constructor(){\n    super()\n    this.state={\n      value:\"\"\n    }\n  }\n  handleInput(ev){\n    this.setState({\n      value:ev.target.value\n    })\n  }\n  render(){\n    var value=this.state.value;\n    return(\n      \u003cform className=\"comment-form\"\u003e\n        \u003ch1\u003eCommentFormB\u003c/h1\u003e\n          \u003cinput type=\"text\" value={value} placeholder=\"please input some content\" onChange={ev=\u003e{this.handleInput(ev)}}/\u003e\n          \u003cp\u003e{value}\u003c/p\u003e\n      \u003c/form\u003e\n    )\n  }\n}\nclass List extends React.Component {\n  constructor (props) {\n    super(props);\n    this.state={\n      liked:true\n    }\n  }\n  doSomething(ev){\n    console.log(ev)\n    this.setState({\n      liked:!this.state.liked\n    })\n  }\n  render () {\n    var commentlist = this.props.comments.map(function(item,index) {\n      return \u003cdiv key={index}\u003e{item.comment}  -{item.author}\u003c/div\u003e\n    })\n    return (\n      \u003cdiv className=\"comment\" style={style}  onClick={(ev)=\u003e{this.doSomething(ev)}}\u003e\n        {commentlist}{this.state.liked?\"like\":\"don't like\"}\n      \u003c/div\u003e\n    )\n  }\n}\nexport default class CommentBox extends React.Component {\n  constructor (props) {\n    super(props);\n    this.state = {\n      comments: [\n        {\n          \"author\": \"test\",\n          \"comment\": \"test1\"\n        }\n      ]\n    }\n  }\n  loaddata () {\n    setTimeout(()=\u003e{\n      $.ajax({\n        url: this.props.url,\n        dataType: \"json\",\n        success: data =\u003e {\n          this.setState({comments: data})\n        }\n      })\n    },2000)\n  }\n  componentDidMount () {\n    this.loaddata();\n  }\n  handleNewComent(data){\n    console.log(data)\n    // ajax业务逻辑\n    const comment=this.state.comments;\n    const newComment=comment.concat(data)\n    this.setState({comments:newComment})\n  }\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cList comments={this.state.comments}/\u003e\n        \u003cCommentForm onSubmit={(data)=\u003e{this.handleNewComent(data)}}/\u003e\n        \u003cCommentFormB/\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\n\n```\n\n# app.scss\n```css\nbody {\n  background: #fff;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.7;\n  margin: 0;\n  padding: 30px;\n}\n.comment-form {\n  margin: 10px 0px;\n  background: #eee;\n  padding: 10px;\n}\n\n.comment-form {\n  input[type=text] {\n    display: block;\n    padding: 6px;\n    margin: 10px 0px;\n    min-width: 300px;\n  }\n  input[type=submit] {\n    background: #fff;\n    border: 1px solid #ccc;\n    padding: 6px;\n  }\n}\n\n```\n# This is also have a react-demo\n\n[github](https://github.com/zhuangtongfa/react-demos)\n\nTry it!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinaryify%2Freact-webpack-es6-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinaryify%2Freact-webpack-es6-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinaryify%2Freact-webpack-es6-demo/lists"}