react學習三 渲染評論列表案例

js打包入口檔案main.js：

// 匯入 react包

import react from 'react'
import reactdom from 'react-dom'
import commentlist from './components/comment1/commentlist.jsx'
reactdom.render(

import react from 'react'

import commentitem from './commentitem.jsx'
export default class commentlist extends react.component ,,,
]}} // 在 有狀態元件中， render 函式是必須的，表示，渲染哪些 虛擬dom元素並展示出來
因為不要使用私有資料，所以使用function函式建立乙個元件就行
import react from 'react'

import itemstyles from '../../css/commentitem.css'
console.log(itemstyles)
export default function commentitem(props) 
引用樣式是通過啟用css樣式表檔案的模組：

步驟一：在webpack.config.js中為css-loader啟用模組化
,
modules 引數：啟用 css 的模組化

localidentname引數：重新命名私有的類（缺省會把私有類的類名變成hash值）
步驟二：編寫樣式
當啟用 css 模組化之後，這裡所有的類名，都是私有的，如果想要把類名設定成全域性的乙個類，可以把這個類名，用 :global() 給包裹起
當使用 :global() 設定了全域性的 類樣式之後，這個類不會被重新命名(變成hash值，calss="title"）
只有私有的類才會被重新命名
不直接匯入樣式表import '../../css/commentitem.css'，而是通過啟用css 模組化的原因：
如果沒有為 css 啟用模組化，則接收到的 itemstyles 是個空物件，因為 .css 樣式表中，不能直接通過 js 的 export defualt 匯出物件
當啟用 css 模組化之後，匯入 樣式表得到的 itemstyles 就變成了乙個 樣式物件，其中，屬性名是 在樣式表中定義的類名，屬性值，是自動生成的乙個複雜的類名（防止類名衝突）
vue中可以使用scoped 指令讓元件自己的樣式不被全域性共享，但是 react 中並沒有指令的概念，元件中使用的樣式可能會被別的樣式表合併或者替換掉
還有別的辦法也可以使樣式私有化：
比如不通過匯入樣式表，直接編寫行內樣式的時候 
像編寫網頁**那樣寫行內樣式的話會報錯：
解決辦法：
在 寫 style 樣式的時候，外層的 表示 要寫js**了，內層的 表示 用乙個js物件表示樣式
在 style 的樣式規則中，如果 屬性值的單位是 px, 則 px 可以省略，直接寫乙個 數值 即可
return 

對以上的行內樣式進行樣式優化：樣式優化1：

const boxstyle = 

const titlestyle = 
const bodystyle = 
樣式優化2：把 樣式物件，封裝到唯一的乙個物件中

const inlinestyles = ,

titlestyle: ,
bodystyle: 
}
 
React學習 元素渲染
react 元素構成元件，元件又構成應用。react 元素就是普通的js物件 俗稱 虛擬dom react 元素不是真實的 dom 元素，所以也沒辦法直接呼叫 dom 上原生的 api。渲染過程 react元素 描述 虛擬dom，再根據 虛擬dom 渲染出 真實dom。1 虛擬 dom 就是用 js...
React學習 條件渲染 列表渲染 表單渲染
如下 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head div body src crossorigin script src crossorigin...
react學習經驗總結（元素渲染）
const element 與瀏覽器的 dom 元素不同，react 當中的元素事實上是普通的物件，react dom 可以確保 瀏覽器 dom 的資料內容與 react 元素保持一致。首先我們在乙個 html 頁面中新增乙個 id example 的 在此 div 中的所有內容都將由 react ...