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

前端之家收集整理的这篇文章主要介绍了react入门基础——名字之间的关联前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

创建路由

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



在router.js中配置路由表(加入红框标出的两行),如下图:


名字之间的关联

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



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



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



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

猜你在找的React相关文章