react 入门-JSX
Posted teamlet
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react 入门-JSX相关的知识，希望对你有一定的参考价值。
网页技术三剑客： html 、CSS 和 javascript !
三者中 HTML 最简单，是一种结构化文档，使用标记语言(Markup Language)表现的是文档内容；
其次是CSS ,CSS 核心是 Box Module (盒子模型) 和 定位；CSS依赖HTML的元素，只能依附与HTML并进行适当的修饰渲染，只能装饰内容但不能改变HTML元素本身。
最复杂的是Javascript，对HTML和CSS可以完全控制，增加修改任何元素和内容。
Javascript是编程语言(Programming Language)，编写的是真正的程序！
使用 Javascript 很多时候会把HTML和Javascript 混合编码，有些时候很难分清或者定义这些代码是Javascript的一部分还是HTML的一部分。
现在React正式给这种把Javascript和HTML写在一起的代码定义为 JSX，即 JavaScript eXtension !
JSX是一种React Element的新方式，通过 JSX 创建的React Element 可以以 Element 的方式进行组合。
可以使用 JSX 创建可以复用的、粒度大小各异的Element，并对这些Element进行组合，形成以业务逻辑划分的、粒度更大组件。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React with JSX Samples</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
function formatName(user)
return user.firstName + ' ' + user.lastName;
const user =
firstName: 'Harper',
lastName: 'Perez'
;
const element = (
<h1>
Hello, formatName(user)!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
</script>
</body>
</html>这次的例子与前面的例子有一个不同，在于多了一行引用
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>因为所有 react 入门文章中的举例，都可以直接复制保存到本地，然后在本地打开运行，查看运行效果。
而多了的这一行，作用正是为了能让 JSX 在浏览器中正常运行。
不信，可以在正常运行的页面中，删除这一行，原来可以正常显示的文字变得什么都没有了。
以上是关于react 入门-JSX的主要内容，如果未能解决你的问题，请参考以下文章