一个简单的 Hello 组件
上一篇博文我们实现了脚手架工具的安装以及默认的文件结构说明，那接下来我们做一些简单的本地化处理，为啥呢？因为上篇博客我们看到，脚手架工具给我们加了很多的文件，但是我们基本上都又不到对吧，所以说我们平时开发项目只需要几个文件就可以了，这篇博客就和大家分享一下，日常使用脚手架开发 react 项目的一个关键的点。
删除暂时用不到的文件
脚手架初始化项目后会创建几个无关急要的文件，我们初学者是用不到的，所以说我们删掉就可以，分别是下面的文件。
public 文件夹下的：
- logo192.png
- logo512.png
- manifest.json
- robots.txt
src 文件夹下的：
- App.css
- App.test.js
- index.css
- logo.svg
- reportWebVitals.js
- setuoTests.js
上面的文件一般都是默认的样式、图片logo、测试文件、外壳配置和爬虫设置的相关文件，在我们初学的时候是完全没有用的，所以说我们可以直接删除，如果有用到的话，我们再自己编写就可以了。
但是像一些文件删除之后呢，在某些地方可能有过引用，删除掉的话可能就找不到文件了，没关系，全部把引用的地方删掉就可以了。这里就不给大家操作了，我相信这点儿问题应该不是什么难的。
index.html 文件
index.html 文件中删除额外的引用之后就是这个样子的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- %PUBLIC_URL% 代表 public 文件夹的路径 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 开启理想视口，用于做移动端的适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 网站的描述用于浏览器展示用 -->
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>我是𝒆𝒅.</title>
<style>
html,body,* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- 如果浏览器不支持js脚本，则显示该信息提示 -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
index.js 文件
index.js 文件当中把性能监控部分代码删除之后就是这个样子的啦。
// 引入 react 核心库
import React from 'react';
// 引入 react-dom 核心库
import ReactDOM from 'react-dom/client';
// 引入 App 组件
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js 文件
之前脚手架工具创建的 App.js 文件中，创建 App 组件是使用函数组件的方式创建的，我们给他稍微修改一下子，不去使用 函数组件 的方式，改成类式组件的方式创建，当然效果是一样的。
// 创建外壳组件
import React, { Component } from "react";
// 创建并暴露APP组件。这里直接暴露，不用再在创建完类组件之后单独写一句暴露的命令了。
export default class App extends Component {
render() {
return (
<div>
你好𝒆𝒅. 我是APP组件。
</div>
)
}
}
好的，上面的步骤都操作完了，我们可以启动一下项目，看一下运行的效果。
保存刷新，看到这里是没有问题的哈。
创建并使用一个简单的 Hello 组件
好的，在上边的代码基础上 ，我们创建一个简单的 Hello 组件，里面就展示一句话。
首先我们要清楚，react 开发是模块化，组件化的，所以说呢，我们如果想编写一个新的组件 Hello 的话，这个 Hello 组件中需要写 CSS 样式，也许在以后会添加图片、音频、视频等一系列的静态文件，所以说我们不能全部直接堆积在 src 的根文件夹下，所以我们需要在 src 文件夹下创建一个新的文件夹 components 用来存放我们自己编写的组件们。
好的，创建完了文件夹再想，我们现在是要写一个 Hello 组件，我们直接把组件创建进 components 文件夹下就可以了，但是，如果我要创建两个呢？创建十个组件呢？是不是这些组件的 css样式文件，静态资源都馋和在一起了？所以说我们在 components 文件夹下，给 Hello 组件 单独创建一个 Hello 文件夹，把 Hello 组件 相关的文件都放进里面可以吧。
这样我们如果后期再写第二个组件，第三个组件... 各个组件之间就不会因为使用的文件过多儿造成杂乱现象了吧！
Hello 组件编写
接下来我们开发 Hello 组件，打开 Hello.js 文件编写代码。
import React, { Component } from "react";
import './Hello.css'
export default class Hello extends Component {
render() {
return <h2 className="title">你好𝒆𝒅. 这里是 Hello 组件</h2>
}
}
上面的代码就展示了一句话，之前博客我们也学了，所以说不需要细讲，代码都看得的懂。在这个组件中引入了 Hello.css 文件，里面很简单，就是给 h2 标签设置了一下背景颜色。
.title {
background-color: aqua;
}
组件文件都编写完成，需要在 App.js 文件引入 Hello 组件并且使用他吧！
// 创建外壳组件
import React, { Component } from "react";
// 导入 Hello 组件
import Hello from './components/Hello/Hello'
// 创建并暴露APP组件
export default class App extends Component {
render() {
return (
<div>
<Hello />
{/* 你好𝒆𝒅. 我是APP组件。 */}
</div>
)
}
}
好的，保存刷新页面，看一下页面效果。
OK，都是可以正常展示的，没有问题啊！
同理我们在创建一个 Welcome 组件，里面也是单纯的展示一句话就可以了，背景设置成绿色的吧，最后也是在 App.js 文件中导入展示一下。
Welcome.js 文件
import React, {Component} from "react";
import './Welcome.css'
export default class Welcome extends Component {
render() {
return <h2 className="title-Welcome">你好𝒆𝒅. 这里是 Welcome 组件</h2>
}
}
Welcome.css 文件
.title-Welcome {
background-color: rgb(0, 255, 68);
}
编写完成保存刷新。
OK了，这就是 react 中最简单的组件创建使用的过程。
导入时组件后缀名可省略
有几点地方我们需要注意一下子哈！
我们编写完 Hello 组件后如果需要使用的话，需要在 App.js 文件中导入，这个步骤是省略不了的，我们导入是怎么写的来着？
// 导入 Hello 组件
import Hello from './components/Hello/Hello'
为什么这样写？
因为它就在这个位置，相对路径引入的时候就是这样是吧？
但是我们发现，我们最后导入Hello 组件对应的 Hello.js 文件的时候，最后并没有加 .js 后缀，居然也可以调用到。所以说 .js 后缀在这个地方是可以省略的吧？对，扩展名可以省略。
区分 组件文件 和 普通js文件
我们再看。
在 Hello 组件这个文件夹里面，我们有 Hello 组件的 js 文件，对吧，这个 Hello.js 文件是一个组件。加入说我在这个文件夹下面有一个 普通的 js 文件作为方法文件，这个很可能吧？他的后缀也得是 js 文件吧，那这样如果多了的话，js 文件就会有很多，我就不太好区分哪些是 组件，哪些是 普通js 文件，怎么办呢？
- 在规范性上，如果该 js 文件是一个组件文件，文件首字母需要
大写。 - 如果该 js 文件是一个组件文件，后缀可以不是
.js而是.jsx，效果一样。 - 我们可以再在 组件文件夹下创建一个 js 文件夹存放普通js 文件。
上面三种方式都可以，根据每个人的编码习惯可以自行选择。
我们看一下，如果我们使用 后缀 .jsx 的方式会不会影响项目的运行哈。
我们改了一个，改完发现前面的图标都变了对吧？因为我们导入的时候后缀名都省略了，所以说不需要修改其他内容了，直接刷新页面。
一切正常。
导入组件命名
再继续看一个问题，还是导入组件。
// 导入 Hello 组件
import Hello from './components/Hello/Hello'
我们看到有点繁琐是吧。当前路径下的 components 文件夹下，Hello 文件夹下 Hello.jsx 文件。
能不能简单点写呢？可以哈！如果我们 Hello 文件夹下，Hello.jsx 文件的名称改为 index.jsx 。那么就可以简写成
// 导入 Hello 组件
import Hello from './components/Hello'
因为如果你在文件夹目录下面，不指定具体是哪一个文件，那么 react 脚手架会默认去找 index 文件渲染！
我们修改试一下。
保存刷新页面。
依旧是可以正常使用的哈。
样式模块化
我们再看。我们写 Hello 组件的时候，我给里面的 h2 标签设置了一个 title 的 class 属性，但是在创建 Welcome 组件的时候，class 我下意识的改成了 title-Welcome ，为啥？因为css前面的会被后面的覆盖掉了，一样的话，背景色会都一样，蓝色的会被绿色的覆盖掉，因为绿色的是后来引入的。怎么办呢？
可以使用样式模块化，但是不常用，了解一下就行。
我们以 Hello.css 为例，我们把文件名称修改一下 Hello.module.css ，这样之后，我们就可以像引入组件一样把 css 样式引入进组件。
import React, { Component } from "react";
import hello from './Hello.module.css'
export default class Hello extends Component {
render() {
return <h2 className={hello.title}>你好𝒆𝒅. 这里是 Hello 组件</h2>
}
}
这样就解决了样式会冲突问题，当然，如果使用 less 或者是 scss 也可以，简单一说理解就好。
好了，今天的内容暂时就这些，下篇博客继续说。
【本博文相关代码资料】：我是𝒆𝒅. 的 gitee
拜了个拜！
