React 初学 - 一个简单的Hello组件 - 个人笔记47

简写方式二：

平时使用react和componet可简写成：

原理：

举个例子：

通过export暴露Component，所以引入的时候要写成:{Component}

APP可以这么简写(直接export default出去)：

编写一个Hello组件文件，且放置到components文件夹

在App.js引入Hello组件

效果

给组件来点颜色

引入使用

把Hello组件的Js和css文件都放在一个文件夹里面

在新建一个welcome组件，注意组件文件名是大写开头

渲染出来

总结，一个组件一个文件夹。

在项目工程中，都是Js,如何区分是js函数文件还是react组件文件？
方法一：
组件的首字母大写，js函数文件首字母小写。
方式二：组件文件名用.jsx作为后缀，在react中，.js文件和.jsx文件在引入的时候可以不用写后缀：

但是App.js不建议改成App.jsx，比较App.jsx一个项目就一个。不会混淆。

简写3：

当使用index作为文件名的时候，可以省略

弊端：

写代码的时候容易混淆，但是有时候是项目规范，所以不得不用index的命名方式：

实现页面局部功能的资源集合，叫组件！