環境搭建
react.js
核心文件
react-dom.js
渲染頁面中的DOM，當前文件依賴於react核心文件
babel.js
ES6 轉換成 ES5 將 JSX語法轉換爲JavaScript，方便瀏覽器進行代碼的兼容
下載
react核心包 npm i react --save
react-dom npm i react-dom --save
babel npm i babel-standalone --save
入門程序
流程:
- 導包
- 創建dom根節點
- 在下面寫 js代碼
<script type="text/babel"> - 創建一個節點
- 渲染頁面
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<!-- 創建dom根節點 一個頁面中需要有一個根節點，這個節點下的內容就會被react所管理-->
<div id="demoReact">
</div>
<script type="text/babel">
let MyDom = <h1>
{/* 我是註釋信息 */}
Hello, world!
</h1>
ReactDOM.render(
MyDom,
document.getElementById('demoReact')
);
</script>
</body>
</html>