React SPA学习（一）

标签：end   组件   conf   exports   str   logs   install   ade   font   

一、配置项目工程

1. 初始化工程

   mkdir RSPA
   cd RSPA
   npm init

2. 配置package.json中的dependencies、devDependencies

   在package.json里面dependencies依赖包的版本号前面的符号有两种，一种是~，一种是^：
   1.~的意思是匹配最近的小版本 比如~1.0.2将会匹配所有的1.0.x版本，但不匹配1.1.0
   2.^的意思是最近的一个大版本 比如1.0.2 将会匹配 所有 1.x.x, 但不包括2.x.x
   "dependencies": {
     "isomorphic-fetch": "^2.2.1",
     "prop-types": "^15.5.10",
     "react": "^15.5.0",
     "react-dom": "^15.5.0",
     "react-redux": "^5.0.5",
     "react-router": "^2.8.1",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0"
   },
   "devDependencies": {
     "babel-core": "^6.18.2",
     "babel-loader": "^6.2.8",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "css-loader": "^0.23.1",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1"
   }
   

3. 执行npm install，下载依赖库（项目根目录会生成node_modules文件夹，依赖库放入其中）

   --1.npm install 会根据package.json中配置的dependencies、devDependencies中配置的依赖包进行下载（区别：前者是项目正常运行所需要的依赖；后者是开发时项目所需的依赖项）
   --2.当需要添加新依赖时，安装在dependencies执行：
   npm install packagename --save
   --2.安装在devDependencies中执行：
   npm install packagename --save-dev

4. 配置webpack.config.js文件

   //推荐学习阮一峰老师webpack教程
   //gitHub地址：https://github.com/ruanyf/webpack-demos
   // webpack.config.js
   const webpack = require(‘webpack‘);
   const ROOT_PATH = path.resolve(__dirname);
   const SRC_PATH = path.resolve(ROOT_PATH, ‘src‘);
   const ENTRY_FILE = path.resolve(SRC_PATH, ‘index‘);
   const BUILD_PATH = path.resolve(ROOT_PATH, ‘/public/dist‘);
   
   module.exports = {
       entry: {
           bundle: ENTRY_FILE
       },
       output: {
           publicPath: BUILD_PATH,
           path: BUILD_PATH,
           filename: ‘[name].js‘
       },
       module: {
           loaders: [
               {
                   test: /\.js[x]?$/,
                   exclude: /^node_modules$/,
                   loader: ‘babel-loader‘,
                   query: {
                       presets: [‘es2015‘, ‘react‘]
                   }
               },
               {
                   test: /\.css$/,
                   loader: ‘style-loader!css-loader?modules‘
               },
               {
                   test: /\.(png|jpg)$/,
                   loader: ‘url-loader?limit=8192‘
               }
           ]
       },
       plugins: [
           new webpack.DefinePlugin({
               __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV))
           }),
           new webpack.optimize.UglifyJsPlugin({
               compress: {
                   warnings: false
               }
           })
       ]
   };

5. 配置package.json中的scripts值
6. 创建存放项目各资源文件夹
7. 构建webpack.config.js中配置的入口文件index.js及发布的index.html

二、开始项目

1. 通过react-router构建项目导航
2. 开发基本组件
3. 通过redux进行状态管理
4. 通过fetch模块对动态数据进行请求

三、编译项目

四、对项目进行详细需求设计，绘制流程图，细分任务完成节点，完成项目记录

React SPA学习（一）

标签：end   组件   conf   exports   str   logs   install   ade   font   

原文地址：http://www.cnblogs.com/wb7753/p/7496492.html