您的位置：首页 > Web前端 > React

React入门系列二（React-JSX）

2018-03-06 14:38 447 查看

React入门系列二（React-JSX）

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。不一定非要使用 JSX，但它有以下优点：

1）JSX 执行更快，在编译为 JavaScript 代码后进行了优化。

2）它是类型安全的，在编译过程中就能发现错误。

3）使用 JSX 编写模板更加简单快速。

一、使用JSX

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用JSX</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(

4000
<div>你好哦，欢迎使用JSX</div>,
document.getElementById('example')
);
</script>
</body>
</html>


关于ReactDOM.render

ReactDOM.render是react最基本的用法，用于将模板转化为HTML语言，并插入指定的DOM结点。

ReactDOM.render(template,targetDOM);接收两个参数，第一个参数用来创建模板，多个DOM元素外层需要使用一个标签进行包裹；第二个参数用来指定插入该模板的目标位置。

JSX允许JavaScript和HTML混写。

二、将JSX代码写入独立文件引入

HTML文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>将JSX写入独立文件引入</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="js/hello_react.js"></script>
</body>
</html>

JS文件
ReactDOM.render(
<div>你好哦，欢迎使用JSX</div>,
document.getElementById('example')
);


三、在JSX中使用JavaScript表达式

可以在 JSX 中使用 JavaScript 表达式，表达式写在花括号 {} 中。


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在JSX中使用JavaScript表达式</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>{20+25}</div>,
document.getElementById("example")
);
</script>
</body>
</html>


在 JSX 中不能使用 if else 语句，但可以使用三元运算表达式来替代。


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在JSX中使用三元运算表达式</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var a=1;
ReactDOM.render(
<div>{a==1?'true':'false'}</div>,
document.getElementById("example")
);
</script>
</body>
</html>


四、React 推荐使用内联样式

可以使用 camelCase(驼峰命名) 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React 推荐使用内联样式</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var myStyle={
color:'green'
};
ReactDOM.render(
<h1 style={myStyle}>React 推荐使用内联样式</h1>,
document.getElementById("example")
);
</script>
</body>
</html>


五、React注释

在标签内部的注释需要花括号，在标签外的的注释不能使用花括号


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>注释</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
/*注释*/
<div>
{/*注释*/}
<p>注释</p>
</div>,
document.getElementById('example')
);
</script>
</body>
</html>


六、数组

JSX 允许在模板中插入数组，数组会自动展开所有成员


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var array=[<div>1</div>,<div>2</div>,<div>3</div>];
ReactDOM.render(
<div>{array}</div>,
document.getElementById('example')
);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航