上节课我们介绍了src目录下的文件，那么经过介绍我们发现真正重要的文件无非就是那么几个

  • index.js
  • App.js
  • index.html

其余的我们都可以删掉，等到我们需要用得时候再写也是没有问题的。那么这节课我们就用脚手架来简单写一个Hello组件的一个案例

回顾

在外面开始今天的课程之前呢，我们对上节课的内容来做一个和简单的回顾。

  • App.css组件样式
  • App.js组件定义文件
  • App.test.js组件测试文件
  • index.css共用样式文件
  • index.js入口文件，通常组件渲染的操作会在该文件中编写
  • logo.svg页面展示的图片
  • reportWebVitals.js用于记录页面性能

  • setupTests.js用于做组件测试

  • 当我们启动项目，webpack会去找入口，那么就会找到src/index.js

  • 然后执行入口文件，引入React、ReactDOM、样式、组件
  • 调用ReactDOM.render方法来渲染组件到页面

以上便是上节课的知识要点。那么接下来我们来开始编写一个我们的案例。

案例要求

至于我们这节课写一个什么案例呢？还记得我们刚一开始写react的时候是不是写了一个Hello React？我们任何一个编程语言的第一个案例是不是都喜欢用Hello World？那么我们今天还是用脚手架来重新写一下这个案例。

在页面上展示出一行文字叫Hello React

实现

首先第一步我们脚手架的固定结构脚手架已经帮我们搭好了，两个固定的目录public和src，我们删除掉一些多余的文件，因为我们用不上，只要留下App.js，index.html，index.js其实就已经够了。

那么我们删除掉了多余的文件了，那么之前脚手架的示例代码我们是不是也得改掉？ 我们先来修改index.html，我们要先把容器准备好，不然react把虚拟DOM往哪渲染呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Web site created using create-react-app"/>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

我们来看一下，简简单单的，就创建一个容器，没有其他多余的操作，可能有人要问了，为什么偏爱图标也给删了啊，因为不是什么重要的东西，而且我们也罢这些多余的文件都删掉了，所以在代码中自然也要删掉。

组件定义

当我们准备好了容器是不是就该定义组件了啊？那么好，我们来定义一下我们的组件，创建组件有两种方式，那我们最习惯用得是类式组件，那么这里我们还是写类式组件：

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>Hello React</div>
    );
  }
}

export default App;

来看一下代码，我们定义类组件是不是要继承React.Component，但是我们这个文件中没有React啊，所以就要先用import来导入react，然后我们定义一个类组件。render方法中返回我们的Hello React。但是我们在这里写了这个组件了，那么在index.js中我们能调用吗？是不是不能？因为我们得把这个组件暴露出去，所以就要用export来导出这个组件，这样才能在index.js中来调用。

渲染组件

那么好，现在容器也有了，组件也有了，要想展示到页面上是不是就差一步渲染谈了？那么我们就来把这个页面来渲染到页面上。

既然我们要渲染页面是不是就要来编写我们的index.js文件？好，我们来看代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";

ReactDOM.render(<App />, document.getElementById('root'));

我们看代码上面，第一行导入React，第二行导入ReactDOM，第三行导入App组件，然后调用ReactDOM.render方法来渲染App组件。渲染到哪里？渲染到我们index.html中的容器中。火蜥蜴有人问了，我这个文件中也没有用React啊，为什么要导入呢？我们是不是说过ReactDOM一定要在React导入之后才能导入？所以说React虽然在明面上没用，但是实际上是要导入进来来支持ReactDOM，还有人要问了，这里是怎么能找到我们这个容器的呢？我们也没在index.html中导入index.js文件啊，这些呢是脚手架来完成的，我们不需要去关注。

那么好，容器也有了，组件也有了，也渲染了，那么我们来看一下页面什么效果吧：

image-20220106161252392

成功展示出了Hello React，那么控制台里面有没有什么问题呢？我们来看一下

image-20220106161410290

控制台中也什么都没用，因为我们之前用babel的时候是不是总是会有一个警告说我们这样不能用在生产环境中。现在我们用了脚手架之后，这个警告就没有了。

组件化

但是我们上面虽然是完成了需求，但是其实并不太合理，实际上了我们通常都不会在App组件中直接写我们的内容，因为在开发中，我们在index.js文件中渲染的就只有App组件，那么如果我有很都组件要渲染怎么办？那就放在App组件中作为子组件呗。所以说我们应该把Hello组件来单独写一个组件然后作为App组件的子组件来渲染，那我们看一下啊Hello组件应该怎么写？是不是直接把App组件的代码直接拿出来就行了？但是我们这次来换一个写法：

import {Component} from 'react';

export default class Hello extends Component {
  render() {
    return (
      <div>Hello React</div>
    );
  }
}

是不是倔和刚才不一样了？先看第一行，我不是直接导入React了，而是导入了Component，因为我们觉得要导入React，然后继承的时候还要写那么长一串实在太烦了。但是为什么我可以这样写呢可能有人要说，我知道，因为React上有Component，然后这是在导入的时候做了解构赋值。这个说法是错误的。我这里做的并不是结构赋值。比如我来写一个demo给大家看一下

const Demo = {a: 1, b: 2}
Demo.Test = class Test {};

export default Demo;

你们说我们在Hello.js里面添加这么几行代码：

import {Test} from "./demo";

console.log(Test);

那么结果会是什么效果呢？

image-20220106164311783

报了错，说我们找不到这个属性，为什么找不到呢？我们Demo上面命名有Test这个属性啊，如果是解构赋值的话为什么会找不到呢？那么看我们把demo.js换一个写法：

const Demo = { a: 1, b: 2 }
export class Test { };

Demo.Test = Test;

export default Demo;

那么我们再来看一下效果：

image-20220106164604761

这回是不是就可以了？为什么？因为我们是不是把这个类给分别暴露了啊？所以说我们可以直接拿到这个Test类，而不是想大家想的那样解构赋值。

好，我们在回到我们的Hello.js中去，当然了我们并不是只有这一处改动。我们在定义组件的时候直接就导出了。因为我们也就只有这一个组件，直接在定义的时候统一暴露就很方便的，不用再最后都写完了再加一行代码来暴露组件。

那么我们把Hello组件写好了，直接修改一下App.js中的代码来把Hello组件作为子组件

import {Component} from 'react';
import Hello from './Hello';

export default class App extends Component {
  render() {
    return (
      <div><Hello/></div>
    );
  }
}

我们来看代码直接在App组件的render方法中直接写Hello组件的组件标签是不是就可以了？那么我们来看一下效果：

image-20220106165356844

成功渲染了。但是我们这么写其实也是有那么一点问题的，因为如果我们租价太多的话src里的文件是不是就都混了？那么我们见一个新的components文件夹，把我们所有的子组件都放在这个文件夹中。当然这都不是什么大问题。

但是如果说我现在想让这段文字的背景色是橙色的话应该怎么办呢？是不是直接修改Hello.js就可以了，然后我们在新建一个Hello的样式文件这样就可以完成我们的组件样式的改变了？

import {Component} from 'react';

export default class Hello extends Component {
  render() {
    return (
      <h2 className="title">Hello React</h2>
    );
  }
}

那么好我们先来修改，Hello.js我们给这段文字加了一个className="title"，那么我们创建CSS文件就好了：

.title {
    background-color: orange;
}

那么我们CSS文件有了，组件要是想使用是不是还要在Hello.js中来引入？那么我们添加一行代码：

import { Component } from 'react';
import "./Hello.css"

export default class Hello extends Component {
  render() {
    return (
      <h2 className="title" > Hello React </h2>
    );
  }
}

但是还是同样的问题，如果components文件夹中的组件太多的话文件也还是会很乱，那么我们就一个组件来作为一个单独的文件夹来使用。那么我们来看一下效果。

image-20220106171218228

这样页面效果也就渲染成功了。

总结

以上便是我们这节课的一个案例

  • index.js，App.js和index.html文件是核心文件，其余的可以删除
  • index.js中我们只渲染App组件
  • 当我们要渲染多个组件的时候都作为App组件的子组件
  • 我们不要把所有组件都直接放在src目录下，可以统一一个目录，并且在这个目录下每个组件作为一个新的目录。

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/hello_react_example/