Header/index.js

import React, {Component} from "react";

import logo from './logo.png'

import './style.css'

import { Menu, Icon } from 'antd';

class AppHeader extends Component {

render() {

return (

<div>

<img src={logo} className='app-header-logo' />

<Menu mode="horizontal">

<Menu.Item key="mail">

<Icon type="mail" />

VOA 慢速英语

</Menu.Item>

</Menu>

</div>

)

}

}

export default AppHeader;

src/index.js

import React, {Component}from 'react';

import ReactDOM from 'react-dom';

import 'antd/dist/antd.css';

import {Layout} from 'antd'

import './style.css'

import AppHeader from './components/Header';

const {Header, Footer, Content}= Layout

class App extends Component {

render() {

return (

<Layout style={{minWidth:1300}}>

<Header className='header'>

<AppHeader />

</Header>

<Content className='content'>Content</Content>

<Footer className='footer'>Footer</Footer>

</Layout>

)

}

}

// 将内容挂载到页面上

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