今日总结
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真的是出乎意料。