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的写法有一点区别，我们将在下一章介绍。

---

告辞！