react組件在項目中的應用（基礎知識）

上圖我是定義了5個模塊，所有都渲染在一個組件裏面。能夠先看看個人代碼結構

我將Hello文件夾下的index.jsx文件做爲父組件，最後渲染在根組件中。

那咱們怎麼輸出這個Hello組件呢？要達到上圖的效果。
咱們知道要有頭部，要有中間的按鈕，要有輪播模塊，要有列表模塊，還要有推薦模塊。他們之間是互不影響的。
那咱們怎麼在Hello組件中體現這個組件的獨立性呢？像header組件能夠做爲公共頭部，供全部頁面引用，咱們
將其放在components中，像這種純展現數據的組件咱們能夠叫其木偶組件。
這是header組件的文件

看我最上面的頁面其實可瞭解到，像輪播列表這些實際上是與數據的渲染相關的，也就是能夠與後端交互
請求數據的模塊，也就是咱們放在
中的組件，它能夠定義數據定義規則，最後展現在Hello組件中，像這樣的就是智能組件。咱們能夠看下圖

Hello組件經過引用這些組件最後在根元素上渲染出模塊。
這只是基礎的組件知識，接下來咱們逐漸深刻。請耐心等待個人系列博客。
本博客昇華自：大衆點評app視頻。

完整的demo見github：https://github.com/JserJser/reactWebApp/tree/master/test