本文的原文连接是:http://blog.csdn.net/freewebsys/article/details/77639066 未经博主允许不得转载。
博主地址是:http://blog.csdn.net/freewebsys
1,关于React
React.js(React)是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
出于灵活性考虑,React使用JavaScript来构建用户界面,没有选择HTML。
使用 jsx的语法,JSX 是一个静态类型、面向对象的编程语言,主要设计用来在浏览器上运行,你可以把它当作是 JavaScript 的增强版本。
JSX最大的特色就是就是在JavaScript中嵌入和HTML表达式。
官方网站:https://facebook.github.io/react/
2,第一Helloworld
最新的版本是15.6.1,由于是使用的jsx进行代码的编写。
需要使用 eabel 进行翻译才能运行。
需要说明的是最新的react 需要引入 react.min.js 和 react-dom.min.js 两个js类库。同时要用 babel 的5.x 版本。6的版本好像和react配合有问题。
<html>
<head>
<title>new react demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
<script type="text/babel">
class HelloWorld extends React.Component {
constructor(){
super();
this.state = { count: 1 };
}
render(){
return (
<div>
<h2> Hello World ! </h2>
<h3> {this.state.count} </h3>
</div>
)
}
}
let myCount = ReactDOM.render(
<HelloWorld/>,
document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
其中 在react中使用 render 返回 html 代码片段。
在定义了react的class之后就可以使用react的组件了。
ReactDOM.render(
<HelloWorld/>,
document.getElementById('root')
);
直接使用 组件。
还是非常方便的。
3,定时更新
<html>
<head>
<title>new react demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
</script>
</head>
<body>
<h1>hello world react .</h1>
<div id="root"></div>
</body>
</html>
可以在chrome上面安装一个react的插件,来分析react的模板结构。
使用setInterval定时器。间隔1秒钟。执行一次绑定。
虽然也是更新,但是react只更新变化的部分。也就是只更新时间,而hello world没有更新。
4,总结
react 使用了jsx,最大的特点就是 里面key直接写html 片段了。
这个就能方便的写些常用的组件了。加快了开发效率。
本文的原文连接是:http://blog.csdn.net/freewebsys/article/details/77639066 未经博主允许不得转载。
博主地址是:http://blog.csdn.net/freewebsys