当前项目模版中使用到的技术:
- React 16
- React Router4
- React Hot Loader 模块热加载
- Babel ES6 、ES7 语法转换
- Webpack3 打包工具
- webpack Dev Server
- Redux
- React Router Redux Redux/React 路由绑定.
- ESLint 保持一致的代码风格
- Superagent 接口调用
- bundle-loader 按需要加载相应页面的JS
- Postcss Loader 兼容不同浏览器样式加前缀
npm install 或者 yarn install
npm run dev
起来在浏览器上输入:http://127.0.0.1:11111/react; /react这个是可以在config.js里进行配置,这个就是route basename。
npm run build
项目打包后,会在项目根目录里生成 dist/www目录,拿到这个就可以进行部署了。
如果部署到Nginx里面,如果出现在404的时候,可以参考:Nginx配置ReactJs项目,Url后面直接输入路由路径时老报404问题。
render(){
const image = require('../img/demo.png);
return(
<div style={{background:'url(' + image + ')'}}></div>
);
}
render(){
const styles = require('./scss/style.scss');
return (
<div className = {styles.className}> class name</div>
);
}
webpack.dev.config
const styles = require('./demo.scss');
render(){
return(
<div className={styles.className}>content</div>
);
}
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{
loader: "css-loader", options: {
sourceMap: true,
modules: true, minimize: true,
localIdentName: '[local]_[hash:base64:5]'
}
},
{loader: "sass-loader", options:{sourceMap:true }}
]
}