[Day4][笔记] React JSX

前言

开始前我们先直接上一段程序码

const element = <div style= {{ color: red }}>123</div>

读者看到这边应该会很好奇为何我们可以直接在 JavaScript 上,直接撰写 HTMLCSS。注意喔,
<div style= {{ color: red }}>123</div> 这段程序码前後并没有单引号所以不是字串喔!
这种可以直接在 JavaScript 上撰写 HTML 的做法就是 JSX

何谓 JSX

这种类似 HTML 的语法结构,是 React 自创的语法,它可以让我们直接把程序逻辑跟 UI 直接放一起。
范例:

import React from 'react'; //以前旧版本需要,目前新世代都不需要

function App(){
   return (
      <div>
	         <h1>Demo<h1/>
      </div>
   )
}

export default App;

运作流程

return React.creatElement(
    'div',
    {},
    React.createElement('h1',{}, 'Demo');
);
// createElement 会带三个参数,第一个是标签 第二个是物件 最後一个则是其他子元素

补充:

JSX 其实每次在 return 是就是一个 function ,也因此我们不会在 return 中写两个 function 。所以我们外层一定有 div 包住的主因。而这也是为什麽 React 只能挂载在一个 rootElement 原因,我们看它资料结构就蛮清楚为何我们不能回传两个 div

注意事项

  1. JSX 语法中只能有一个根元素
  2. 撰写变数或是表达式必须要用花括号 {} 包起来
  3. 撰写 className 必须为小驼峰,例如:<div className="Demo"></div>
  4. 必须透过 Babel 编译,才能使用

参考资料


<<:  30天学会 Python: Day 3-世界线分歧

>>:  【Day4】Navigation导航X注册画面X Firebase Auth

Day 17 Flask 静态文件

这篇主要是讲到静态文件,静态文件就是 CSS 、 JavaScript 与图片档之类的档案(因为在 ...

[Day4]C# 鸡础观念- 核心的数据成员~变数(二)

千变万化的字串变数 他为什麽千变万化呢?因为字串这种型别,别人给他什麽他就是什麽 就如同一位认真向学...

EP 12: Implement and Use a Custom ValueConveter

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~ 本篇是 Re: 从零开始用 Xamarin 技...

既熟悉又陌生的字元集与比较规则

我们都知道电脑实际储存的是二进位资料,那是怎麽储存字元的呢? 可以想像的就是必须让字元映射成二进位资...

苹果11消失的影片 没在手机了

苹果11 超过三十天的影片怎麽救回已经没在手机了 ...