最近各种校招面试,感觉自己在前端框架方面还是弱爆了。
现在如果只懂得JQuery、Vue,已经不够了。
听说React和Vue很像,好吧,来试试!
①NPM安装React
用了Node.js后,当然首选是npm安装了。下面是整个package.json:
{
"name": "r1online",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {,
"jsx-loader": "^0.13.2",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline"
},
"author": "",
"license": "ISC"
}
从上面可以看出,一共需要安装5个包,下面babel是为了ES6而装的。
##②配置webpack
我从来没有想过,原来webpack.config.js这个配置文件是要自己手动去添加的:
var path = require("path");
var webpack = require('webpack');
module.exports = {
entry: { app: ['./app/main.jsx'] },
output: {
path: path.resolve(__dirname, "./build"),
publicPath: "http://127.0.0.1:8081/build/",
filename: "bundle.js"
},
resolve: {
extensions: ['','.js','.jsx']
},
module: {
loaders: [
{test:/\.jsx$/, loaders:['jsx?harmony']}
],
//使用ES6时,才需要添加此loaders
// loaders:[
// {
// test: /\.jsx?$/,
// loader: 'babel',
// include: ROOT_PATH,
// query: {
// //添加两个presents 使用这两种presets处理js或者jsx文件
// presets: ['es2015', 'react']
// }
// }
// ]
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
port: 8081
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE.ENV':"development"
}),
new webpack.HotModuleReplacementPlugin()
]
};
③添加程序文件app/main.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var AppComponent = require('./components/Comment.jsx');
ReactDOM.render(<AppComponent />, document.getElementById('content'));
④添加组件app/components/Comments.jsx
var React = require('react');
var Comment = React.createClass({
render: function(){
<div className="comment">
This is a React component!
</div>
}
});
module.exports = Comment;
⑤添加主页build/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Test</title>
</head>
<body>
<div id="content"></div>
<script src="http://127.0.0.1:8080/build/bundle.js"></script>
</body>
</html>
在过程中遇到的问题:
1、events.js:160 throw er
原因:看到下面Error: listen EADDRINUSE 127.0.0.1:8080,可知是端口被占用。
解决方案:
首先:在webpack.config.js里,修改“publicPath”为”http://127.0.0.1:8081/build/”
然后:在devServer添加:port: 8081
最后:在index.html修改成(否则读取到的是8080的bundle.js):
<script src="http://127.0.0.1:8081/build/bundle.js"></script>
2、跨域问题
原因:Node.js将localhost、127.0.0.1当作成不同域
解决方案:访问的时候用 webpack.config.js 里面配的 publicPath 的 ip 访问即可,不要用localhost
3、不小心将node_modules推上了远程仓库git
解决方案:git rm -r –cached node_modules
上面的指令是删除本地仓库中的文件,且本地工作区的文件会保留且不再与远程仓库发生跟踪关系,最后再commit、push一次就行了
友情链接(零度大神):
http://blog.csdn.net/zmx729618/article/details/60957363
4、查看git的公钥
cat ~/.ssh/id_rsa.pub
5、CSS重置
@charset "UTF-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button,
input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
.clearfix:before, .clearfix:after{ display: table; content: ''; }
.clearfix:after{ clear:both; }
.clearfix{ zoom:1; }