「React 基础」从创建第一个React组件开始学起

前端达人

发布于 2019-12-26 14:40:13

1.8K0

发布于 2019-12-26 14:40:13

大家好，在本系列的前三篇文章里，我们一起学习了在 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 组件并将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">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 命令来查看我们的项目，如下图所示：