React入门--------JSX

时间:2024-01-04 14:15:02

React学习网站

React官方英文网站:http://reactjs.cn/react/docs/top-level-api.html

React官方中文网站:http://www.css88.com/react/docs/getting-started.html

阮一峰关于React的网站:http://www.ruanyifeng.com/blog/2015/03/react.html

极客学院:http://wiki.jikexueyuan.com/project/react/animation.html

简单的入门文章:http://www.tuicool.com/articles/eQ3yQzi

一、html模板

使用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>

1、上面代码一共用了三个库:react.js、react-dom.js和browser.min.js。它们必须首先加载。其中,react.js是React的核心库,react-dom.js是提供与DOM相关的功能,browser.min.js的作用是将JSX语法转化为JS语法。

2、如果使用了jsx语法,那么script标签的type属性必须为text/babel。

二、JSX语法

html语言直接写在js语言中,不加任何引号,就是jsx的语法。

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);

上面代码体现了jsx的基本语法规则:遇到html标签,就用html规则解析;遇到代码块(以{开头),就用js规则解析。

jsx允许直接在模板插入js变量。如果这个变量是一个数组,则会展开这个数组的所有成员。

    var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);