react 入门-JSX

来源：互联网发布：实况8修改球员数据编辑：程序博客网时间：2024/05/20 16:12

网页技术三剑客： 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 在浏览器中正常运行。
不信，可以在正常运行的页面中，删除这一行，原来可以正常显示的文字变得什么都没有了。

阅读全文

0 0