iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
0
自我挑戰組

React基礎系列 第 1

第一天,直接用html來寫React的Hello world

React的Hello world

react 最簡單的呈現,就是在notepade隨便打開一頁,貼上以下的內容,就檔案存成index.html,之後直接開啟檔案。
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='hi'></div>
    <script type='text/babel'>
	
	
      ReactDOM.render(
        <a>Hello react</a>,
        document.getElementById('hi')
      );

    </script>


</body>
</html>

宣告react.development.js,就可以使用react方法

<script src="../build/react.development.js"></script>

宣告babel.min.js並在script type="text/babel"加上babel就可以使用JSX語法,例hello,React的語法一定要寫在script之間

<script src="../build/babel.min.js"></script>
<script type="text/babel">
	...
	...
</script>

宣告react.development.js,就可以使用ReactDOM方法

<script src="../build/react-dom.development.js"></script>

DOM 元素
ReactDOM.render(參數一,參數二);
參數一:要替換的內容,但一定要用tag包起來。例hello
參數二:要放置的位置

ReactDOM.render(
  <a>Hello react</a>,
  document.getElementById('hi')
);

下一篇
第二天,React的變數竟然可以放html的tag,這個功能叫JSX
系列文
React基礎12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言