react 代码编辑组件（手把手教你创建第一个React组件）

大家好，在本系列的前三篇文章里，我们一起学习了在 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 的新文件，示例代码如下：

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

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

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

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

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

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 文件的引用位置，修改部分的代码如下：

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

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

本部分小节

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

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

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

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

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

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

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

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

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

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

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),敬请期待。

《 React 手册》系列文章

「React 手册」在 React 项目中使用 ES6，你需要了解这些（一）

「React 手册」React 16 中值得你关注的新特性

「React 手册 」在 Windows 下使用 React , 你需要注意这些问题

,