django+react

后端： 

       >>> pip install Django==1.11 
       >>> sudo pip  install django-webpack-loader    
           Successfully installed django-webpack-loader-0.6.0 
       >>>  python -m django --version                1.11.11
  
      需要解决跨域问题， 前端才能访问

前端：
    node和npm安装， 包下载： http://nodejs.cn/download/ 
        解压：/usr/local/application
        $ sudo tar xvJf node-v12.14.1-linux-x64.tar.xz                     
          sudo mv node-v12.14.1-linux-x64 nodejs                   
          sudo ln -s /usr/local/application/nodejs/bin/npm /usr/local/bin/                    
          sudo ln -s /usr/local/application/nodejs/bin/node /usr/local/bin/

webpack管理项目：

   webpack              
       前端项目模块（css，js，img）管理工具，把项目所有依赖的库打包到一个或多个bundle文件（例如，bundle.js）。         
   babel               
       Javascript 编译器，能把新的 ES6 语法转换成 ES5 语法，兼容现有的浏览器。         
   webpack-bundle-tracker                 
         把 webpack 编译过程记录到文件（webpack-stats.json），供 django-webpack-loader 使用

3. 生成项目      
     * 创建 React 项目         在项目根目录下，新建 frontend 目录，使用 npm init 创建前端项目。
       : $ mkdir frontend && cd frontend && npm init          
     目录结构如下：           
         user@conti-del-lp-018:~/Documents/backup_code/new_atp/Fashion_ATP$ ll            
          total 24           
          drwxrwxr-x 5 user user 4096 1月  10 14:46 ./           
          drwxrwxr-x 3 user user 4096 1月  10 14:46 ../           
          drwxrwxr-x 2 user user 4096 1月   9 16:21 Fashion_ATP/            
          drwxrwxr-x 4 user user 4096 1月  10 14:46 frontend/            
          -rwxr-xr-x 1 user user  809 1月   9 15:17 manage.py   
 4. 安装 React 开发相关的依赖      
      $ cd frontend $ npm install --save-dev babel-cli babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 react        
        react-dom react-hot-loader webpack webpack-cli webpack-bundle-tracker webpack-dev-server          
        安装出现错误：         Error: connect ECONNREFUSED 104.16.18.35:443      
         解决办法：           设置npm的代理： npm config set proxy=http://10.69.60.221:8080 ,  npm config set registry=http://registry.npmjs.org                   
                 其中，--save-dev 会把依赖写入package.json。这些第三方库位于当前项目下node_modules目录。如果有些库需要全局使用，                        
                 安装时需要用-g选项。如果需要重装依赖库，只需要执行npm instal。       
    创建 webpack 配置文件                   
      $ cd frontend       $ mkdir -p assets/js       $ touch webpack.config.js $ touch assets/js/index.js 
                 其中，assets/js目录为我们代码所在目录。webpack.config.js是webpack的配置文件。assets/js/index.js是项目的入口文件。            
      webpack 从该文件开始加载所有项目依赖模块。Webpack 官方配置手册
 5. 修改 webpack.config.js   



create-react-app创建多页面应用      

1. /usr/local/application/nodejs/bin/create-react-app my-app

2. npm install jquery --save

3. npm install bootstrap@3 --save

4. 配置 config/webpack.config.js 文件，需要先运行 npm run       eject 命令（默认webpack的配置文件都是没有的，运行这个命令才能调出来）
   run之前需要运行:
        git add .
        git commit -am "Save before ejecting"

前端遇到的相关问题：

问题1：
     File "/usr/local/lib/python3.5/dist-packages/webpack_loader/loader.py", line 43, in filter_chunks
     for regex in self.config['ignores'])
     File "/usr/local/lib/python3.5/dist-packages/webpack_loader/loader.py", line 43, in <genexpr>
     for regex in self.config['ignores'])
     TypeError: string indices must be integers

   解决办法：
    npm install --save-dev webpack-bundle-tracker@0.4.3