您的位置：首页 > Web前端 > React

mac osx下 react 开发环境搭建

2016-04-19 22:07 603 查看 

mac osx
下 
react
开发环境搭建

你必须先安装nodejs

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-es2015
sudo cnpm install --save babel-preset-stage0


建立项目文件

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: {
path: './',
filename: 'app.js',
},

devServer: {
inline: true,
port: 8080
},

module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',

query: {
presets: ['es2015', 'stage-0', 'react']
}
}]
}

};
module.exports = config;


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 完成了

开始你的react之路吧

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  mac osx react 环境搭建 开发
相关文章推荐
新的分享
章节导航