Hero

有了前面的基础，相信构建一个Hero组件会简单很多：

import React from 'react';
import styles from './styles.scss';

class Hero extends React.PureComponent {
  render() {
    return (
      <div className={styles.container}>
        <h1><span className={styles.brand}>Airbnb</span>{this.props.message}</h1>
      </div>
    );
  }
}

Hero.propTypes = {
  message: React.PropTypes.string.isRequired
}

export default Hero;

.container {
    max-width: 1020px;
    margin: 50px auto;

    h1 {
        font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
        font-size: 48px;
        line-height: 56px;
        letter-spacing: -0.8px;
        color: #484848;
        font-weight: 300;
        width: 615px;
        margin: 0;
    }

    .brand {
        font-weight: 700;
        color: #FF5A5F;
    }
}

container组件

现在会有两个组件显示在首页：TopNav和Hero，这个时候我们需要建一个container组件来将他们包装在一起，目录结构将变成：

.
├── README.md
├── app
│   ├── components
│   │   ├── Hero
│   │   │   ├── index.jsx
│   │   │   └── styles.scss
│   │   └── TopNav
│   │       ├── PopupMenu.jsx
│   │       ├── PopupMenu.scss
│   │       ├── index.jsx
│   │       ├── logo.svg
│   │       └── styles.scss
│   ├── containers
│   │   └── HomePage
│   │       ├── index.jsx
│   │       └── styles.scss
│   ├── index.html
│   └── index.js
├── dist
│   ├── app.bundle.js
│   └── index.html
├── node_modules
├── package.json
├── webpack.config.js
└── yarn.lock

./containers/HomePage/index.jsx将两个组件包装在一起：

import React from 'react';
import styles from './styles.scss';
import TopNav from '../../components/TopNav';
import Hero from '../../components/Hero';

class HomePage extends React.Component {
  render() {
    return (
      <div>
        <TopNav />
        <Hero message="预订独一无二的房源，像当地人一样体验城市。" />
      </div>
    );
  }
}

export default HomePage;

app/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import HomePage from './containers/HomePage';
import 'normalize.css';

ReactDOM.render(<HomePage/>, document.body);

代码

你可以在prepare-env分支查看到当前步骤所有的代码

git clone [email protected]:ThoughtWorksWuhanUI/react-zero-to-one.git
git checkout hero

本页编辑：Benwei