本文將一步步介紹如何使用react或anu建立 乙個彈出層。
react時代,**都是要經過編譯的,我們很多時間都耗在babel與webpack上。因此本文也介紹如何玩webpack與babel。
我們建立乙個ui目錄,裡面新增乙個package.json。內容如下,裡面已經是儘量減少babel外掛程式的使用了。
,
"author": "rubylouvre",
"license": "isc",
"devdependencies": ,
"dependencies":
}
如果你不想用anu,可以改成react與react-dom。
"dependencies":
anu本身沒有proptypes,而react最近的版本也把proptypes拆了出來,因此我們需要獨立安裝prop-types這個包。
webpack我們緊隨時髦,使用2.0, 而babel則是一大堆東西。
然後我們在控制台npm install
敲一下,會給我們安裝上幾屏的依賴,下面只是展示了一部分。可見前端的發展多麼可怕,以前只是幾個js檔案就覺得非常臃腫了,現在幾百個習以為常。儘管它們大部分是預處理js的。這也為react帶來巨大的門檻,門檻越高,工資越高。
然後 ui目錄下建立乙個src目錄,裡面建toast.js。
//第一部分,引入依賴與定義模組內的全域性變數
import react, from 'react';
import proptypes from 'prop-types';
import reactdom from 'react-dom';
let singleton = null;
const container = document.createelement('div'),
defaultprops = ,
proptypes = ;
//第二部分,定義元件
classtoastreact extendscomponent ;
this._timer = null;
singleton = this;
}shouldcomponentupdate(nextprops, nextstate) );
if (!!this._timer)
this._timer = settimeout(() => this.setstate(), nextstate.autohidetime);
return true;
}componentwillunmount()
render() = this.state;
return (
classname=
利用C 編寫乙個猜字遊戲
一 準備工作 規則就是這麼多,我們應該用c 來實現它。首先,我們應考慮怎樣記錄單詞,其中包括原單詞 猜錯的字母 當前猜出的殘缺單詞。如果用傳統的c風格陣列,這是很麻煩的,這用c風格字串實現很困難。但c 為我們預先想到了這一切,c 中帶有乙個功能強大的string類,它的宣告在標頭檔案string中。...
利用htm css js編寫乙個網頁計算器
前言 學了前端也一段時間了,這段時間學校組織集中培訓,老師留了一些小專案來做,計算器就是其中乙個。所以打算好好來分析動手做乙個計算器。從布局來說,我們需要乙個計算器整體div,計算器裡面需要含有螢幕,按鈕 按鈕應該有0 9數字,以及加減乘除字串。總體來講是乙個很簡單的布局,如圖。如下 c 78 9 ...
編寫乙個makefile
什麼是makefile?對於大多數的windows程式設計師來講,makefile可能不是那麼重要,因為windows的ide都為程式設計師做好了這個工作。但是在linux下程式設計,會不會寫makefile,從側面上說明乙個人是否具備完成大型工程的能力。makefile的作用 makefile是用...