「React 手册」从创建第一个 React 组件开始学起

2019 年 12 月 24 日
筆記

大家好，在本系列的前三篇文章里，我们一起学习了在 React 中经常会用到的 ES6 新特性，以及 REACT 16+ 版本的一些新特性和团队成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题，从本篇文章起，我们将正式开始从最基础的内容开始学习React，今天我们将从创建第一个 React 组件开始学起。

本篇文章主要介绍以下内容：

如何创建我们的第一个 React 组件
如何组织我们的项目文件结构
如何在组件里添加CSS样式

一、如何创建我们的第一个 React 组件

组件是React最基本的内容，通过组件我们可以实现交互和重用，依据组件的创建方式又可以分为三类：class components（类组件）、pure components（纯组件）、pure components（函数组件），接下来，我们来开始动手实践第一个组件吧(这里我们先用类组件的方式进行创建，在后续的文章里将会介绍函数组件)。

1、准备脚手架运行环境

为了方便起见，快速上手 React 项目，我们使用 create-react-app 脚手架创建 React 项目。创建之前，你需要安装 create-react-app 脚手架，安装之前，确保你安装了 Node 运行环境（从 www.nodejs.org 官网下载）,支持 Mac, Linux, 和 Windows 系统环境。

在控制台里，我们输入以下命令进行全局安装：

npm install -g create-react-app

或者用更简单命令：

npm i -g create-react-app

2、开始动手创建吧！

接下来，我们来按照以下几个步骤来创建我们的第一个 React 项目：

1、在控制台输入以下命令进行项目创建：

create-react-app my-first-react-app

2、将工作台环境切换至当前目录，并运行项目，你需要在控制台输入以下命令：

cd my-first-react-app  npm start

3、运行完以上的命令后，将会自动调用浏览器窗口，并打开以下网址：

http://localhost:3000

4、接下来，我们在 src 的目录下创建一个 Home.js 的新文件，示例代码如下：

import React,{Component} from "react";  class  Home extends  Component{      render() {          return <h1>I'm Home Component</h1>      }  }  export  default  Home;    // File: src/Home.js

5、你可能注意到了在代码的最后一行我们使用 export 语法，这句话的意思就是方便我们的组件被其他文件进行模块化调用。这句话除了写在文末，我们还可以在在类声前，示例代码如下：

import React,{Component} from "react";  export  default class  Home extends  Component{      render() {          return <h1>I'm Home Component</h1>      }  }    //File: src/Home.js

小贴士：我个人偏好喜欢将export语句写在文件的末尾，但是有些人喜欢写在类声明前，具体使用哪种写法，取决于个人的喜好。

6、现在我们创建完了第一个组件，我们需要让它在页面中进行呈现。因此，我们需要打开 App.js 文件，通过 import 语法导入 Home 组件，然后将其添加至 return() 里。项目初始化时，你可能会看到如下的代码：

import React from 'react';  import logo from './logo.svg';  import './App.css';    function App() {    return (      <div className="App">        <header className="App-header">          <img src={logo} className="App-logo" alt="logo" />          <p>            Edit <code>src/App.js</code> and save to reload.          </p>          <a            className="App-link"            href="https://reactjs.org"            target="_blank"            rel="noopener noreferrer"          >            Learn React          </a>        </header>      </div>    );  }    export default App;    //File: src/App.js

小贴士：上述代码是通过函数的方式声明组件，接下来的文章里会有介绍，这里就不过多介绍，我们知道是函数组件即可。

7、接下来我们针对上述代码做一些小的改动，我们通过 import 语法将Home 组件文件引入，然后通过 JSX 语法进行添加。这里我们将<p>部分的元素内容进行替换成我们的组件，示例代码如下：

import React from 'react';  import logo from './logo.svg';  import './App.css';    // 这里我们引入了 Home 组件  import Home from "./Home";    function App() {    return (      <div className="App">        <header className="App-header">          <img src={logo} className="App-logo" alt="logo" />         {/* 在这里我们添加 Home 组件在页面里进行渲染*/}          <Home/>          <a            className="App-link"            href="https://reactjs.org"            target="_blank"            rel="noopener noreferrer"          >            Learn React          </a>        </header>      </div>    );  }    export default App;    //File: src/App.js

3、本部分内容小节

到这里我们就完成了第一个类组件的创建，我们这里通过从 react 类库包引入 React、Component 模块，创建了类组件。并通过 import 语法导入到了需要此组件的文件，使用 JSX 语法进行添加（其实 React 使用 JSX 来替代常规的 JavaScript，JSX 是一个看起来很像 XML 的 JavaScript 语法扩展）。JSX 语法和 HTML语法类似，你可能注意到了这里我们使用了 className 名称替换了 CSS 的 class 类名（因为 class 是 javascript 的关键词 ES6的类声明部分），如果属性名包含两个单词，建议用驼峰法进行命名（Camel-Case：除第一个单词之外，其它单词首字母大写）。比如 onClick、srcSet、和 tabIndex。如果带有横线的属性，则可以使用原先的命名规则，比如 aria-*、 data-* 等属性（data-something 和 aria-label）。

小贴士：React 组件的名称比如类命名和文件命名首字母都应该大写，刚开始学习时，你有可能觉得不舒服，但这确实 React 最佳实践推荐的方法。

下图为本小节完成后，项目成功运行后的效果图：

二、如何组织我们的项目文件结构

接下来我们来讨论下如何组织我们React项目的文件结构，在这里我只是给大家提供一个思路方向，具体怎么在此基础上进行优化，还是需要结合自己的项目特点进行优化。

1、首先我们需要通过 create-react-app 创建一个 React 项目（上一小节我们已经完成）。

2、创建完后，项目初始化的结构如下图所示：

3、接下来我们在 src 目录下创建 components目录（src/components）和 shared目录（src/shared）。

4、然后，我们在 src/components 目录下创建 Home 目录（src/components/Home），并将 Home.js 文件移动至本目录下。

5、App.js 文件移动至 src/components 目录下。

6、App.css、App.test.js 文件也移动至 src/components 目录下。

7、将 logo.svg 文件移动至 src/shared/images 目录下。

8、我们的 index.js 文件位置保持不变在src/ 目录下。

9、如果你完成了以上步骤的话，你的项目结构如下图所示：

小贴士：如果你创建的组件重用性比较高的话，比如页面的头部和尾部组件，我强烈建议你将共享组件放置在 src/shared/components 目录下。

10、为了保持上小节项目能正常运行，在 App.js 文件中，我们需要修改 logo 和 Home 文件的引用位置，修改部分的代码如下：

import logo from '../shared/images/logo.svg';  import Home from "./Home/Home";    // File: src/components/App.js

11、接下来，我们需要在 index.js 文件里修正 App 组件文件的位置引用，修改部分代码如下：

import App from './components/App';    //File: src/index.js

12、最后验证下项目是否能正常运行，如果按照上述步骤操作后，我们在控制台下运行 npm start 命令来验证项目是否正常运行。

本部分小节

这种项目新结构让我们的项目更具有灵活性和可维护性，当我们项目变得复杂时，这种项目结构就显得尤其重要。

三、如何在组件里添加CSS样式

上两个小节，我们一起完成了如何创建组件和组织项目文件，接下来我们来添加一些CSS内容在文件里。

在 React里，最佳实践就是把CSS文件和组件文件放在同一目录里，不同于我们以前传统的方式，我们将CSS文件放置在一个单独的CSS样式文件夹里。 React 项目默认采用 Webpack 模块化打包工具，使用 Webpack 我们可以配置样式的处理方式，关于 Webpack 如何配合 React 项目使用，在后续的文章里会介绍到。

好啦，废话不多说，一起来动手实践吧！

1、创建一个 React 项目或基于上一小节的项目。

2、然后我们为Home组件创建1个新的CSS文件，在同一个 Home 目录下进行创建，让我们稍微修改下 Home 组件，示例代码如下：

import React,{Component} from "react";  // 在这里引入我们创建的 Home.css 文件  import './Home.css';  export default class  Home extends  Component{      render() {          return(              <div className="Home">                  <h1>Welcome to Codejobs</h1>                  <p>                      In this recipe you will learn how to add styles to                      components. If you want to learn more you can visit                      our Youtube Channel at                      <a href="https://www.qianduandaren.com">Codejobs</a>.                  </p>              </div>          );      }  }    // File:  src/components/Home/Home.js

3、接下来我们在 Home.css 里添加一些样式，样式就不过解释，示例代码如下，这里请注意样式的命名方式：

 .Home {      margin: 0 auto;      width: 960px;  }    .Home h1 {      font-size: 32px;      color: white;  }    .Home p {      color: white;      text-align: center;  }    .Home a {      color: #56D5FA;      text-decoration: none;  }    .Home a:hover {      color: #333;  }    /*  File: src/components/Home/Home.css   */

4、你有可能需要使用内联样式，修改局部的一些样式，你只需要在对应的标签上添加style属性，使用驼峰命名的方式添加CSS属性值，并将其包含在{{ }} 符号里，示意代码如下：

import React,{Component} from "react";  // 在这里引入我们创建的 Home.css 文件  import './Home.css';  export  default class  Home extends  Component{      render() {          return(              <div className="Home">                  <h1>Welcome to Codejobs</h1>                  <p>                      In this recipe you will learn how to add styles to                      components. If you want to learn more you can visit                      our Youtube Channel at                      <a href="https://www.qianduandaren.com">前端达人</a>.                  </p>                  <p>                      <button                          style={{                              backgroundColor:'gray',                              border:'1px solid black'                          }}                      >                      Click me!                      </button>                  </p>              </div>          );      }  }    // File:  src/components/Home/Home.js

5、除了以上方法，你还可以通过声明样式对象的形式进行样式声明，然后通过内联样式的方式进行引用，请注意样式对象声明的位置，示例代码如下：

import React,{Component} from "react";  // 在这里引入我们创建的 Home.css 文件  import './Home.css';  export  default class  Home extends  Component{      render() {          const buttonStyle={              backgroundColor:'gray',              border:'1px solid black'          };          return(              <div className="Home">                  <h1>Welcome to Codejobs</h1>                  <p>                      In this recipe you will learn how to add styles to                      components. If you want to learn more you can visit                      our Youtube Channel at                      <a href="https://www.qianduandaren.com">Codejobs</a>.                  </p>                  <p>                      <button style={buttonStyle}>                          Click me!                      </button>                  </p>              </div>          );      }  }    // File:  src/components/Home/Home.js

6、如果按照以上步骤正确操作后，你可以使用 npm start 命令来查看我们的项目，如下图所示：

题外话

你可能对 React 是如何编译的将我的CSS代码引入到我们的项目文件里的，你可以使用谷歌浏览器开发者查看工具进行查看，你将会看到以下内容：

基本上一个CSS文件，分配一个<style>标签区域,我们的React项目对应的有3个CSS文件，就有对应的3个<style>标签区域,这是由于Webpack 默认使用的是style-loader模式。

在使用 create-react-app 创建项目时，我们无法直接修改 Webpack配置，主要是因为项目使用的 react-scripts 程序包进行了集成，除非你手动集成了Webpack配置到你的项目里。

小节

本篇文章的介绍就介绍到这里，感谢你的阅读，本篇文章我们一起学习了如何创建 React 类组件，如何组织我们的项目结构和引入CSS文件，在下一篇文章里，如何定义组件的属性（props）和数据状态(state),敬请期待。