react入门基础——名字之间的关联

刚刚学习react时教程里的创建文件、组件、路由、demo、class名等等，这些命名时都喜欢起同样的名字，比如Products，然后一上来就特别懵。这些名字都一样，到底之间有什么关联呢？哪里可以改动？那里不可以？
于是简单理解并尝试后，大概记录下来，算是笔记吧。后续若还有类似问题会补充进来。

创建路由

路由可视为组成应用的不同页面，创建routes/ProductsFile.js ，如下图：

在router.js中配置路由表（加入红框标出的两行），如下图：

名字之间的关联

接下来，在此处来尝试搞清楚众多命名之间的关系。
首先，创建的文件名字要和路由中import引入的路径名字一致，ProductsFile，如下图：

组件名字随意命名，在其内部保持声明一致，ProductsName，如下图：


路由表中，也就是router.js文件中，引入时可对引入的文件（组件）重新命名，但要和后续使用时要保持名字一致，ProductsFree，如下图：


最后需要注意一个路径，也就是访问路径时浏览器中地址栏处的名字，ProductsKey，如下图：