react 第二天,將Hello world 裝入變數中(JSX)

react

jbuduoo 2020-07-23 09:40:31 ‧ 1213 瀏覽

分享至

react 第二天,將Hello world 裝入變數中(JSX)

這和昨天的差不多，只不將Hello react移到外面。

<!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 hello = <a>Heloo react</a>
	
      ReactDOM.render(
        hello,
        document.getElementById('dom')
      );
    </script>
</body>
</html>

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

var hello = <a>Heloo react</a>

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

錯誤例子:ReactDOM.render(hello+hello,document.getElementById('hello'));
錯誤例子:ReactDOM.render(<a>hello</a><div>react</div>,document.getElementById('hello'));
正確例子:ReactDOM.render(<div>hello+hello</div>,document.getElementById('hello'));
正確例子:ReactDOM.render(<div>hello</div>,document.getElementById('hello'));