如何编写一个react组件并使用
2016-10-21 本文已影响435人
cowkeys
关于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页面了
