第一步重要说了一下框架的搭建及组件与路由的建立;

接下来重如果款式的增加及从背景猎取数据:

增加款式美化页面

• 化美化一下我们的大众组件: 在 /src/components/Common/ 目次下增加 NavBar.css:

  .nav-bar {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
  }
  .nav-bar li {
    flex: 1;
    border-right: 1px solid #e5e5e5;
  }
  .nav-bar a {
    display: block;
    color: #333;
    padding: 10px;
    text-decoration: none;
  }
  .nav-bar .source {
    font-size: 12px;
    padding: 10px;
    border-right: 0 none;
  }

• 款式要运用, 固然还必须得在组件中援用才行的哟, 修正/src/components/Common/NavBar.js:

  import React from 'react';
  import {
    Link,
  } from 'react-router-dom';
  import './NavBar.css';
  
  const NavBar = (props) => (
    <ul className="nav-bar">
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/list">List</Link></li>
      <li className="source">来源于: {props.title}</li>
    </ul>
  );
  
  export default NavBar;

• 固然, 也能够开增加一些大众款式, 如许在每一个组件内都能够运用, 修正/src/index.css:

  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #f5f5f5;
  }
  .content {
    margin: 0;
    padding: 20px;
    font-size: 18px;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
  }

  由于 index.css 在 index.js 中引入了, 我们在其他组件中不必援用, 直接运用就好啦, 修正关于组件/src/components/About/About.js:

  import React from 'react';
  import NavBar from '../Common/NavBar';
  
  const About = () => (
    <div>
      <NavBar title="关于页" />
      <h1 className="content">这是关于页</h1>
    </div>
  );
  
  export default About;

  其他组件的修正也是一样的, 即在组件中给 className 价值降低为款式名即可;

  如今命令行切到项目根目次, 实行yarn run start启动项目, 在浏览器内检察增加款式后的结果;

从服务端猎取数据

• 这里运用的 axios来猎取数据, 先安装包:

  $ yarn add axios

• 下面的实例演示一下

• 在src目次内建立一个service的目次, 并建立一个 Connect.js 的文件:

  import React, { Component } from 'react';
  import axios from 'axios';
  
  
  const Connect = (MyComponent) => {
    return class extends Component {
      constructor(props) {
        super(props);
        this.state = {
          data: [],
        };
      }
  
      componentDidMount() {
        axios.get('http://rapapi.org/mockjsdata/23242/v1/question/page')
          .then(res => res.data)
          .then(data => {
            this.setState({
              data: data.data.recordList
            });
          })
        
      }
  
      render() {
        return <MyComponent { ...this.props } data={this.state.data} />
      }
    }
  }
  
  export {
    Connect,
  }

• 修正列表组件/src/components/List/List.js:

  import React from 'react';
  import NavBar from '../Common/NavBar';
  import { Connect } from '../../service/Connect';
  import './List.css';
  
  const List = (props) => {
    return (
      <div>
        <NavBar title="列表页" />
        <ul className="content list">
          {
            props.data && props.data.length > 0 &&
            props.data.map((item, index) => (
              <li key={index}>
                <strong>称号: </strong>
                <span>{ item.answer }</span>
                <time>{ item.createTime }</time>
              </li>
            ))
          }
        </ul>
      </div>
    );
  };
  
  export default Connect(List);
  

• 如今命令行切到项目根目次, 实行 yarn run start 启动项目, 浏览器内检察 列表 组件, 是否是从服务端猎取的数据了;

末了

如今跟据这些所控制的内容, 就能够最先的一个完全的 React.js 项目了。源码