网站seo文章该怎么写/免费发广告帖子的网站

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

接下来主要是样式的添加及从后台获取数据:

添加样式美化页面

• 化美化一下我们的公共组件: 在 /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 项目了。源码