{"id":24771756,"url":"https://github.com/ziyi2/react-demo","last_synced_at":"2026-07-03T15:02:20.780Z","repository":{"id":98890461,"uuid":"63607474","full_name":"ziyi2/react-demo","owner":"ziyi2","description":null,"archived":false,"fork":false,"pushed_at":"2016-07-27T15:09:23.000Z","size":760,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T20:34:20.972Z","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/ziyi2.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-07-18T13:57:32.000Z","updated_at":"2016-07-24T14:24:35.000Z","dependencies_parsed_at":"2023-03-05T17:30:44.473Z","dependency_job_id":null,"html_url":"https://github.com/ziyi2/react-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ziyi2/react-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ziyi2","download_url":"https://codeload.github.com/ziyi2/react-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ziyi2%2Freact-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35090444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-03T02:00:05.635Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-01-29T04:01:11.593Z","updated_at":"2026-07-03T15:02:20.760Z","avatar_url":"https://github.com/ziyi2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React - Demo\n### HTML\n- react.js\n- react-dom.js\n- bower.js\n\n``` vbscript-html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eJSX\u003c/title\u003e\n    \u003cscript type=\"text/javascript\" src=\"public/react/react.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"public/react/react-dom.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"public/react/browser.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id='container'\u003e\u003c/div\u003e\n    \n    \u003cscript type=\"text/babel\"\u003e\n        //这里放置JSX代码\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Hello React\n -  React.createClass(Obj)\n -  ReactDOM.render(component/HTML DOM,fatherDom)\n``` javascript\nvar Hello = React.createClass({\n    render: function(){\n        return \u003cp\u003eHello,React!\u003c/p\u003e\n    }\n});\n    \nvar hello = \u003cHello /\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(hello,container);\n```\n\n### JSX\n\nIn`{}`you can use JavaScript, but not include `if else` directly\n``` javascript\nvar Hello = React.createClass({\n    render: function(){\n        return \u003cp\u003eHello,{this.props.name ? this.props.name : 'World'}!\u003c/p\u003e\n    }\n});\n\nvar hello = \u003cHello name='React'/\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(hello,container);\n```\nOr you can use Function just like this\n\n``` javascript\nvar Hello = React.createClass({\n    getName: function(){\n        if(this.props.name)\n            return this.props.name;\n        else\n            return \"World\"; \n    },\n\n    render: function(){\n        var name = this.getName();\n        return \u003cp\u003eHello,{name}!\u003c/p\u003e\n    }\n});\n\nvar hello = \u003cHello name='React'/\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(hello,container);\n```\nWe can't use `if else` in `{}`directly,but we can use `||`\n\n``` javascript\nvar Hello = React.createClass({\n    render: function(){\n        return \u003cp\u003eHello,{this.props.name || \"World\" }!\u003c/p\u003e\n    }\n});\n\nvar hello = \u003cHello name='React'/\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(hello,container);\n```\n\nUser Function expression in `{}`, so you can usr all JavaScript\n    \n\n``` javascript\nvar Hello = React.createClass({\n    render: function(){\n        return \u003cp\u003eHello,{\n            (function (obj){\n                if(obj.props.name)\n                    return obj.props.name\n                else\n                    return \"World\"\n            }(this))\n        }!\u003c/p\u003e\n    }\n});\n\nvar hello = \u003cHello name='React'/\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(hello,container);\n```\n\n\u003e提示: 使用HTML自带的属性时, 由于`class`和`for`是JavaScript关键字,所以要使用`className`和`htmlFor`代替.\n\n#### Event of Component\n\n``` javascript\nvar Hello = React.createClass({\n    handleClick: function(event){\n        alert(this.props.name);\n    },\n    render: function(){\n        return \u003cp onClick={this.handleClick}\u003eHello,Click Me!\u003c/p\u003e\n    }\n});\n\nvar hello = \u003cHello name='React'/\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(hello,container);\n```\n\n\u003e提示: 自动绑定组件所有事件的作用于, 不要这样使用 `onClick={this.handleClick.bind(this)}`\n\n### Component Lifecycle\n\n- Init\n- Running\n- Destroy\n\n#### Init\n- getDefaultProps \n- getInitialState\n- componentWillMount\n- render\n- componentDidMount\n\n| Function      |    describe |   \n| :-------- | :------ |\n| getDefaultProps    |   对于组件类来说只调用一次,实例之间共享引用 | \n| getInitialState    |   对于组件的每个实例来说,只会调用一次,初始化每个实例特有的状态,必须返回一个对象或者null | \n| componentWillMount    |   完成首次渲染之前被调用,render之前最后一次修改状态的机会 | \n| render    |   创建一个虚拟的DOM,只要一个顶层组件,不允许修改状态和DOM输出,只能通过props和state访问数据,可以返回null,false或者任何React组件 | \n| componentDidMount    |   render渲染完成真实的DOM后触发,可以修改和操作真正的DOM,可以通过`this.getDOMNode()`方法访问真实DOM |\n \n\n\u003e提示: 按从上到下依次触发. 注意组件类和组件的每个实例的调用情况,`getDefaultProps`在所有的组件来说只会调用一次,而`getInitialState`对于每个组件实例来说都会调用一次.\n\n``` javascript\nvar Hello = React.createClass({\n\n    getDefaultProps: function(){\n        console.log(\"getDefaultProps\");\n    },\n\n    getInitialState: function(){\n        console.log(\"getInitialState\");\n        return null;    \n    },\n\n    componentWillMount: function(){\n        console.log(\"componentWillMount\");\n    },\n\n    render: function(){\n        console.log(\"render\");\n        return \u003cp\u003eHello,{\n            (function (obj){\n                if(obj.props.name)\n                    return obj.props.name\n                else\n                    return \"World\"\n            }(this))\n        }!\u003c/p\u003e\n    },\n\n    componentDidMount: function(){\n        console.log(\"componentDidMount\");\n    }\n});\n\nvar hello = \u003cHello name='React'/\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(hello,container);\n```\n\n查看控制台\n``` javascript\ngetDefaultProps\ngetInitialState\ncomponentWillMount\nrender\ncomponentDidMount\n```\n加载jquery\n\n``` javascript\n$(document).ready(\n    function(){\n        \n        var Hello = React.createClass({\n\n            getDefaultProps: function(){\n                console.log(\"getDefaultProps\");\n                return {\n                    name: 'ziyi2'\n                };\n            },\n\n            getInitialState: function(){\n                console.log(\"getInitialState\");\n                return {\n                    ready:\"false\"\n                };\n            },\n\n            componentWillMount: function(){\n                console.log(\"componentWillMount\");\n                this.setState({\n                    ready:\"true\"\n                });\n            },\n\n            render: function(){\n                console.log(\"render\");\n                return \u003cp\u003eHello,{\n                    (function (obj){\n                        if(obj.props.name)\n                            return obj.props.name\n                        else\n                            return \"World\"\n                    }(this))\n                }! the state: {this.state.ready}\u003c/p\u003e\n            },\n\n            componentDidMount: function(){\n                console.log(\"componentDidMount\");\n                $(\"#container\").append(\"really Dom Oper!\");\n            }\n        });\n\n        var hello = \u003cHello /\u003e;\n        var container = document.getElementById('container');\n        ReactDOM.render(hello,container);\n    }\n)\n```\n\n#### Running\n- componentWillReceiveProps\n- shouldComponentUpdate\n- componentWillUpdate\n- render\n- componentDidUpdate\n\n| Function      |    describe |   \n| :-------- | :------ |\n|  componentWillReceiveProps  | 父组件修改属性之前子组件的该属性触发,可以修改新属性,修改状态   | \n| shouldComponentUpdate   | 返回false会阻止render调用,比如state改变但是不需要重新渲染,使用需谨慎   | \n|  componentWillUpdate  |  不能修改属性和状态,在render之前接收到新的props和state进行执行  | \n| render    |   创建一个虚拟的DOM,只要一个顶层组件,不允许修改状态和DOM输出,只能通过props和state访问数据,可以返回null,false或者任何React组件 | \n|  componentDidUpdate  | render渲染完成真实的DOM后触发,可以修改DOM,可以通过`this.getDOMNode()`方法访问真实DOM   |\n \n\n``` javascript\n\n//Hello Componenet\nvar Hello = React.createClass({\n    componentWillReceiveProps: function(){\n        console.log(\"Hello componentWillReceiveProps\");\n    },\n\n    shouldComponentUpdate: function(){\n        console.log(\"Hello shouldComponentUpdate\");\n        return true;\n    },\n\n    componentWillUpdate: function(){\n        console.log(\"Hello componentWillUpdate\");\n    },\n\n    render: function(){\n        console.log(\"Hello render\");\n        return \u003cp\u003eHello, {this.props.name ? this.props.name : \"Wrold\"}!\u003c/p\u003e\n    },\n\n    componentDidUpdate: function(){\n        console.log(\"Hello componentDidUpdate\");\n    }\n});\n\n//IncludeHello Componenet\nvar IncludeHello = React.createClass({\n    getInitialState: function(){\n        return {\n            name: ''\n        }\n    },\n\n    handleChange: function(event){\n        this.setState({\n            name: event.target.value\n        });\n    },\n    \n    render: function(){\n        return (\n            \u003cdiv\u003e\n                \u003cHello name={this.state.name} /\u003e\n                \u003cbr/\u003e\n                \u003cinput type=\"text\" onChange={this.handleChange} /\u003e\n            \u003c/div\u003e  \n        )\n    }\n\n});\nvar includeHello = \u003cIncludeHello /\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(includeHello,container);\n```\n开始控制台输出运行中的函数,此时属性还没变化,所以其他函数还没触发\n``` javascript\nHello render\n```\n当在input元素中输入值触发`name`变化后,控制台输出运行中的函数的执行顺序\n\n```\nHello componentDidUpdate\nHello componentWillReceiveProps\nHello shouldComponentUpdate\nHello componentWillUpdate\nHello render\nHello componentDidUpdate\n```\n\n\n#### Destroy\n- componentWillUnmount\n\u003e提示: 在组件被销毁之前执行,主要进行一些清理操作,比如计时器和事件监听器等.\n\n``` javascript\n$(document).ready(\n    function(){\n        //Hello Componenet\n        var Hello = React.createClass({\n\n            render: function(){\n                console.log(\"Hello render\");\n                return \u003cp\u003eHello, {this.props.name ? this.props.name : \"Wrold\"}!\u003c/p\u003e\n            },\n            \n            componentWillUnmount: function(){\n                console.log('componentWillUnmount did!');\n            }\n            \n        });\n        \n        //IncludeHello Componenet\n        var IncludeHello = React.createClass({\n            getInitialState: function(){\n                return {\n                    name: ''\n                }\n            },\n\n            handleChange: function(event){\n                this.setState({\n                    name: event.target.value\n                });\n            },\n            \n            render: function(){\n                //在input元素中输入'ziyi2'\n                if(this.state.name === 'ziyi2'){\n                    return(\n                        \u003cdiv\u003e123\u003c/div\u003e\n                    )\n                }\n                \n                //如果返回\u003cdiv\u003e123\u003c/div\u003e,则Hello组件就会在DOM中会卸载随后被销毁,此时可触发销毁期的钩子函数\n                return (\n                    \u003cdiv\u003e\n                        \u003cHello name={this.state.name} /\u003e\n                        \u003cbr/\u003e\n                        \u003cinput type=\"text\" onChange={this.handleChange} /\u003e\n                    \u003c/div\u003e  \n                )\n            }\n\n        });\n        var includeHello = \u003cIncludeHello /\u003e;\n        var container = document.getElementById('container');\n        ReactDOM.render(includeHello,container);\n    }\n)\n```\n\n### Attribute of Component\n\n| Attribute      |     describe |  \n| :-------- | :--------| \n| dangerouslySetInnerHTML    |   允许使用HTML字符串,谨慎使用 |  \n| refs    |   不能期望从render返回的组件实例中得到的是真实的已渲染的DOM元素,因为render返回的组件实例只是特定描述,或者说只是一个DOM元素的快照,例如想要给input元素一个focus焦点,不能期望从render返回的组件的input中获取焦点,因为它还只是input的一个描述,而不是真正的input实例,真正的input实例可以通过refs属性访问,当然refs属性也可以在组件中使用,通过refs可以访问底层的真实的DOM节点而不是虚拟DOM |  \n|props|数据属性|\n|state|一旦改变(其实就是比较组件diff)会重新自动重新渲染组件,不同的state对应不同的render,state改变会触发内在的很多钩子函数|\n|key|节点的比较,例如列表,本来有列表1,添加列表2,若没有key,则会删除列表1(节点),重新生成列表1和列表2,若给出唯一标识key,则能够判断新状态state的列表1是旧状态的列表1,则不会删除节点,提升性能|\n\n#### ...(ES6)\n``` javascript\n$(document).ready(\n    function(){\n        //Hello Componenet\n        var Hello = React.createClass({\n\n            render: function(){\n                console.log(\"Hello render\");\n                return \u003cp\u003eHello, {this.props.name1 + ' ' + this.props.name2}!\u003c/p\u003e\n            }\n        });\n        \n        //IncludeHello Componenet\n        var IncludeHello = React.createClass({\n            getInitialState: function(){\n                return {\n                    name1: 'name1',\n                    name2: 'name2'\n                }\n            },\n\n            handleChange: function(event){\n                this.setState({\n                    name1: event.target.value,\n                    name2: event.target.value\n                });\n            },\n            \n            render: function(){\n                return (\n                    \u003cdiv\u003e\n                        \u003cHello {...this.state} /\u003e\n                        \u003cbr/\u003e\n                        \u003cinput type=\"text\" onChange={this.handleChange} /\u003e\n                    \u003c/div\u003e  \n                )\n            }\n\n        });\n        var includeHello = \u003cIncludeHello /\u003e;\n        var container = document.getElementById('container');\n        ReactDOM.render(includeHello,container);\n    }\n)\n```\n\n#### state props\n- state\n只和组件本身有关系.由自己维护,,和父组件和子组件都没关系\n- props\n组件本身不能修改,但是可以由父组件修改或者修改子组件的属性值\n\n\u003e提示: **组件在运行时需要修改的数据就是状态!**\n\n### Form\n\n#### 可控表单\n\n``` javascript\nvar ControlForm = React.createClass({\n    getInitialState: function(){\n        return {\n            helloTo: \"Hello World!\"\n        };\n    },\n\n    handleChange: function(event){\n        this.setState({\n            helloTo: event.target.value\n        });\n    },\n\n    submitHandler: function(event){\n        event.preventDefault();\n        alert(this.state.helloTo);\n    },\n\n    render: function(){\n        return (\n            \u003cform onSubmit={this.submitHandler}\u003e\n                \u003cinput \n                    type=\"text\"\n                    value={this.state.helloTo}\n                    onChange={this.handleChange}\n                /\u003e\n                \u003cbutton type=\"submit\"\u003e提交\u003c/button\u003e\n            \u003c/form\u003e\n        )\n    }\n});\n\nvar myForm = \u003cControlForm /\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(myForm,container);\n```\n\n#### 不可控表单\n\n``` javascript\nvar UnControlForm = React.createClass({\n    submitHandler: function(event){\n        event.preventDefault();\n        var helloTo = this.refs.helloTo.value;\n        alert(helloTo);\n    },\n\n    render: function(){\n        return (\n            \u003cform onSubmit={this.submitHandler}\u003e\n                \u003cinput \n                    ref='helloTo'\n                    type=\"text\"\n                    defaultValue=\"Hello React\" \n                /\u003e\n                \u003cbutton type=\"submit\"\u003e提交\u003c/button\u003e\n            \u003c/form\u003e\n        )\n    }\n});\n\nvar myForm = \u003cUnControlForm /\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(myForm,container);\n```\n\n#### 表单类型\n\n``` javascript\nvar ControlForm = React.createClass({\n    getInitialState: function(){\n        return {\n            username: 'React',\n            gender: 'man',\n            checked: true\n        };\n    },\n\n    handleUserNameChange: function(event){\n        this.setState({\n            username: event.target.value\n        });\n    },\n\n    handleGenderChange: function(event){\n        this.setState({\n            gender: event.target.value\n        });\n    },\n\n    handleCheckChange: function(event){\n        this.setState({\n            checked: event.target.checked //这里比较特殊\n        });\n    },\n\n    submitHandler: function(event){\n        event.preventDefault();\n        console.log(this.state);\n    },\n\n    render: function(){\n        return (\n            \u003cform onSubmit={this.submitHandler}\u003e\n                \u003clabel htmlFor='username'\u003e请输入用户名\u003c/label\u003e\n                \u003cinput \n                    id=\"username\" \n                    type=\"text\"\n                    value={this.state.username}\n                    onChange={this.handleUserNameChange}\n                /\u003e\n\n                \u003cbr/\u003e\n\n                \u003cselect value={this.state.gender} onChange={this.handleGenderChange}\u003e\n                    \u003coption value=\"man\"\u003e男\u003c/option\u003e\n                    \u003coption value=\"woman\"\u003e女\u003c/option\u003e\n                \u003c/select\u003e\n\n                \u003cbr/\u003e\n                \n                \u003clabel htmlFor='checkbox'\u003e同意用户协议\u003c/label\u003e\n                \u003cinput \n                    id=\"checkbox\" \n                    type=\"checkbox\" \n                    value=\"agree\" \n                    checked={this.state.checked} onChange={this.handleCheckChange} \n                /\u003e\n\n                \u003cbutton type=\"submit\"\u003e提交\u003c/button\u003e\n            \u003c/form\u003e\n        )\n    }\n});\n\nvar myForm = \u003cControlForm /\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(myForm,container);\n```\n\n#### 表单事件合并\n\n``` javascript\nvar ControlForm = React.createClass({\n    getInitialState: function(){\n        return {\n            username: 'React',\n            gender: 'man',\n            checked: false\n        };\n    },\n\n    handleChange: function(name,event){\n        //方法一\n        var newState = {};\n        newState[name] = name == \"checked\" ? event.target.checked : event.target.value;\n        console.log(newState);\n        this.setState(newState);\n\n        //方法二,使用此方法因为读取event.target.name,所以性能不如方法一读取字符串来的快,并且要在HTML标签中为每个表单元素添加name属性\n        var newState = {};\n        newState[event.target.name] = event.target.name == \"checkbox\" ? event.target.checked : event.target.value;\n        this.setState(newState);\n    },\n\n    submitHandler: function(event){\n        event.preventDefault();\n        console.log(this.state);\n    },\n\n    render: function(){\n        return (\n            \u003cform onSubmit={this.submitHandler}\u003e\n                \u003clabel htmlFor='username'\u003e请输入用户名\u003c/label\u003e\n                \u003cinput \n                    id=\"username\" \n                    type=\"text\"\n                    value={this.state.username}\n                    onChange={this.handleChange.bind(this,\"username\")}\n                /\u003e\n\n                \u003cbr/\u003e\n\n                \u003cselect value={this.state.gender} onChange={this.handleChange.bind(this,\"gender\")}\u003e\n                    \u003coption value=\"man\"\u003e男\u003c/option\u003e\n                    \u003coption value=\"woman\"\u003e女\u003c/option\u003e\n                \u003c/select\u003e\n\n                \u003cbr/\u003e\n                \n                \u003clabel htmlFor='checkbox'\u003e同意用户协议\u003c/label\u003e\n                \u003cinput \n                    id=\"checkbox\" \n                    type=\"checkbox\" \n                    value=\"agree\" \n                    checked={this.state.checked} onChange={this.handleChange.bind(this,\"checked\")} \n                /\u003e\n\n                \u003cbutton type=\"submit\"\u003e提交\u003c/button\u003e\n            \u003c/form\u003e\n        )\n    }\n});\n\nvar myForm = \u003cControlForm /\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(myForm,container);\n```\n\n### Mixin\n\n``` javascript\n//组件的协同分两种,纵向和横向\n//纵向,父组件可以包含子组件\n//横向,子组件之间的通用方法可以抽离,比如Ajax,很多组件都需要和后台交互,可以抽离Ajax方法\n//Minxin就是一个扩展横向的插件使用方法\n\n\n//这是一个通用方法,插入到组件以后就相当于在组件中的方法一样 this就指向那个组件实例\nvar BindingMixin = {\n    handleChange: function(key){\n        var that = this;\n        return function(event){\n            var newState = {};\n            newState[key] = event.target.value;\n            that.setState(newState); \n        }\n    }\n};\n    \nvar MinxinExample = React.createClass({\n    \n    mixins: [BindingMixin],\n\n    getInitialState: function(){\n        return {\n            text: 'ziyi2',\n            comment: 'this is some comment'\n        };\n    },\n\n    render: function(){\n        return (\n            \u003cdiv\u003e\n                \u003cinput type=\"text\" placeholder=\"用户名\" onChange={this.handleChange('text')} /\u003e\n                \u003ctextarea onChange={this.handleChange('comment')}\u003e\u003c/textarea\u003e\n                \u003cp\u003e{this.state.text}\u003c/p\u003e\n                \u003cp\u003e{this.state.comment}\u003c/p\u003e\n            \u003c/div\u003e\n        );\n    }\n\n});\n\nvar minxinExample = \u003cMinxinExample /\u003e;\nvar container = document.getElementById('container');\nReactDOM.render(minxinExample,container);\n```\n\n### Gulp\nInstall global and local\n\n``` \nnpm install gulp -g\nnpm install gulp --save\n```\nInstall gulp-react\n``` \nnpm install gulp-react --save\n```\n\u003e提示: 该插件是将`.jsx`文件转化为`.js`文件.\n\nCreate `gulpfile.js`\n\n``` javascript\nvar gulp = require('gulp');\nvar react = require('gulp-react');\n\ngulp.task('jsx', function(){\n    gulp.src('./Gulp_8/app.jsx')\n        .pipe(react())\n        .pipe(gulp.dest('./Gulp_8/'));\n});\n\n//设置默认命令\ngulp.task('default',['jsx']);\n```\n\n执行转化命令\n\n```\ngulp\n```\n\n### Browserify\n浏览器端的代码模块化工具,即可以在浏览器端使用CommonJS规范编写代码,打包成一个.js文件的缺陷\n\n- 暂时用不到的代码也会被打包,体积大,首次加载速度慢\n- 只要一个模块更新,整个文件缓存失效\n\nBrowserify解决方案: entry point,入口点技术\n每个入口点打包一个文件,两个入口点的相同依赖模块单独打包为Common.js\n可以接单单个文件问题,代码是增加依赖的维护成本,因为要自己指定入口点\n\nInstall\n\n```\nnpm install browserify --save\n```\n\nInstall reactify \n\n```\nnpm install reactify --save\n```\n\u003e提示:  该插件与Gulp中的gulp-react功能一样.\n\nInstall vinyl-source-stream\n\n```\nnpm install vinyl-source-stream --save\n```\n\u003e提示: 把Browserify输出的代码转化为Gulp可以理解的输入代码.\n\n\n### Webpack\n\n加强版的Browserify, 针对大型的单页应用\n - code splitting\n code splitting可以自动完成模块的处理,比如两个文件require同一文件这种重复的部分可以自己处理,不用像Browserify那样手动完成\n - loader\n loader可以处理各种类型的静态文件,并且支持串联操作\n\n\nInstall \nnpm install webpack jsx-loader --save\n\u003e提示: jsx-loader和前面的reactify gulp-react功能类似.\n\n创建webpack.config.js\n\n``` javascript\n'use strict';\n\nvar webpack = require('webpack');\n\nmodule.exports = {\n    entry: './Webpack_10/app.jsx',\n    output: {\n        path: './Webpack_10/',\n        filename: 'app.js'\n    },\n    module:{\n        loaders: [\n            {\n                test: /\\.jsx$/,\n                loader: 'jsx-loader'\n            }\n        ]   \n    }\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fziyi2%2Freact-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fziyi2%2Freact-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fziyi2%2Freact-demo/lists"}