Git Product home page Git Product logo

201707ketang's Introduction

启动项目

git clone https://github.com/zhufengnodejs/201707ketang
cd 201707ketang
npm install
cd server
node server.js
cd ..
npm run dev

环境搭建

初始化项目

npm init -y

安装后端依赖的模块

npm install body-parser express express-session -S
  • body-parser 解析请求体
  • express node开发框架
  • express-session 会话中间件

安装前端依赖的模块

npm install es6-promise history react react-dom react-redux react-router-dom react-router-redux@next history react-swipe react-transition-group redux redux-thunk swipe-js-iso whatwg-fetch -S
  • es6-promise 在低版本浏览器上兼容promise
  • history 操作历史
  • react react核心库
  • react-dom DOM操作相关的库
  • react-redux 把react和redux连接起来的库
  • react-router-dom react路由库
  • react-router-redux 把react路由和redux结合起来的库
  • react-swipe swipe-js-iso react版轮播图库
  • react-transition-group react动画
  • redux 状态管理库
  • redux-thunk 在redux中实现异步操作
  • whatwg-fetch 让浏览器兼容fetch

安装开发依赖模块

npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0  babel-preset-react   url-loader file-loader  less less-loader style-loader css-loader webpack webpack-dev-server html-webpack-plugin babel-plugin-transform-decorators-legacy -D
  • babel-core babel核心库
  • babel-loader babel加载器
  • babel-preset-es2015 把es6转成es5的预设
  • babel-preset-stage-0 把es7转成es5的预设
  • babel-preset-react 把react转成es5预设
  • css-loader 加载css文件加载器
  • style-loader 注入css模块的加载器
  • less less-loader 把less编译成css
  • file-loader 加载二进制文件
  • webpack webpack打包器
  • webpack-dev-server webpack开发服务器
  • html-webpack-plugin 自动产出html的webpack插件

配置启动命令

"scripts": {
   "dev": "webpack-dev-server --open"
  },

webpack配置文件

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  //入口文件
  entry: './src/main.js',
  //输出配置
  output:{
    path:path.resolve('./build'),//打包后存放的目录
    filename:'bundle.js',//打包后存放的文件名
  },
  //配置调试工具,报错的话会提示源码的位置
  devtool:'cheap-module-source-map',
  module:{
    rules:[
      {
        test:/\.js$/,
        use:'babel-loader',
        exclude:/node_modules/
      },
      {
        test:/\.less$/,
        use:["style-loader","css-loader","less-loader"]
      },
      {
        test:/\.(png|jpg|gif|bmp)$/,
        use:'url-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ]
}

编写导航Tab页

  • containers 对应一个页面
  • components

引入redux

  • 创建仓库 - reducer(初始状态)
  • 连接组件 react-redux
    • Provider
    • connect

编写redux业务

  1. 增加一个动作类型 action type - FETCH_SLIDERS
  2. 修改reducer,增加一个case - case types.FETCH_SLIDERS:
  3. 增加一个actions方法 - fetchSliders
  4. 在组件里调用此action方法

react-router-redux

  1. App 路由容器要改为 ConnectedRouter
  2. Store 创建仓库的时候要提供 routerMiddleware
  3. reducer 增加 routerReducer
  4. action 跳转路径

201707ketang's People

Contributors

zhufengnodejs avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.