<span>import <span>React, { Component }</span> from 'react';
</span><span>import <span>MuiThemeProvider</span> from 'material-ui/styles/MuiThemeProvider';
</span><span>import <span>AppBar</span> from 'material-ui/AppBar';
</span><span>import <span>{Card, CardActions, CardHeader,CardTitle,CardText}</span> from 'material-ui/Card';
</span><span>import <span>FlatButton</span> from 'material-ui/FlatButton';
</span><span>import <span>IconButton</span> from 'material-ui/IconButton';
</span><span>import <span>NavigationClose</span> from 'material-ui/svg-icons/navigation/close';
</span>
<span>import logo from './logo.svg';
</span><span>import './App.css';
</span>
<span>class App extends Component {
</span>
  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.state = {
</span>      <span>posts: []
</span>    <span>};
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return (
</span>
      <span><MuiThemeProvider>
</span>        <span><div>
</span>          <span><AppBar
</span>            title<span>={<span >React PWA</span>}
</span>
            iconElementLeft<span>={<IconButton><NavigationClose /></IconButton>}
</span>            iconElementRight<span>={<FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" />
</span>            <span>}
</span>          <span>/>
</span>
          <span>{this.state.posts.map(function (el<span>, index</span>) {
</span>            <span>return <Card key={index}>
</span>              <span><CardHeader
</span>                title<span>={el.data.title}
</span>
                subtitle<span>={el.data.author}
</span>                actAsExpander<span>={el.data.is_self === true}
</span>                showExpandableButton<span>={false}
</span>              <span>/>
</span>
              <span><CardText expandable={el.data.is_self === true}>
</span>                <span>{el.data.selftext}
</span>              <span></CardText>
</span>              <span><CardActions>
</span>                <span><FlatButton label="View" onClick={() => {
</span>                  <span>window.open(el.data.url);
</span>                <span>}} />
</span>
              <span></CardActions>
</span>            <span></Card>
</span>          <span>})}
</span>

          <span><FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" />
</span>        <span></div>
</span>      <span></MuiThemeProvider>
</span>
    <span>);
</span>  <span>}
</span><span>}
</span>
<span>export default App;
</span>

>使用服務(wù)，您的應(yīng)用程序?qū)膆ttp：// localhost：5000/。

  <span>fetchFirst(url) {
</span>    <span>var that = this;
</span>    <span>if (url) {
</span>      <span>fetch('https://www.reddit.com/r/' + url + '.json').then(function (response) {
</span>        <span>return response.json();
</span>      <span>}).then(function (result) {
</span>
        that<span>.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });
</span>
        <span>console.log(that.state.posts);
</span>      <span>});
</span>    <span>}
</span>  <span>}  
</span>  <span>fetchNext(url<span>, lastPostName</span>) {
</span>    <span>var that = this;
</span>    <span>if (url) {
</span>      <span>fetch('https://www.reddit.com/r/' + url + '.json' + '?count=' + 25 + '&after=' + lastPostName).then(function (response) {
</span>        <span>return response.json();
</span>      <span>}).then(function (result) {
</span>
        that<span>.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });
</span>        <span>console.log(that.state.posts);
</span>      <span>});
</span>    <span>}
</span>  <span>}
</span>  <span>componentWillMount() {
</span>
     <span>this.fetchFirst("reactjs");
</span><span>}
</span>

>您可以毫無問題地審核您的應(yīng)用程序，但是如果您想在移動設(shè)備中進行測試，也可以使用Surge.SH之類的服務(wù)來使用一個命令進行部署！ >

<span>npm run build
</span>

<span>npm install -g lighthouse  
</span>