iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 2
1
自我挑戰組

React基礎系列 第 2

第二天,React的變數竟然可以放html的tag,這個功能叫JSX

JAVA SCRIPT 是不能接受變數中有html標籤如之類的。
而這個可以接受html標籤的功能叫JSX,就是可以將一般的內容加上HTML的標籤使用。
而這個功能必須匯入babel.min.js這個函式庫。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

而今天的內容這和昨天的差不多,只不將Hello react移到外面裝入jsxdata變數中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
	<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/babel.min.js"></script>
  </head>
  <body>
    <div id='dom'></div>
    <script type='text/babel'>
	  var jsxdata = <a>Heloo react</a>
	
      ReactDOM.render(
        jsxdata,
        document.getElementById('dom')
      );
    </script>
</body>
</html>

說明:
var jsxdata = Heloo react
ReactDOM.render(參數一,參數二);而參數一就只能接受JSX的內容,它准許變數型態的資料,但變數形態的資料最後一定要用HTML標籤夾在一起。

錯誤例子:ReactDOM.render(hello+hello,document.getElementById('hello'));
錯誤例子:ReactDOM.render(helloreact,document.getElementById('hello'));
正確例子:ReactDOM.render(hello+hello,document.getElementById('hello'));
正確例子:ReactDOM.render(hello,document.getElementById('hello'));


上一篇
第一天,直接用html來寫React的Hello world
下一篇
第三天,React關於JSX
系列文
React基礎12

尚未有邦友留言

立即登入留言