React简介 – 前端梦想

1. 关于JSX 语法

React 不是一定要使用 JSX 语法，可以直接使用原生JS。

JSX语法只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，建议使用 JSX 是因为它使得组件的结构和组件之间的关系看上去更加清晰。

2. HTML 标签和 React 组件

在JSX语法中，遇到HTML标签（以<开头）就用HTML规则解析，遇到代码块{开头}就用JavaScript规则解析。
React 的 JSX 语法约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。

var myDivElement = <div className=”foo” />;
React.render(myDivElement, document.body);

要渲染 React 模块，只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*…*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

3. 不建议的 XML 属性名

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。

作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

4. JSX大小写敏感

上面说了JSX是一个XML语法的预处理器。 XML 语法对大小写敏感。比如：

var Events = React.createClass({
clickHandler: function() {
console.log(‘You got me!’);
},

render: function() {
return <div onClick={this.clickHandler}>
Hello, world!
</div>;
}
});

React.render(
<Events />,
document.body
);

这里绑定click事件的onClick中C是大写的。

5. 使用react脚手架安装react

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

安装好后，有一个测试用例可使用。

6. npm安装react

$ npm install –save react react-dom babel-preset-react babel-loader babel-core

页面直接调用

<script src=”../build/react.js”></script>
<script src=”../build/react-dom.js”></script>
<script src=”../build/browser.min.js”></script>

7. react代码运行

npm install || yarn
npm start || yarn start

8. react示例

// main.js

var React = require(‘react’);
var ReactDOM = require(‘react-dom’);

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘example’)
);

设置 .babelrc:

{ “presets”: [“react”] }

修改HTML页面:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>Hello React!</title>
<script src=”build/react.js”></script>
<script src=”build/react-dom.js”></script>
<!– No need for Babel! –>
</head>
<body>
<div id=”example”></div>
<script src=”build/main.js”></script>
</body>
</html>

9. 总结

事件定义在class中

变量定义在render中

输出在render的return中

jsx语法不使用引号

html标签用小写开头

定义react组件用大写开头

className 和 htmlFor 来代替class和for使用

变量和事件引用使用大括号{}

react组件引用使用尖括号</>

事件和props属性在class中前缀this.

事件要在constructor中绑定bind(this)(ES6中传递this的时候才需要绑定，也可以使用箭头函数)