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

继续上一节课的内容，打开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，在浏览器就看到我们刚刚写的组件，已经渲染到页面了：