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')
);