大三學生的第二個基於 React 框架的輪播圖組件。

在以前文章中介紹了使用原生 JS 實現輪播圖插件的過程，你們能夠點擊這裏去查看，本文介紹一下基於 React 框架的輪播圖實現。

• 源碼地址
• 演示地址

目前在找實習工做，有合適的機會但願小夥伴們多多推薦~

概要

本文主要講述一個基於 React 的Slider 組件的開發過程，有些地方可能會比較囉嗦，大神能夠忽略~

雖然是一個小小的輪播圖組件，可是我仍是但願將它做爲一個完整的項目進行對待。

完整的開發過程以下：

• 項目背景
• 產品需求
• 開發需求
• 實現過程
• 提交代碼
• 發佈
• 小結

項目背景

現代Web項目的開發使用的技術棧通常不會採用原生 JS 或者基於 Jquery 進行刀耕火種式的開發，而是使用 React 或者 Vue 框架。 因爲咱們是基於 React 框架實現該輪播組件，因此咱們須要在 React 的規則以內進行開發。那麼，至少咱們須要熟悉 React 的使用以及組件開發過程。

React 的使用

React 是一個 MVVM 框架，擁有不少功能，但核心思想卻很明確。

React 的核心是數據驅動視圖以及組件化思想，因此咱們最經常使用到的就是：

• 經過 setState 改變狀態，同時驅動視圖更新。
• 將父組件中的數據經過 props 傳遞給子組件，完成父子數據傳遞。
• 將頁面拆分紅一個又一個的功能組件，而後將組件拼成一個個完整的模塊，最終組裝成一個頁面。

使用 React 開發組件

使用 React 開發組件，那麼少不了 Webpack，咱們須要接入 Babel 轉譯 ES6 和 jsx 語法。

產品需求

產品需求和大三學生的第一個輪播圖組件同樣。

• 可以實現自左向右的輪播。
• 輪播到最後一張圖時，可以無縫銜接到第一張圖。
• 點擊圖片可以跳轉到對應連接。
• 點擊縮略圓點可以滾動到對應圖片。

開發需求

開發需求也和大三學生的第一個輪播圖組件同樣。

• 支持圖片和點擊連接的可配置。
• 支持輪播持續時間的配置。
• 支持輪播間隔時間的配置。
• 支持輪播圖顯示容器的配置。
• 支持縮略圓點的顏色、激活顏色、半徑、距離底部位置的配置。

實現

• 首先，在 github 上建立一個倉庫react-slider。
• 將 github 建立好的倉庫拉取到本地。

  git clone 【倉庫地址】
  複製代碼

• 進入本地目錄

  cd react-slider
  複製代碼

• 初始化 npm 倉庫

  npm init
  複製代碼

• 編寫 Webpack 配置 咱們使用 html-webpack-plugin 打包 demo 頁面，用 webpack-dev-server在本地啓動一個服務器快速調試，同時支持 sass 和 less 語法支持。

完整的 webpack.config.js 配置以下：

const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const htmlWebpackPlugin = new HtmlWebpackPlugin({
        template: path.join(__dirname, "demo/demo.html"),
        filename: "./index.html"
    });
    module.exports = {
        entry: path.join(__dirname, "demo/demo.js"),
        output: {
        path: path.join(__dirname, "./dist"),
        filename: "dist.js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            }
        ]
    },
    plugins: [htmlWebpackPlugin],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    devServer: {
        port: 3001
    }
};
複製代碼

• 安裝依賴 爲了知足以上 webpack 配置的功能，咱們須要安裝一些依賴：

{
  "name": "react-slider-fjj",
  "version": "0.0.1",
  "description": "react-slider",
  "main": "./dist/slider.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode=development",
    "demo": "webpack --config ./webpack.config.js --progress --colors",
    "build": "babel slider -d dist --copy-files"
  },
  "author": "fengjiangjun",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "~6.26.0",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "source-list-map": "^2.0.1",
    "style-loader": "^0.23.1",
    "watchpack": "^1.6.0",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  }
}
複製代碼

注意，因爲 npm 是國外服務器，安裝過程可能會比較慢，爲了提升安裝速度，咱們須要將 npm 源改爲國內鏡像，目前使用最普遍的就是淘寶鏡像，咱們改一下。

npm config set registry http://registry.npmjs.taobao.org
複製代碼

這樣，在執行npm包的安裝操做時，速度會大大提高。

執行安裝命令

npm install
複製代碼

• 作好了準備工做，接下來開始編碼實現了。 輪播圖的主要難點在於如何在圖片輪播到最後一張時無縫切換到第一張，這個細節在上一篇大三學生的第一個輪播圖組件中已經進行了講解，因此本文就再也不作詳細描述啦，感興趣的話，你們能夠查看上一篇哈~

貼一下主要代碼：

import React from 'react';
import './index.css';
export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 1
    }
    this.container = React.createRef();
    this.imgWrapper = React.createRef();
    this.list = this.props.list;
    //將圖片數組的第一張圖放到數組最後，經過此方法 hack 無縫輪播。
    this.list.push(this.props.list[0]);
  }
  componentDidMount () {
    if (!this.list) {
      return;
    }
    this.container.current.style.width = this.props.width + "px";
    this.container.current.style.height = this.props.height + "px";
    this.imgWrapper.current.style.height = this.props.height + "px";
    const count = this.list.length;
    this.imgWrapper.current.style.width = count * this.props.width + 'px';
    this.time = setTimeout(this.loop.bind(this), this.props.intervalTime || 2000);
    this.imgWrapper.current.addEventListener('transitionend', () => {
      this.time = setTimeout(this.loop.bind(this), this.props.intervalTime || 2000);
      if (this.state.index == count) {
        this.imgWrapper.current.style.transition = '0s';
        this.imgWrapper.current.style.transform = 'translateX(0px)';
        this.state.index = 1;
      }
    })
  }
  loop () {
    if (this.state.index < this.list.length) {
      this.imgWrapper.current.style.transition = this.props.transitionTime || '2s';
      this.imgWrapper.current.style.transform = 'translateX(' + (-this.state.index * this.props.width) + 'px)';
    }
    this.setState(prevState => ({
      index: prevState.index + 1
    }))
  }
  render () {
    return <div className='container' ref={this.container}><div className='img-wrapper' ref={this.imgWrapper}> {this.list.map(item => { return <img src={item.text} style={{ width: this.props.width }} className='img-item' onClick={() => { window.open(item.href); }} /> })} </div> <div className="round-container"> {this.list.map( (item, index) => { if (index == this.list.length - 1) { return null; } if (this.state.index - 1 === index && this.state.index !== (this.list.length)) { return <div className="yello"></div> } if (this.state.index == (this.list.length) && index == 0) { return <div className="yello"></div> } return <div className='red' onClick={() => { clearTimeout(this.time); this.setState({ index: index }); this.time = setTimeout(this.loop.bind(this), 0); }}> </div> })} </div> </div> } } 複製代碼

• 推送到 github

推送到 github ，比較簡單了，只需幾步簡單的 git 命令便可。

// 保存本地修改
git add ./
// 提交本次修改
git commit -m ''
// 推送到遠程服務器。
git push origin master
複製代碼

可是咱們須要爲咱們的組件增長一個 demo 頁面，因此咱們最好可以將咱們的 demo 頁面提供給別人查看，這裏咱們依然採用 github 的功能。

一、首先新建一個分支 gh-pages，這個分支名字是固定的，不可換成其餘的，不然產生不了咱們的在線預覽頁面。

git checkout -b gh-pages
複製代碼

二、其次生成本地的demo頁面。

npm run demo
複製代碼

將 gh-pages 分支內容推送到 github。

三、到 github 網站對應的倉庫上，點擊 Settings：

四、往下翻到 github pages 節點

看到的這個網址，就是該項目對應的 gh-pages 的根目錄。

通過以上幾個簡單的命令，咱們就可以將本地的 demo 頁面推送到 github 服務器供別人預覽了。

發佈到 npm 倉庫。

• 首先，咱們要有npm 帳戶，若是沒有，請先去 npm 網站去註冊。 假設 testuser 爲你的 npm 帳號。

首次發佈命令以下：

npm adduser testuser
npm publish
複製代碼

若是以前成功執行過npm adduser，那麼以後的發佈命令僅僅使用 npm publish便可。

通過這兩個簡單的命令，咱們就將組件發佈到了npm 倉庫中，此時，其餘同窗就能夠經過npm 安裝該組件進行使用了。

小結

做爲一個準前端畢業生，在學習前端過程當中勢必會遇到點點滴滴的知識，這些知識點對於之後工做是頗有幫助的，有一些是常常會打交道的，好比 git 經常使用命令，npm 經常使用命令，因此在此作個總結，但願能給將來的前端開拓者帶來一些幫助。

以上就是 React 版本 Slider 的開發過程，但願能給你們帶來幫助。