{"id":123,"date":"2018-04-27T22:58:52","date_gmt":"2018-04-27T14:58:52","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=123"},"modified":"2020-06-20T23:05:58","modified_gmt":"2020-06-20T15:05:58","slug":"react-base","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2018\/04\/27\/react-base\/","title":{"rendered":"react base"},"content":{"rendered":"
\n

\u4f7f\u7528create-react-app\u5b98\u65b9\u811a\u624b\u67b6<\/h3>\n

1) \u5b89\u88c5create-react-app<\/code><\/p>\n

npm i -g create-react-app\n<\/code><\/pre>\n
2) \u521b\u5efa\u9879\u76ee<\/p>\n
create-react-app react-demo\n<\/code><\/pre>\n
\u521b\u5efa\u540ecd\u5230\u9879\u76ee\u6839\u76ee\u5f55\u3002<\/p>\n
\u6b64\u65f6\u7684\u9879\u76ee\u7ed3\u6784\u5982\u4e0b\uff1a<\/p>\n
react-demo\n    + node_modules\n    + public\n    |   -- favicon.ico\n    |   -- index.html\n    |   -- mainfast.json\n    + src\n    |   -- App.css\n    |   -- App.js\n    |   -- App.test.js\n    |   -- index.css\n    |   -- index.js\n    |   -- logo.svg\n    |   -- registerServiceWorker.js\n    + -- .gitignore\n    + -- package.lock.json\n    + -- package.json\n    + -- README.md\n<\/code><\/pre>\n
3) \u542f\u52a8\u9879\u76ee(\u8fdb\u5165\u9879\u76ee\u6587\u4ef6\u5939\u4e2d)<\/p>\n
npm start\n<\/code><\/pre>\n
4) \u7f16\u8bd1\u6253\u5305\u9879\u76ee<\/p>\n
npm build\n<\/code><\/pre>\n
\u7ec4\u4ef6<\/h3>\n
1) \u5728public\/index.html<\/code>\u4e2d\u5f15\u5165ui\u6846\u67b6<\/p>\n
2) \u5728src<\/code>\u4e2d\u521b\u5efacomponents<\/code>\u6587\u4ef6\u5939<\/p>\n
3) \u5728components<\/code>\u4e2d\u521b\u5efaHome.js<\/code>\u6587\u4ef6<\/p>\n
import React,{Component} from 'react'\n\nexport default class Home extends Component{\n  constructor() {\n    super()\n    console.log('home constructor init.')\n  }\n  render() {\n      return (\n        <header className='container' id='home'>\n          <div className='row'>\n            <div className='col-md-4 col-md-offset-4'>\n              <div>home<\/div>\n            <\/div>\n          <\/div>\n        <\/header>\n      )\n  }\n}\n<\/code><\/pre>\n
4) \u5728App.js<\/code>\u4e2d\u5bfc\u5165Home.js<\/code>:<\/p>\n
import Home from '.\/components\/Home'\n<\/code><\/pre>\n
\u5e76\u4fee\u6539App.js<\/code>\u4e2d\u7684render<\/code>\u65b9\u6cd5\uff1a<\/p>\n
<Home><\/Home>\n<\/code><\/pre>\n
5) \u67e5\u770b\u6d4f\u89c8\u5668\u81ea\u52a8\u66f4\u65b0\u540e\u7684\u663e\u793a<\/p>\n
props\u6570\u636e\u4f20\u9012<\/h3>\n
1) \u58f0\u660e\u4e34\u65f6\u4f7f\u7528\u53d8\u91cf<\/p>\n
let dataset = {\n  name:'indeex',\n  email:'indeex@qq.com',\n  num:1\n}\n<\/code><\/pre>\n
2) \u7ed9\u5b50\u7ec4\u4ef6\u6dfb\u52a0\u5c5e\u6027<\/p>\n
<Home info={dataset} test='\u6d4b\u8bd5'><\/Home>\n<\/code><\/pre>\n
3) \u7ed9Home<\/code>\u8282\u70b9\u6dfb\u52a0\u5b50\u8282\u70b9<\/p>\n
<Home info={dataset} test='\u6d4b\u8bd5'>\n  <div>Home's children.<\/div>\n<\/Home>\n<\/code><\/pre>\n
4) \u5728\u5b50\u7ec4\u4ef6\u4e2d\u7ed1\u5b9a\u6570\u636e\u663e\u793a<\/p>\n
<div>home<\/div>\n<p>{this.props.test}<\/p>\n<p>{this.props.info.name}<\/p>\n<p>{this.props.info.num}<\/p>\n<div>{this.props.children}<\/div>\n<\/code><\/pre>\n
5) \u7ed9\u5b50\u7ec4\u4ef6\u6dfb\u52a0\u7c7b\u578b\u68c0\u6d4b<\/p>\n
import PropTypes from 'prop-types'\n\nHome.propTypes = {\n  test:PropTypes.string,\n  info:PropTypes.object,\n  children:PropTypes.element.isRequired\n}\n<\/code><\/pre>\n
6) \u4fee\u6539\u7236\u7ec4\u4ef6(App)\u4e2d\u7684\u4e34\u65f6\u6570\u636e\u4e3a\u6b63\u5f0f\u6570\u636e<\/p>\n
\u4e8b\u4ef6<\/h3>\n
1) \u5728\u6784\u9020\u51fd\u6570\u4e2d\u58f0\u660e\u4e8b\u4ef6\u64cd\u4f5c\u53d8\u91cf<\/p>\n
this.num = this.props.info.num;\n<\/code><\/pre>\n
2) \u521b\u5efa\u4e8b\u4ef6<\/p>\n
clickHandler(e){\n    console.log('clicked.',this)\n    this.num = this.num + 3\n    console.log(this.num)\n}\n<\/code><\/pre>\n
3) \u6dfb\u52a0\u663e\u793a<\/p>\n
<p className='text-success'>{this.num}<\/p>\n<\/code><\/pre>\n
4) \u6dfb\u52a0\u4e8b\u4ef6\u6309\u94ae<\/p>\n
<button className='btn btn-success' onClick={() => this.clickHandler()}>add<\/button>\n<\/code><\/pre>\n
\n  \u6ce8\u610f<\/em>
\n  \u7531\u4e8ereact\u53d6\u6d88\u4e86\u81ea\u52a8\u7ed1\u5b9a\uff0conClick={this.clickHandler}<\/code>\u65e0\u6cd5\u88ab\u89e6\u53d1\u3002
\n  \u4e5f\u53ef\u4ee5\u4f7f\u7528onClick={this.clickHandler.bind(this)}<\/code>\n<\/p><\/blockquote>\n
5) \u67e5\u770b\u63a7\u5236\u53f0<\/p>\n
this.num<\/code>\u5df2\u7ecf\u6b63\u5e38\u589e\u52a0\uff0c\u4f46\u662f\u9875\u9762\u5e76\u6ca1\u6709\u66f4\u65b0,\u9700\u8981state<\/code>\u5bf9\u5176\u663e\u793a\u7ec4\u4ef6\u8fdb\u884c\u66f4\u65b0<\/p>\n
state\u66f4\u65b0\u7ec4\u4ef6\u663e\u793a<\/h3>\n
1) \u4fee\u6539\u4e8b\u4ef6\u64cd\u4f5c\u53d8\u91cf<\/p>\n
\/\/ this.num = this.props.info.num;\nthis.state = {\n  num:props.info.num\n}\n<\/code><\/pre>\n
2) \u4fee\u6539\u4e8b\u4ef6\u6539\u53d8\u91cf<\/p>\n
\/\/ this.num = this.num + 3\nthis.setState({\n  num:this.state.num + 3\n})\n<\/code><\/pre>\n
3) \u4fee\u6539\u6240\u6709this.num<\/code>\u4e3athis.state.num<\/code><\/p>\n
<p className='text-success'>{this.state.num}<\/p>\n<\/code><\/pre>\n
\u65e0\u72b6\u6001\u7ec4\u4ef6<\/h3>\n
1) \u65e0\u72b6\u6001\u7ec4\u4ef6<\/p>\n
\u4f7f\u7528\u573a\u666f<\/p>\n
\n