Notes

React Start Memo

React 快速上手 Notes

React.DOM

预定义好的 HTML 元素集合，React 自身对基本的 HTML 元素进行分装的集合

ReactDOM

className htmlFor style

class 和 for 是 JavaScript 的关键字，不能直接在 JavaScript 中使用，分别使用 className 和 htmlFor 代替

style 不能像在 HTML 中使用字符串进行赋值，需要使用 JavaScript 对象进行赋值

React.createClass

创建新组件

var newComponent = React.createClass({
	/* JavaScript 对象定义 */
});

唯一必须做的事：实现 render() 方法，返回一个 React 组件，不能只返回文本内容

React.createFactory

工厂方法，创建多个实例

var ComponentFactory = React.createFactory(newComponent);

ReactDOM.render(
	ComponentFactory(),
	document.getElementById("app")
);

this.props

propTypes

getDefaultProps()

var NewComponet = React.createClass({
	propTypes: {
		firstName: React.PropTypes.string.isRequired,
		middleName: React.PropTypes.string,
	},
	
	getDefaultProps: function() {
		return {
			/* 直接将所有属性写在这里了 */
			firstName: "a",
			middleName: "b",
		};
	},
});

state setState()

getInitialState()

props 与 state

安全地改变属性值

componentWillReceiveProps: function(newProps) {
	this.setState({
		text: newProps.defaultValue,
	});
},

组件的生命周期方法

JSX

使用空格

多个空格会合并成一个

使用注释

使用 HTML 实体

在 JSX 中返回多个节点

项目结构

/css /js /images 存放的东西都叫静态资源

index.html

引入的内容

注意：单一 css 和 js 当项目太大时，初始化加载会非常耗时，此时可以使用懒加载

现代化的 JavaScript (模块化)

模块化

CommonJS 广泛接受的模块化方案

/* 
	模块依赖 React 来调用 React.createClass()
	React 没有定义为全局变量，需要导入后再使用(require)
*/
var React = require('react);
var Logo = React.createClass({/*...*/});

// 导出组件
module.exports = Logo;

ECMAScript 模块

ECMAScript 延续模块化的思想，与 var ** = require('***') 和 module.exports = *** 相对，使用 import ** from '***'; 和 export default ***

类

使用类前：

var Logo = React.creatClass({/*...*/});

使用类后：

class Logo extends React.Component {/*...*/}

React 类语法与 ECMAScript 2015 的区别

class Logo extends React.Component {
	someMethod() {	
		/*...*/
	} // 这里不需要 逗号
	
	anotherFunction() { // 定义函数不需要 function 关键字
		/*...*/
	}
	
	render() {
		return /*...*/
	}
}

安装必备工具

让 index.html 成功运行在浏览器，需要

Browserify 的任务

安装 Babel 和 Browserify

通过 Node.js 附带的 npm(node package manager) 进行安装

安装 Browserify

# 安装命令
npm install --global browserify

# 验证安装是否成功
browserify --version

安装 Babel

# 安装命令
npm install --global babel-cli

# 检验安装是否成功
babel --version

Tip

上述命令中的 –global 选项，可以方便我们在全局范围通过命令来进行访问，但通常情况下，推荐在项目本地安装 Node 包（即不要 –global 选项）

React 相关

安装 React 相关的依赖包

安装命令

# 进入到项目的目录，进行的是本地安装，位于项目的 node_modules

npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015

构建项目

转译 JavaScript – 让代码在浏览器中可读

# 通过 Babel 转译 JavaScript

babel --presets react,es2015 js/source -d js/build

# 从 js/source 中读取所有文件，并转译其中的 React 和 es2015 语法
# 结果复制到 js/build 中

打包 JavaScript – 创建 bundle.js

browserify js/build/app.js -o bundle.js

# 应用入口为 js/build/app.js，找出其中所有依赖，并把结果输出到文件 bundle.js

打包 CSS – 创建 bundle.css

将所有 CSS 文件拼接成一个

cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css

在开发过程中构建

每次修改文件后，自动转换，打包 js，打包 css

将构建过程中使用到的命令放到 /scripts/build.sh 中

# 转换 js
babel --presets react,es2015 js/source -d js/build

# 打包 js
browserify js/build/app.js -o bundle.js

# 打包 css
cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css

# 完成
date; echo;

安装 watch 的 npm 包

运行 watch 命令对 /js/source/ 和 /css 目录中的任意更改进行监听，一旦文件内容发生变化，就运行 scripts/build.sh 中的脚本

# 安装 watch
npm install --save-dev watch

# 开始监听目录
watch "sh scripts/build.sh" js/source css

# 开始监听目录（将上面的命令放到了 scripts/build.sh 中）
sh scripts/watch.sh

** 然而，经实践发现：运行 watch 时，提示无法找到 watch 命令**

因此改为用 Homebrew 下载，运行方法同上

brew install watch

发布

上线前的额外处理

JavaScript 压缩工具 – uglify

CSS 压缩工具 – cssshrink

发布前处理完毕，复制文件到内容分发网络(content delivery network, CDN)

发布脚本

# 删除上一个版本
rm -rf __deployme
mkdir __deployme

# 构建
sh scripts/build.sh

# 压缩 JavaScript
uglify -s bundle.js -o __deployme/bundle.js

# 压缩 CSS
cssshrink bundle.css > __deployme/bundle.css

# 复制 HTML 和图片
cp index.html __deployme/index.html
cp -r images/ __deployme/images/

# 完成
date; echo;

脚本运行完后，得到一个新目录名为 __deployme，包含的内容

把整个目录上传到服务器，就可以发版本了

更加专业的构建工具