专栏首页前端达人「React 手册 」从创建第一个 React 组件开始学起
原创

「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 的新文件,示例代码如下:

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    大家好,在本系列的前三篇文章里,我们一起学习了在 React 中经常会用到的 ES6 新特性,以及 REACT 16+ 版本的一些新特性和团队成员在 Winwo...

    前端达人
  • 「React 基础」组件生命周期函数shouldComponentUpdate()介绍

    大家好,在「React 手册 」组件生命周期相关函数——componentWillMount 和 「React 手册 」组件生命周期函数——componentD...

    前端达人
  • 大家为啥总是在说React比Vue更实用呢?

    React与Vue作为当下最流行的框架有很多相似之处:同样是基于组件的轻量级框架,同样专注于用户界面的视图层。同样可以用在简单的项目中,也同样可以使用全家桶扩展...

    前端达人
  • 「React 基础」从创建第一个React组件开始学起

    大家好,在本系列的前三篇文章里,我们一起学习了在 React 中经常会用到的 ES6 新特性,以及 REACT 16+ 版本的一些新特性和团队成员在 Winwo...

    前端达人
  • React16 新特性

    于 2017.09.26 Facebook 发布 React v16.0 版本,时至今日已更新到 React v16.6,且引入了大量的令人振奋的新特性,本文章...

    前端迷
  • 温故而知新:c#中的特性(attribute)

    特性(Attribute)是微软在.Net中自创的一种新技术,对于很多初学者来讲,特性一直是一块难啃的骨头。 既然弄不懂,那我们就暂时绕过它吧,回想一下我们在写...

    菩提树下的杨过
  • 【译】数字世界11个震撼人心的数据

    大数据文摘
  • System.arraycopy(src, srcPos, dest, destPos, length) 与 Arrays.copyOf(original, newLength)区别

    System.arraycopy(src, srcPos, dest, destPos, length) 与 Arrays.copyOf(original, n...

    用户1148394
  • Asp.Net MVC4入门指南(4):添加一个模型

    在本节中,您将添加一些类,这些类用于管理数据库中的电影。这些类是ASP.NET MVC 应用程序中的"模型(Model)"。 您将使用.NET Framewor...

    葡萄城控件
  • CSharp代码示例每日一讲: 在GDI+中使用填充Fill方法

    程序你好

扫码关注云+社区

领取腾讯云代金券