今日总结
react自学阮一峰的React 入门实例教程，总结以下知识点：
1.初步使用 React 的网页源码，结构大致如下。
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=”text/babel” 。
2.上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
var names = [‘Alice’, ‘Emily’, ‘Kate’];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
Node学习
上午，我们集中学习Node的相关知识,
使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码，这里简单介绍一下。
语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。如1.0.0
如果只是修复bug，需要更新Z位。
如果是新增了功能，但是向下兼容，需要更新Y位
如果有大变动，向下不兼容，需要更新X位。
npm init 将当前目录的文件夹初始化为Npm库
npm install(可缩写为i) gulp -D(声明为库的依赖)
"devDependencies": {
"gulp": "^3.9.1"
}
npm login 当设置了连接公司私库时，需要login验证：
Username: train
Password:123456
Email: (this IS public) [email protected]
npm info trainning-20021 显示当前库的信息
package.json里的files包括了src文件：
"files": [
"src"
]（数组所以用[]）
npm unpublish [email protected](版本号)删除发布的包
"scripts": {
"test": "node src/index.js",
"start":"node src/main.js",
"build":"npm run test && npm start"，
"gulp":"gulp build"
},
npm run test 运行test里标注的index.js
npm start 直接运行main.js
run build相当于执行build中的代码，用&&连接
npm i gulp -g -registry http://registry.npmjs.org/
因为之前设置registry为私库，所以全局安装时需要重新设置registry为上述地址。
npm config list来查看当前库的配置信息
不建议全局安装插件 因为每个项目可能用到的工具版本号不同
require 用来加载代码，而 exports 和 module.exports 则用来导出代码
在trainning根目录下创建并编辑gulpfile.js里的内容：
var gulp=require('gulp');
gulp.task('default',function()
{
console.log('default task');
});
gulp.task('build',['default'],function()
{
console.log('bulid task');
gulp.src('src/*.js').pipe(gulp.dest('dist'));//先获取到路径，再把复制到指定路径
})
其中第二个gulp.task的参数[‘default’]是指，当run gulp时，按照先default 函数再build函数的顺序运行。
下午开会
朱琳珏经理给我们研发中心的培训生简短的开了一个会议，主要说明了邮箱、公司门户、着装礼仪等方面的事。
邮箱方面，每个人要装PC端和移动端的邮箱，并登陆公司邮箱。发件和收件时，要分清TO和CC，尽量每行字数不能太多，善用换行符。
公司门户eip.hand-china，每天要登陆进行timesheet的填写。
着装礼仪，注意必须穿带领的衬衫，不能穿T恤和背心。
继续学习react
老师要求统一用vscode进行开发，然后我就找了几个插件来帮助开发，比如cssPeek、HTML Boilerplate、React Native Tools等等。我认为对于一个IDE来说，丰富的插件库是重点加分项。
1.跟随着教程一步步学习react
也看了教程里的demo进行学习。学到组件的时候，遇到了一些坑。
var KirinoMessage=React.createClass(
{
render:function () {
return <h1>{this.props.name}</h1>;
}
}
);
遇到了this.props.name的用法，查阅资料react的props属性
2.React之props属性
我们想要在组件之间进行传值，那么props属性就起到了这个作用。
在props目录下新建index.js文件，并且使用require引入Props组件
// index.js
var React = require('react');
var ReactDOM = require('react-dom');
var Props = require('./component/Props.js') ;
ReactDOM.render(
<Props data="我是props属性"/>,
document.getElementById('example')
);
React是大小写敏感的，千万记住不要写错目前遇到的有
ReactDOM.render()
React.createClass()
3.调用组件时
记得加<Kirinomessage name=’ss’ />注意标签第一个必须大写，末尾有 /。
ReactDOM.render(
<KirinoMessage name="ss" />
,document.getElementById('example')
)
上面代码中，变量 HelloMessage 就是一个组件类。模板插入 时，会自动生成 HelloMessage 的一个实例（下文的”组件”都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
var KirinoMessage = React.createClass({
render: function() {
return <h1>
Hello {this.props.name}
</h1><p>
some text
</p>;
}
});v
上面代码会报错，因为KirinoMessage组件包含了两个顶层标签：h1和p。
解决办法 用一个<div>包裹return后的代码即可。
4.state属性
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）
5.组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
周末博客
尝试了无数次，ssh和https都用过。最后断定是公司和寝室网都不行，用ssh的话什么都传不上去，修改Hosts和ssh都试过很多次，报一样的错。用https的话，就会发现小的文件可以Push和pull但是大一点，比如我的sites 22M就无法上传，报脱机的错。然而我的主题theme就有20M，看来无法妥协了。虽然走过了这么多坑，但是在间接中也学到了很多知识，程序猿有时候BUG真的是出乎意料。