mac osx下 react 開發環境搭建
阿新 • • 發佈：2019-02-03
mac osx下 react 開發環境搭建
你必須先安裝nodejs
安裝開發輔助工具包
sudo cnpm install babel -g
sudo cnpm install babel-cli -g
sudo cnpm install webpack -g
sudo cnpm install webpack-dev-server -g
sudo cnpm install gulp -g
sudo cnpm install react -g建立專案資料夾
mkdir myreact
cd myreact初始化開發環境
npm init一直回車即可生成 package.json
安裝需要使用的工具包
--save 命令用於將包新增至 package.json 檔案
sudo cnpm install --save react
sudo cnpm install --save react-dom
sudo cnpm install --save babel
sudo cnpm install --save babel-core
sudo cnpm install --save babel-loader
sudo cnpm install --save babel-preset-react
sudo cnpm install --save babel-preset 建立專案檔案
index.html
component.jsx
main.js
webpack.config.js //webpack配置檔案編輯package.json
#在 "scripts":{}
#{}內 新增一行
"dev": "webpack-dev-server --hot",配置webpack
編輯webpack.config.js
var config = {
entry: './main.js',
output index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello react</title>
</head>
<body>
<div id="app">
</div>
<script src="app.js"></script>
</body>
</html>
component.jsx
'use strict';
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
hello holoto !!<br/>
</div>
);
}
}
export default App;main.js
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './component.jsx';
ReactDOM.render(<App />, document.getElementById('app'))
react hello world
命令列下執行dev命令
npm run dev在瀏覽器中檢視
位址列輸入http://127.0.0.1:8080/
看到
hello holoto !!就這樣 react的hello world 完成了