React简单教程-1-组件
前言
React，Facebook开发的前端框架。当时Facebook对市面上的前端框架都不满意，于是自己捣鼓出了React，使用后觉得特别好用，于是就在2013年开源了。
我也用React开发了一个简单的博客：
Dvorak Chen的博客
在原生的HTML中，是不存在组件化的，为了开发便利，人们使用各种方法来模拟组件。如将HTML封装在一段JS代码中，通过调用这段JS代码来操作界面。无奈碍于前端三大件：HTML、JS、CSS的限制，无法真的做到专注于组件。
React框架就很好地解决了这个问题。
前置知识
这是个适用于没有React基础的人群的React教程
你需要熟悉HTML、JS、CSS的相关知识，懂得如何安装node、npm
如果你会typescript，那就更好了。
在这个教程中，我们将着重介绍需要用的知识，遵循发现问题-思考问题-解决问题的思路来学习React的用法。对于一些我们用到的，但是在当前不那么重要的东西，我会一笔带过。
环境搭建
在开发React之前，我们需要能够开发React的环境，为此需要安装node，和npm。node是用于运行JS代码的环境，npm是用于管理JS项目的包管理器。
在这里我们使用 vs code 编辑器来编写代码。
安装node
前往nodejs官网下载并安装，在本文中使用的是16.15.0 LTS版本
安装好后，在终端中输入node -v查看是否安装成功，如果有显示出node的版本号，就是成功了。
在这个教程中，确保你的node版本大于12.0.0
安装 npm
在你安装好了nodejs后，你就可以使用npm，同样，在终端中输入npm -v查看版本号，如果有输出版本号，就是安装成功了。
如果需要更新到最新的npm，只需要在终端中输入：npm install -g npm然后等待即可。
创建react项目
在终端中输入以下命令来创建一个React项目：
npm create vite@latest my-react-app -- --template react
这个命令将使用npm，来调用vite包，来为我们创建一个项目，vite后面的后缀@latest表示使用你vite的最新版本，my-react-app是我们要创建的项目名，可以替换为你喜欢的名字，后面跟着的 -- --template react表示创建的项目所适用的模板是react。
vite是一个前端构建工具，在这里我们使用了
vite这个包来创建项目。在很多教程中使用的不是vite，而是npx create-react-app@latest my-app的命令来创建项目，这种方式使用的构建工具默认是webpack；我推荐使用上面的vite方式，它的构建工具使用的是vite。如果你不懂什么是构建工具，那么在现在也不需要去了解
创建完成后，你会在当前目录下看到名为my-react-app的文件夹，。
打开该文件夹，你应该看到的是以下的文件结构：
先不管这一堆文件和文件夹是干什么的，我们在终端里输入 npm i 安装所有依赖的包，这可能需要一些时间。安装好了后，项目根目录下会多了一个名为node_modules的文件夹，这个文件夹里就是项目依赖的包。安装了依赖的包后，我们的项目就能运行起来了。在终端里输入npm run dev，这个命令将启用开发用的服务器，有什么用？就是说你可以一边修改代码，一边查看最新的页面效果了。
在输入输入 npm run dev 后，终端里会应该会有如下的提示：
vite v2.9.9 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
我们可以在浏览器中打开上面显示的本地地址：http://localhost:3000/来查看效果，页面效果如下图：
这个页面的代码，是写在什么呢？
我们打开./src/App.jsx
这个文件，我们将看有一个方法：function App()，这个方法返回了一段HTML代码！等等，为什么JS代码里能够返回HTML代码？
function App() {
// ...
return (
<div className="App">
{/* ... */}
</div>
);
}
这种JS和HTML混合的写法是React的重要语法，叫做jsx，如果你是用typescript的话那就是tsx。
叫什么不重要，重要的是理解它代表了什么。这种写法，可以在JS代码的函数里返回一段HTML代码，同时可以附加上一些用于控制这些HTML的逻辑。而这个函数，我们就叫做React的组件。
组件
/**
* 在React里，你经常会看到如下的方法
* 这是一个组件
*/
function ComponentFunction() {
// 逻辑
return (
<div>
返回的HTML代码
</div>
);
}
那么，这个组件，我们要怎么使用，让它显示到页面上呢？
使用组件
这个组件看起来像一个方法，但是我们却不是要用调用方法的方式去使用。现在，请记住在App.jsx中的App组件。我们现在再回头看看目录，目录下有一个main.jsx，在这个文件中，我们能看到以下代码：
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
注意中间的<App />写法，我们的App组件，就是以这种HTML的写法来调用。
好了，现在这个main.jsx文件我们不要动他，忘了它吧。回到我们的App.jsx里，我们把这个组件里的内容全部删掉，改成如下的代码：
function App() {
return (
<div>
Hello React!
</div>
);
}
export default App
保存后刷新页面，你就会看到页面发生了变化，左上角出现了Hello React!字样。我们的HTML代码，都可以写在组件的返回值里，当我们调用组件，就会使用返回值里的HTML代码，替换到你使用这个组件的地方。
子组件
现在，我们已经简单认识了组件，我们可以仿照着，自己新建一个组件了。
其实就是写一个方法，该方法返回HTML。我们要将一个组件单独放在一个文件里，这是一个好习惯。在src下新建一个文件my-sub-component.jsx，在里面写上我们的新组件：
// 记得 export 导出，不然别的地方用不了
export function MySubComponent() {
return <div>这是一个新组件，也是一个子组件</div>;
}
一个组件，是不是子组件，只是相对于其他组件而言的。如果A组件中内嵌了了B组件，那么B组件就是A组件的子组件
回到我们的App.jsx，要使用别的组件，首先要引用它，引用my-sub-component.jsx并在App组件中使用HTML的写法来使用组件：
import { MySubComponent } from './my-sub-component'
function App() {
return (
<div>
Hello React!
<MySubComponent />
</div>
);
}
export default App
如同使用<App />一样使用<MySubComponent />，保存后刷新，我们能够在页面上看到我们的子组件!
如果你的子组件和上面一样显示了出来，太棒了！It's work!
你学会了React最重要的两个东西之一：组件，React所有的界面显示，都是靠一个一个的组件组合起来而成，返回值的HTML写法上和原生HTML的写法有一点区别，我们将在下一章介绍。
