开始前我们先直接上一段程序码
const element = <div style= {{ color: red }}>123</div>
读者看到这边应该会很好奇为何我们可以直接在 JavaScript
上,直接撰写 HTML
、CSS
。注意喔,
<div style= {{ color: red }}>123</div>
这段程序码前後并没有单引号所以不是字串喔!
这种可以直接在 JavaScript
上撰写 HTML
的做法就是 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
。
JSX
语法中只能有一个根元素{}
包起来<div className="Demo"></div>
>>: 【Day4】Navigation导航X注册画面X Firebase Auth
这篇主要是讲到静态文件,静态文件就是 CSS 、 JavaScript 与图片档之类的档案(因为在 ...
千变万化的字串变数 他为什麽千变万化呢?因为字串这种型别,别人给他什麽他就是什麽 就如同一位认真向学...
Hello, 各位 iT邦帮忙 的粉丝们大家好~~~ 本篇是 Re: 从零开始用 Xamarin 技...
我们都知道电脑实际储存的是二进位资料,那是怎麽储存字元的呢? 可以想像的就是必须让字元映射成二进位资...
苹果11 超过三十天的影片怎麽救回已经没在手机了 ...