当前项目模版中使用到的技术:
- 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 installnpm 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 }}
  ]
}
