React学习（三）之第一个组件

Posted on | | Visitors:
Words count in article: 961 字 | Reading time ≈ 5 分

项目结构

之前通过create-react-app创建了一个hello-react项目，不知道的可以看博客里之前的的React文章。

暂时只关注三个文件：src\index.js、src\App.js和public\index.html。

文件说明

App.js

作用

App.js定义页面中的一个组件，也就是定义页面中要放的一个零件。

代码

定义了一个显示React的logo的组件。

注意下我加的代码注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Component } from 'react'; //固定写法
import logo from './logo.svg';  //图片
import './App.css'; //css

class App extends Component { //ES6写法
  render() {
    return (
      <div>
        <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;

index.html

作用

index.html进行页面内容的布局，也就是哪里放什么标签。

index.html是显示的页面，用户通过检查元素是可以看到html代码的，所以放在public文件夹下吧。

代码

主要看body部分，只放了一个div。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
    
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
    
</html>

index.js

作用

index.js连接App.js和index.html，通过将组件放入各个标签中，起到连接上边两个文件的作用。

代码

主要内容是第11行那里。

注意下我加的代码注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//导入react
import React from 'react';
import ReactDOM from 'react-dom';
//导入css，.代表当前目录，..代表上一级目录
import './index.css';
//导入组件，变成App，其实下一行的'./App'省略了.js后缀，本来应该是'./App.js'
import App from './App';

import * as serviceWorker from './serviceWorker';

//设置挂载点，把组件App挂到root上
ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

自己的第一个组件

也就是自己写一个组件嘛，组件是在App.js中定义的，所以修改App.js。

定义组件

在这里将组件的默认内容删除，也就是render函数中return的东西，然后自己写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react'; //固定写法
import logo from './logo.svg';  //图片
import './App.css'; //css

class App extends Component { //ES6写法
  render() {
    return (
      <div>
        <div>
          <div>
            <h1>hello world</h1>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

代码里div中用的是className是因为class是JS的保留字，所以要用className。

代码修改之后效果在此就不展示了，显示了一个hello world。

作者：@臭咸鱼

本文为作者原创，转载请注明出处：https://chouxianyu.github.io

欢迎转发和评论!