關于react
首先推薦先看阮一峰的react技術棧教程 React技術棧教程
其中的 React入門 | webpack 對了解react非常有用
然后推薦使用es6語法編寫react組件。es5和es6的寫法不同 同樣推薦阮的es6入門
開始 （現在編寫一個組件LoginBox）
必備 npm環境 (略)
新建項目目錄example，安裝react必要組件
npm init
npm install --save react
npm install --save react-dom
npm install --save-dev webpack //打包圖片 css js的工具
npm install --save-dev webpack-dev-server//實時調試工具
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react //這些都是轉化jsx語法到js的各種包 按需install
- 新建LoginBox.js
引用react
import React from 'react';
編寫組件代碼(示例)
class LoginBox extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<form method="post" >
<div>
<label htmlFor="username">賬戶名</label>
<input type="text" name="username" placeholder="電子郵箱或者手機號碼" />
</div>
<div>
<label htmlFor="password">密碼</label>
<input name="password" id="password" placeholder="注冊賬戶時所用密碼" type="password" />
</div>
<button type="submit" >登入</button>
</form>
</div>
);
}
}
export default LoginBox
- 新建一個main.js ( webpack 入口文件 )
首先 頁面可能需要引用js,css等文件 所以先在main.js中引用
import './site.css'
import './example.js'
引用react 和react-dom
import React from 'react';
import ReactDOM from 'react-dom';
引用剛寫的LoginBox, (這樣就可以在main.js中直接使用<LoginBox />標簽)
import LoginBox from './loginbox';
編寫main.js具體代碼
const app = document.querySelector('#app');
const LoginPage = React.createClass({
render() {
return (
<div>
//其他html代碼
<LoginBox />
</div>
);
}
});
ReactDOM.render(<LoginPage/>, app); //將上面的html 綁定到id為app的標簽下
- 使用webpack打包成一個js文件，然后在頁面中引用
新建webpack.config.js文件，來讓webpack命令找到相應的目錄并使用對應的加載器(loader)來打包各種文件
module.exports = {
entry:
__dirname+'/main.js', //__dirname 是webpack.config.js文件所處的目錄
output: {
path: __dirname,
filename: 'cuslogin.js'//最后導出的文件
},
module: {
loaders:[{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query:{
presets:['es2015','react']
}
},{ test: /\.css$/,
loader: 'style-loader!css-loader' }
]
}};
輸入webpack命令打包上面所有文件，生成 cuslogin.js
webpack
- index.html
最后在html頁面就能引用剛剛生成的js
<!DOCTYPE html>
<html lang="zh">
<body>
<div id="app"></div>
<script src="cuslogin.js"></script>
</body>
</html>
- 調試查看index.html頁面
輸入命令webpack-dev-server，這是一個小型服務器，可以在8080端口打開當前目錄
webpack-dev-server
- 瀏覽器打開 http://localhost:8080 就能直接看到index.html頁面了
