react入門基礎——名字之間的關聯

剛剛學習react時教程裏的建立文件、組件、路由、demo、class名等等，這些命名時都喜歡起一樣的名字，好比Products，而後一上來就特別懵。這些名字都同樣，到底之間有什麼關聯呢？哪裏能夠改動？那裏不能夠？
因而簡單理解並嘗試後，大概記錄下來，算是筆記吧。後續若還有相似問題會補充進來。

建立路由

路由可視爲組成應用的不一樣頁面，建立routes/ProductsFile.js ，以下圖：

---

在router.js中配置路由表（加入紅框標出的兩行），以下圖：

---

名字之間的關聯

接下來，在此處來嘗試搞清楚衆多命名之間的關係。
首先，建立的文件名字要和路由中import引入的路徑名字一致，ProductsFile，以下圖：

---

組件名字隨意命名，在其內部保持聲明一致，ProductsName，以下圖：

---

路由表中，也就是router.js文件中，引入時可對引入的文件（組件）從新命名，但要和後續使用時要保持名字一致，ProductsFree，以下圖：

---

最後須要注意一個路徑，也就是訪問路徑時瀏覽器中地址欄處的名字，ProductsKey，以下圖：