Re: 新手让网页 act 起来: Day04 - JSX

前言

前面两篇基础的介绍 React.createElemnt()，但实际再开发上很少真的直接写它，想想看光是写一巢状结构，就要些一堆 code 而且又不太好读，所以大部分的情况都会是写 JSX ， 那究竟什麽是 JSX 呢？ 就让我来一步步的了解它吧！

JSX

先直接来看看 JSX 写来起来的样子吧！

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id='root'></div>
  
  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
  <script>
    cosnt element = <div className='container'> Cool! This is JSX syntax </div>
    
    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>
</html>

仔细看你会发现，除了 class 是写成 className 以外，根本就是在写 HTML 标签。
接下来呢，我们马上开启浏览器来看一下，就会发现画面上没有印出我们想要的结果，而且 console 那边还有喷错误。

这是怎麽一回事呢？ 稍微退一步想一下，等等在 JS 中可以这样写 HTML 语法吗？ 浏览器根本看不懂，我们必须先用 Babel 来翻译它，让它是一个 React element，那要怎麽产生 React element？ 就是用 React.createElement() 啦，所以 Babel 会帮我将 JSX 翻译成 React.createElemnt() 的语法来产生 React element。这也是为什麽会称 JSX 是 React.createElemnt() 的语法糖衣。

接下来，就让我们来引用 Babel 吧！并在 script 加上 type 属性：

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id='root'></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>

  <script type='text/babel'>

    const element = <div className='container'> Cool! This is JSX syntax </div>
    
    
    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>

</html>

顺利的话，画面就会印出 Cool! This is JSX syntax！

然後到开发者工具的 Elements，点 Head 中的 script，可以看到 Babel 翻译过後的样子

接下来让我们来看看 JSX 还能够怎麽做一些变化。不过先让我们来看一下 ES6 的样板字面值（Template literals）， 我们可以在 ${} 中嵌入 expression。

const greeting = 'Hello!'
const language = 'JavaScript'
const sentence = `${greeting} ${language}`

那 JSX 也有这样的功能，不过是一个大括号 {}，所以我们可以这样写：

const className = 'container'
const content = 'Cool! This is JSX syntax'

const element = <div className={className}>{content}</div>

要注意! 不要在 JSX 写 statement，像是如下：

const className = 'container'
const language = 'JavaScript'
const content = 'Cool! This is JSX syntax'

const element = <div className={className}>{ if(language === 'JavaScript'){ return content } }</div>
// 这样写就如同下面

// React.createElement('div', {className: 'container'}, if(language === 'JavaScript'){ return content } }</div>
)

你不会把一个 if statement 当作参数塞到一个 function call 中。
最後，既然知道 JSX 是 React.createElemnt 的语法糖，写法上我们还可以搭配 spread operator 做一点点变化

const props = {
  className: 'container',
  children: 'Cool! This is JSX syntax' 
}

const element = <div {...props}/>

以上就是今天的 JSX 介绍，有什麽问题都欢迎在下方留言，明天就让我们来介绍怎麽定义一个元件吧！


<<:  DAY19 MongoDB Oplog 是什麽？迈向高手之路

>>:  【领域展开 04 式】 架站工具的试用决选

Numbers

myint = 7 print(myint) myfloat = 7.0 print(myfloat...

[DAY20]图片旋转木马

TemplateSendMessage - ImageCarouselTemplate image_...

ASP.NET MVC 从入门到放弃(Day30)-总结

终於完赛了 先来讲讲我这30天的感想，我觉得参加铁人赛的好处就是可以重新思考过自己所学的东西 系统化...

[Day 03] if条件、缩排规则、函式写法，以及一些字串技巧

[ 30 Days of ML Challenge | D03] 今天提供一个文件以及一个练习教材，...

创建App-Google sign in my App

创建App-Google sign in my App 本App设想登入方法有Google、Appl...