摘要:的作用是獲取用戶輸入的數據,當輸入框的值發生改變時,對應的事件響應會被調用也就是函數,其對進行了設置,并內部有回調函數告訴父級組件有屬性發生變化。于是我們就在這個函數中調用進制轉換的函數并把結果呈現出來,這樣就實現了數據的傳遞功能了。
一.WebPack入門 1.WebPack簡介
2.如何使用WebPackWebPack是模塊打包機:分析項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),并將其打包為合適的格式以供瀏覽器使用。
1.安裝:
(1)全局安裝:
npm install -g webpack
(2)安裝到項目中:
npm install --save-dev webpack
2.配置使用:
(1)項目的目錄結構:
(2)目錄解析:
在項目目錄中創建兩個文件夾,一個是app,另一個是public.接著再創建一個文件index.html放置在public中。public用于放置頁面的入口文件,app用來放置js文件。
(3)WebPack的配置文件(webpack.config.js):
module.exports = { entry: __dirname + "/app/main.js",//唯一入口文件 output: { path: __dirname + "/public",//打包后文件bundle.js存放的地方 filename: "bundle.js"http://打包后輸出文件的文件名 } }
3.生成Source Maps(使調試更容易)
(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"http://打包后輸出文件的文件名 } }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"http://打包后輸出文件的文件名 } 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:
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 (); } } 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 () } } 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 (); } } 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(,document.getElementById("root"));
三.總結這代碼不同多說,就是渲染主視圖到虛擬DOM的樹結構中。
一開始看來React的基本用法但是沒有經過實際的操作會以為React很簡單,但是當你動手打出代碼的時候,你會發現很多的問題。這時候就需要我們一步一步地去查資料探索,找到解決的方案并實現。所以我寫這篇文章的目的是為了讓更多React初學者能夠參考并把React學得透徹,我對React也是剛開始入門,還不是很熟練,希望做出更多的東西,寫出更多的總結不斷提升自己的編程能力,哈哈哈,感謝閱讀此文。
最后附上程序github的倉庫鏈接程序github的倉庫鏈接
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80688.html
摘要:具體來說,包管理器就是可以通過命令行,幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級,這樣就不用手工復制和更新庫。現在有的包管理器主要是和。 一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上: 學習HTML基礎,了解如何編寫語義HTML 理解如何把網頁分...
閱讀 2689·2021-10-12 10:12
閱讀 2335·2021-09-02 15:41
閱讀 2561·2019-08-30 15:55
閱讀 1399·2019-08-30 13:05
閱讀 2430·2019-08-29 11:21
閱讀 3535·2019-08-28 17:53
閱讀 3022·2019-08-26 13:39
閱讀 801·2019-08-26 11:50