基於 AdminLTE 開發React Admin

2021-09-06 23:05:10 字數 1392 閱讀 7344

使用adminlte的樣式和結構,自己在劃分不同的元件。

先建立基礎專案

獲取adminlte的原始碼(v3支援 bootstrap4)

adminlte 3 alpha-2

把adminlte原始碼dist目錄下的靜態資源拷貝到react-admin專案的public目錄下。

dist目錄下的img拷貝到src/assets下。

dist/js/plugins目錄下的檔案都是空檔案,需要從adminlte根目錄的plugins目錄下拷貝對應的檔案!

完成後的react-admin目錄

接下來在index.html檔案中引入adminlte的css檔案和js檔案。

參照adminlte專案中的index3.html,給index.html檔案中的body元素新增樣式

完成後的index.html檔案

接下來建立乙個header元件。

首選建立components目錄,在目錄中建立header.js。

從adminlte原始碼中拷貝對應的html**.

修改jsx中的class為classname

input和img標籤結尾">"之前新增"/"

內聯樣式

style="opacity: .8"
修改為

}
通過模組方式引入檔案。

html注釋改為

接下來繼續新增兩側的aside,content-container,以及footer.

react開發教程(十)redux結合react

redux 和 react 之間沒有關係。redux 可以搭配 react angular 甚至純 js。但是 redux 還是比較適合和 react 搭配的,因為 react 允許你以 state 的形式來描述介面,而 redux 非常擅長控制 state 的變化。redux 和 react 的結...

基於SpringBoot開發

使用idea配置springboot專案 專案結構 而 configuration 經常與 bean 組合使用,使用這兩個註解就可以建立乙個簡單的spring 配置類,可以用來替代相應的xml 配置檔案。enableautocon figuration 能夠自動配置spring 的上下文,猜測和配置...

基於元件的開發

一直以為元件是個神秘的東西,也就一直沒有勇氣去實踐他,後來在聽msdn講座時,那個講師舉了個很簡單的例子 元件就是把功能分離出來,生成dll,恍然大悟,原來元件這麼簡單啊.看了ted faison的visual c 基於元件的開發後,覺得元件開發並沒有他說的那麼簡單,大概是那講師為了讓我們對元件感興...