正文

react学习笔记（二）编写第一个react组件

IP云
IP云V管理员/1 阅读
11/29
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

继续上一节课的内容，打开App.js:会看到如下代码： 

import React, { Component } from 'react';   //在此文件中引用React，以及reat的组件类

import logo from './logo.svg';             //引用图标

import './App.css';                      //引用样式

class App extends Component {           //编写一个App组件，继承自react的基本组件Component

  render() {

    return (                           //render里面返回了组件的View

      <div className="App">

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <h1 className="App-title">Welcome to React</h1>

        </header>

        <p className="App-intro">

          To get started, edit <code>src/App.js</code> and save to reload.

        </p>

      </div>

    );

  }

}

export default App;   //导出组件App，这样外面引用组件的时候才能引用的到

根据上面代码的注释，我们可以在这里写一个自己的react组件。

我们把return里的示例代码删掉，换成自己写的。如下： 

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

  render() {

    return (

     <div className="App">             //className是类名，为了与html区分，在react里面类名用className表示

       <p>Hello,很高兴在react的世界与你相遇！</p>

       <p>后面的路无论简单还是困难，希望我们都能坚持走到最后！</p>

     </div>

    );

  }

}

export default App;

注意：return的view必须放在一个总的标签内，否则会报错。例如： return ( <div className="App"></div><p></p> );会报错

react组件已经写好，我们先看一下，如何把组件渲染到dom中。

打开index.js

代码如下： 

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';  //导入我们写好的组件

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root')); // 把react组件渲染到DOM中

registerServiceWorker();
ReactDOM.render(<App />, document.getElementById('root')); // 把react组件渲染到DOM中
root在public中的html文件里，如下：

保存刚刚写好的组件文件，然后在命令窗口运行 npm start，在浏览器就看到我们刚刚写的组件，已经渲染到页面了： 

 

相关阅读

目录[+]