利用React anu編寫乙個彈出層

2022-01-16 11:11:54 字數 1774 閱讀 8578

本文將一步步介紹如何使用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是用...