react中文API解讀二(教程)

2022-09-16 21:48:25 字數 2041 閱讀 2680

記下自己的react學習之路 ,官方文件寫的很詳盡,學起來應該比較簡單

我使用的是wampserver,當圖示顯示為綠色時表示伺服器正常開啟

。紅色表示伺服器異常。

進入www目錄,初始index.php名稱改成其他的,我改成index11.php。

在瀏覽器中輸入    正常顯示

2.2你的第乙個元件

//

tutorial1.js

var commentbox =react.createclass(

});reactdom.render( ,

document.getelementbyid('content')

);

react.createclass構造react網頁元件。可以理解為在記憶體中建立了乙個虛擬網頁。

reactdom.render();render()函式有兩個引數。第乙個指的是需要從記憶體中取出的網頁,第二個指的是要渲染到的目標物件。

2.3製作元件

邏輯和1.2一樣,只是在結構巢狀一層,更符合實際。

本例**結構:構造乙個commentlist元件和commentform元件。

2.4使用屬性與2.5元件屬性
如果純粹2.2,2.3中的使用方法,把所有內容直接寫出來,那還不如直接在html裡面寫簡單,模板標籤也失去了存在的意義。

正是有了屬性,才使得模板有了血液,模板和資料進行分離。

var commentform =react.createclass(

});var commentbox =react.createclass(

});var comment =react.createclass(

); }

});var commentlist =react.createclass(

});reactdom.render(

react.createelement(commentbox,

null

), document.getelementbyid('content')

);

本節可以看到,標籤並沒有被解析成html標籤,而是直接被輸出到頁面。

2.7接入資料模型

我們的使用越來越接近實際開發了。

data可以看作是介面給我們返回的資料

var data =[

, ]; var comment =react.createclass();

return

; },

render:

function

() />

); }

});var commentlist =react.createclass(

); });

return

(

); }

});var commentform =react.createclass(

});var commentbox =react.createclass( />

); }

});reactdom.render( ,

document.getelementbyid('content')

);

2.8從伺服器獲取資料

2.9響應狀態變化( reactive state )

gulp教程之gulp中文API

1.1 說明 src方法是指定需要處理的原始檔的路徑,gulp借鑑了unix作業系統的管道 pipe 思想,前一級的輸出,直接變成後一級的輸入,gulp.src返回當前檔案流至可用外掛程式 1.2 globs 需要處理的原始檔匹配符路徑。型別 必填 string or stringarray 萬用字...

React入門教程(二)

react基礎總結 續 示例 commentbox react createclass hello,world i am a commentbox.reactdom render react createelement commentbox null document getelementbyid ...

linq中文教程 二

what s linq?language integrated query 是也。說得再明白一些,這是程式語言的一種新特性,能夠將資料查詢語句整合到程式語言中。目前,linq 支援的語言有 c 和vb。為啥會有 linq 主要還是因為現在的資料格式越來越多,資料庫 xml 陣列 雜湊表 每一種都有自...