WebPack+React.Js+BootStrap 實現進制轉換工具

時間 2019-12-06

標籤 webpack+react.js+bootstrap webpack react bootstrap 實現進制轉換工具欄目 React 简体版

原文原文鏈接

一.WebPack入門

1.WebPack簡介

WebPack是模塊打包機：分析項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。css

2.如何使用WebPack

1.安裝:html

(1)全局安裝:node

npm install -g webpack

(2)安裝到項目中:react

npm install --save-dev webpack

2.配置使用:webpack

(1)項目的目錄結構:git

(2)目錄解析:github

在項目目錄中建立兩個文件夾，一個是app,另外一個是public.接着再建立一個文件index.html放置在public中。public用於放置頁面的入口文件，app用來放置js文件。web

(3)WebPack的配置文件(webpack.config.js):正則表達式

module.exports = {
        entry:  __dirname + "/app/main.js",//惟一入口文件
        output: {
            path: __dirname + "/public",//打包後文件bundle.js存放的地方
            filename: "bundle.js"//打包後輸出文件的文件名
        }
    }

3.生成Source Maps（使調試更容易）npm

(1)Source Maps是Webpack在打包時能夠爲咱們生成的source maps，爲咱們提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試。在webpack的配置文件中配置 source maps，須要配置devtool

(2)devetool配置選項優缺點

*上述選項由上到下打包速度愈來愈快，不過同時也具備愈來愈多的負面做用，較快的構建速度的後果        就是對打包後的文件的的執行有必定影響。*

(3)WebPack的配置文件(webpack.config.js):

module.exports = {
        devetool:'eval-source-map',//配置Source Maps選項,選擇合適的選項
        entry:  __dirname + "/app/main.js",//惟一入口文件
        output: {
            path: __dirname + "/public",//打包後文件bundle.js存放的地方
            filename: "bundle.js"//打包後輸出文件的文件名
        }
    }

3.使用webpack-server實時監測代碼並刷新

1.安裝:

npm install --save-dev webpack-dev-server

2.WebPack的配置文件(webpack.config.js)

module.exports = {
        devetool:'eval-source-map',//配置Source Maps選項,選擇合適的選項
        entry:  __dirname + "/app/main.js",//惟一入口文件
        output: {
            path: __dirname + "/public",//打包後文件bundle.js存放的地方
            filename: "bundle.js"//打包後輸出文件的文件名
        }

        devServer: {
            port: 8080,//設置服務器監聽的端口，默認是8080
        contentBase: "./public",//本地服務器所加載的頁面所在的目錄
        colors: true,//終端中輸出結果是否爲彩色
        historyApiFallback: true,//是否使用不跳轉，通常是在開發單頁面應用比較有優點
        inline: true//是否開啓實時刷新
      }
    }

4.使用Loaders處理加載文件

1.安裝:

npm install --save-dev json-loader

2.配置文件(webpack.config.js):

module.exports = {
        devtool: 'eval-source-map',
        entry:  __dirname + "/app/main.js",
            path: __dirname + "/public",
        filename: "bundle.js"
        },

        module: {//在配置文件裏添加JSON loader
        loaders: [
                {
            test: /\.json$/,//匹配.json類型的文件
            loader: "json"
                }
        ]
        },
      
        devServer: {
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true
        }
    }

*這樣一來，就能夠經過在js文件代碼中引入json格式的文件。*

    import config from './config.json'
    console.log(config.text);

5.使用Babel轉換JavaScript語言標準

1.安裝:

//一次性安裝多個模塊
    npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
    npm install --save react react-dom

2.簡介Babel:

*我的用途是用來解析Es6的語法格式還有JSX的語法，轉換後使得瀏覽器可以使用*

3.配置文件(webpack.config.js):

test: 一個匹配loaders所處理的文件的拓展名的正則表達式(required)

loader: loader的名稱(required)

include/exclude: 手動添加必須處理的文件(文件夾)或屏蔽不須要處理的文件(文件夾)(optional)

query: 爲loaders提供額外的設置選項(optional)

module.exports = {
        devtool: 'eval-source-map',
        entry:  __dirname + "/app/main.js",
            path: __dirname + "/public",
        filename: "bundle.js"
        },

        module: {//在配置文件裏添加JSON loader
        loaders: [
                {
            test: /\.json$/,//匹配.json類型的文件
            loader: "json"
                },
                {
            test: /\.js$/,//匹配.js文件
            exclude: /node_modules/,//排除哪一個文件不加載
            loader: 'babel',//在webpack的module部分的loaders裏進行配置便可
            query: {
              presets: ['es2015','react']
            }
                }
        ]
        },
      
        devServer: {
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true
        }
    }

二.React.Js實現進制轉換工具

1.HTML主界面實現

搭建好React的工具平臺以後咱們就能夠實現工具的製做了^_^

HTML節目十分簡單，裏面就只有一個div容器，還有一個使用bootstrap用來裝飾的導航欄，如此而已。讓咱們看一下代碼吧！

index.html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <title>在線進制轉換工具</title>
    </head>

    <body>
        <nav class="container-fluid navbar-inverse" role="navigation">
            <div class="container">
                <h3 class="navbar-text">進制轉換工具</h3>
            </div>
        </nav>
        <div id='root'></div>
        <script src="bundle.js"></script>
    </body>
</html>

2.React組件實現

1.定義兩個React子組件(InputNumber.js,OutputNumber.js)，用來後面的視圖調用

先給出代碼吧！

(1) InputNumber.js:

import React, { Component } from 'react'
import {
  Grid,
  Row,
  Col,
  FormControl,
  ControlLabel,
  FormGroup,
  Radio,
  InputGroup,
} from 'react-bootstrap'

class InputNumber extends React.Component {
  constructor(props) {
    super(props);
    var checkedList = [false, false, false];
    checkedList[this.props.checked] = true;
    this.state = {
      checkedList: checkedList,
      number: this.props.number
    }
  }
  selectHandleChange(event) {
    var checkedList = [false, false, false];
    checkedList[event.target.value] = true;
    this.setState({
      checkedList: checkedList
    });
    this.props.callbackCheckedChange(event.target.value);
  }
  textHandleChange(event) {
    this.setState({
      number: event.target.value
    });
    this.props.callbackNumberChange(event.target.value);
  }
  render() {
    return (
      <Grid>
        <FormGroup>
          <Radio inline name="binary" value="0" onChange={this.selectHandleChange.bind(this)} checked={this.state.checkedList[0]} >二進制</Radio>
          <Radio inline name="decimal" value="1" onChange={this.selectHandleChange.bind(this)} checked={this.state.checkedList[1]} >十進制</Radio>
          <Radio inline name="hexadecimal" value="2" onChange={this.selectHandleChange.bind(this)} checked={this.state.checkedList[2]} >十六進制</Radio>
        </FormGroup>
        <FormGroup>
          <InputGroup>
            <InputGroup.Addon>請輸入：</InputGroup.Addon>
            <FormControl type="text" name="text" value={this.state.number} onChange={this.textHandleChange.bind(this)} />
          </InputGroup>
        </FormGroup>
      </Grid>
    );
  }
}

export default InputNumber;

在上面的代碼中須要關注的地方有:

該組件是用於用戶輸入數值後傳遞數值的類型和大小到父級組件中，因此其內部須要有兩個屬性，checkedList和number。checkedList用來標識當前哪一個radio選項框被選中，並當點擊事件發生時，把value的值進行動態設置，主要是用到了React的組件狀態機，經過setState函數對checkedList進行修改。number的做用是獲取用戶輸入的數據，當輸入框的值發生改變時，對應的事件響應會被調用也就是textHandleChange函數，其對number進行了設置，並內部有回調函數:this.props.callbackCheckedChange(event.target.value)告訴父級組件有屬性發生變化。這樣就使得當前組件的狀態改變時，父級的組件也會對應調用方法進行事件處理。

(2) OutputNumber.js:

import React, { Component } from 'react'
import {
  Grid,
  Row,
  Col,
  FormControl,
  ControlLabel,
  FormGroup,
  InputGroup,
} from 'react-bootstrap'

class OutputNumber extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      binaryRes: "",
      decimal: "",
      hexadecimal: "",
      mapBase:[2,10,16]
    }
  }
  changeToDec(numbers, base) {
    var sum = 0;
    var length = numbers.length
    for (let i = 0; i < length; i++) {
      let number = parseInt(numbers[i]);
      sum += Math.pow(base, length - i - 1) * number;
    }
    return sum.toString();
  }
  //十進制轉換其餘進制
  decChange(numbers, base) {
    var num = parseInt(numbers);
    var str = '';
    var k = parseInt(num);
    var m = num % base;
    while (k >= base) {
      if(m > 9)
        str = String.fromCharCode(0x40 + (m - 9)) + str;
      else
        str = m.toString() + str;
      k = parseInt(k / base);
      m = k % base;
    }
    if(m > 9)
      str = String.fromCharCode(0x40 + (m - 9)) + str;
    else
      str = m.toString() + str;
    return str;
  }
  componentWillReceiveProps(nextProps) {
    var base = this.state.mapBase[nextProps.checked];
    var numberDec = this.changeToDec(nextProps.number,base);
    this.setState({
      binaryRes:this.decChange(numberDec,2),
      decimal:this.decChange(numberDec,10),
      hexadecimal:this.decChange(numberDec,16)
    });
  }
  render() {
    return (
      <Grid>
        <FormGroup>
          <InputGroup>
            <InputGroup.Addon>二進制：</InputGroup.Addon>
            <FormControl type="text" name="binary" value={this.state.binaryRes} />
          </InputGroup>
          <InputGroup>
            <InputGroup.Addon>十進制：</InputGroup.Addon>
            <FormControl type="text" name="decimal" value={this.state.decimal} />
          </InputGroup>
          <InputGroup>
            <InputGroup.Addon>十六制：</InputGroup.Addon>
            <FormControl type="text" name="hexadecimal" value={this.state.hexadecimal} />
          </InputGroup>
        </FormGroup>
      </Grid>
    )
  }
}


export default OutputNumber;

這個組件是用來對用戶輸入的類型數據進行進制轉換並呈現結果，因此須要binaryRes,decimal,hexadecimal這三個屬性來呈現不一樣類型進制的結果，經過changeToDec和decChange這兩個函數對數值進行轉換獲得結果。但是，咱們要在何時調用這兩個函數進行進制轉換呢?這時就須要使用componentWillReceiveProps(nextProps)函數，當父級組件傳遞進來的元素髮生改變時，這個方法會被調用。因而咱們就在這個函數中調用進制轉換的函數並把結果呈現出來，這樣就實現了數據的傳遞功能了。

2.定義一個React父級組件用來封裝兩個子組件(MainView.js)，用來給入口文件調用

代碼實現

MainView.js:

import React from 'react';
import InputNumber from './InputNumber'
import OutputNumber from './OutputNumber'


class MainView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: 0,
      number: ""
    }
  }
  onCheckedChange(newChecked) {
    this.setState({
      checked: newChecked,
    });
  }
  onNumberChange(newNumber) {
    this.setState({
      number: newNumber
    });
  }
  render() {
    return (
      <div>
        <InputNumber checked={this.state.checked}
          number={this.state.number}
          callbackCheckedChange={this.onCheckedChange.bind(this)}
          callbackNumberChange={this.onNumberChange.bind(this)} />
        <OutputNumber number={this.state.number} 
          checked={this.state.checked}/>
      </div>
    );
  }
}

export default MainView;

這個組件是父級組件，封裝了前面的兩個組件，並把其內部的屬性統一傳遞給兩個子組件，使得數據進行了單向的綁定。

3.定義一個入口文件main.js用來向頁面渲染React組件

代碼實現

main.js:

import React from 'react';
import {render} from 'react-dom';

import MainView from './MainView'

var checked = 0;

render(<MainView/>,document.getElementById('root'));

這代碼不一樣多說，就是渲染主視圖到虛擬DOM的樹結構中。

三.總結

一開始看來React的基本用法可是沒有通過實際的操做會覺得React很簡單，可是當你動手打出代碼的時候，你會發現不少的問題。這時候就須要咱們一步一步地去查資料探索，找到解決的方案並實現。因此我寫這篇文章的目的是爲了讓更多React初學者可以參考並把React學得透徹，我對React也是剛開始入門，還不是很熟練，但願作出更多的東西，寫出更多的總結不斷提高本身的編程能力，哈哈哈，感謝閱讀此文。

最後附上程序github的倉庫連接程序github的倉庫連接