react-slider

发表于   |     |   阅读次数

前言

react 自从去年火起来之后，在前端的应用可谓广泛，许多人为之倾倒，组件化，虚拟dom，从很大程度上将前端开发者的思维从jQuery dom操作的时代劈将开来。几个月之前用react配合webpack打包尝试写了一个轮播图滚动组件，一直没有纪录和总结下来，现在重新翻起，希望可以将其写成一篇博文，一是回顾react基本用法和应用，二是坚持写博文的习惯。

github地址

轮播图组件预览如下图

轮播图图示

组件分析

首先我想做的组件主要目的是展示多张图片，并且可以通过左右按钮来进行切换，又或者可以通过底部的小点按钮进行图片切换。简要的画了一张组件示意图如下，将其拆分开来，可以分成

  1. 左右箭头（控制图片的左右切换）
  2. 底部小圆点（切换图片）
  3. 中间图片展示区域

几个部分。

组件分析

项目目录结构

对要做的组件有了一个比较明确的划分之后，可以开始规划目录结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
--app
  --components
  	 --App // 最终输出的完成的图片轮播组件
  	 	--App.js
  	 	--App.scss
  	 --Arrows // 箭头小组件
  	 	--Arrows.js 
  	 	--Arrows.scss
  	 --Dots // 小点组件
  	 	--Dots.js
  	 	--Dots.scss
  	 --Imgs // 图片组件
  	 	--Imgs.js
  	 	--Imgs.scss
  --images
  	 ... // 一些项目用到的图片
  --libs
    --base.js // 输出react 需要用到的 React 和 DOM
  --styles
  	 ... // 项目scss
  --index.js	// 入口文件
--package.json // 项目依赖与相关说明
--READEME.md	 
--webpack.config.js // webpack配置文件
--webpack.production.config.js // 构建脚本

代码分析

  • webpack配置文件

webpack的配置文件很平常，就是日常项目里面用到的一点知识。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
  entry: APP_PATH, // 入口文件
  output: { // 输出文件
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  devServer: { // 静态服务
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
  },
  module: {
    loaders: [
      { // sass loader
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
        include: APP_PATH
      },
      { // 图片loader 大于4兆的图片转成base64
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
      },
      { // es6语法支持loader
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          presets: ['es2015','react']
        }
      }
    ]
  },
  plugins: [ 
    new HtmlWebpackPlugin({// 快速生成html插件
      title: 'hello world app'
    }),
    new webpack.ProvidePlugin({ // jQuery插件
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}
  • lib/base.js

该文件主要作用是输出react和react-dom的引用这样在写箭头组件、小点组件、图片组件的时候就可以不用每次都去 import了。

1
2
3
4
5
6
7
import React from 'react';
import Render from 'react-dom';
export {
  React,
  Render
}

很简单吧，就四句，后面需要用到react这两个关键库的时候可以通过以下方式

1
import {React, Render} from './libs/base';

待续