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/[email protected]/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>

这次的例子与前面的例子有一个不同，在于多了一行引用

扫描二维码关注公众号，回复： 4063002 查看本文章

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

因为所有 react 入门文章中的举例，都可以直接复制保存到本地，然后在本地打开运行，查看运行效果。

而多了的这一行，作用正是为了能让 JSX 在浏览器中正常运行。
不信，可以在正常运行的页面中，删除这一行，原来可以正常显示的文字变得什么都没有了。

猜你喜欢