react入门
什么是react?
react是用于构建用户界面的JavaScript库
react主要用于构建ui，很多人认为react是mvc框架中的v
react的使用
使用react需要引入三个库：react.min.js、react-dom.min.js和babel.min.js
react.min.js - react的核心库
react-dom.min.js - 提供与DOM相关的功能
babel.min.js - babel可以将es6代码转为es5代码，这样我们技能在目前不支持es6游览器上执行react代码。
下面是通过npm安装react
npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org cnpm install [name] /
通过create-react-app快速构建react开发环境
create-react-app是来自于Facebook，通过该命令我们无需配置就能快速构建react开发环境。
create-react-app来自创建项目基于webpack
执行以下命令创建项目：
cnpm install -g create-react-app create-react-app my-app cd my-app/ npm start
执行以上命令后就可以用http://localhost:3000在游览器上打开一个网页，项目文件夹中也会自动创建一个my-app的文件出来。
react jsx
jsx即JavaScript xml,是js中的一种热语言，在编译的时候要先把jsx编译成js,再进行运行。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);react组件
<body>
<div ></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>上面的代码封装了一个名为HelloMessage的组件
React.createClass 方法用于生成一组件
<HelloMessage /> 实例组件类并输出信息。
注意：原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
可以使用this.props向组建传递参数
<body>
<div ></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="R" />,
document.getElementById('example')
);
</script>
</body>state和props的住要区别是props是不可改变的，而state是可以根据用户来改变的。
组件的生命周期
组件的生命周期分为三个状态
Mounting - 已插入真实的dom
Updating - 正在被重新渲染
Unmounting - 已移除真实的dom
- 上一篇 »Python爬虫入门：爬虫基础了解
- 下一篇 »CSS入门例子
