React 可被靈活地運用在各種項目中。你可以用它創建新的應用程式,也可以逐漸地將其加入到現有的代碼庫中而無需重寫。 ...
React Learn Note 1
React學習筆記(一)
標簽(空格分隔): React JavaScript
前、Hello World
1. 創建單頁面應用
使用Create React App。
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
準備好部署到生產環境中時,運行npm run build
將會在build文件夾中創建一個優化好的應用。
2. 添加到現有應用
首先需要安裝包:
npm init
npm install --save react react-dom
開發環境使用 react.development.js``react-dom.development.js
。
生產環境使用react.production.min.js``react-dom.production.min.js
。
- 如果使用像webpack或Browserify這樣的構建工具:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world</h1>,
document.getElementById('root')
);
- 如果通過引用文件使用
註意script
標簽type是text/babel
,而且需要引用 babel-standalone:
<!DOCTYPE html>
<html>
<head>
<title>react demo</title>
<script type="text/javascript" src="./node_modules/babel-standalone/babel.js"></script>
<script type="text/javascript" src="./node_modules/react/umd/react.development.js"></script>
<script type="text/javascript" src="./node_modules/react-dom/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
The end... Last updated by: Jehorn, Jan 03, 2018, 4:51 PM