【React 实战教程】从0到1 构建 github star管理工具

https://api.github.com
复制代码

https://github.com/login/oauth/authorize
复制代码

<redirect_url>?code=1928596028123
复制代码

POST https://github.com/login/oauth/access_token
复制代码

access_token=e72e16c7e42f292c6912e7710c838347ae178b4a&token_type=bearer
复制代码

Accept: application/json
{"access_token":"e72e16c7e42f292c6912e7710c838347ae178b4a", "scope":"repo,gist", "token_type":"bearer"}

Accept: application/xml
<OAuth>
  <token_type>bearer</token_type>
  <scope>repo,gist</scope>
  <access_token>e72e16c7e42f292c6912e7710c838347ae178b4a</access_token>
</OAuth>
复制代码

GET https://api.github.com/user?access_token=...
复制代码

Authorization: token 获取到的token
复制代码

GET https://api.github.com/user
复制代码

GET https://api.github.com/user/starred
复制代码

GET https://api.github.com/repos/:username/:repo/readme
复制代码

"Accept": "application/vnd.github.v3.html"
复制代码

├── config  // webpack相关文件
├── public  // 公用文件
├── scripts // 脚本文件 build,start,test文件都在里面
├── src
    ├── assets  // 自己放置的资源文件
    ├── components  // 公用组件
    ├── pages   // 页面文件
    ├── utils   // 公用方法文
    App.css
    App.scss
    App.jsx
    index.css
    index.js
    logo.svg    
    reset.css   // 重置样式
    variable.css
    variable.scss   // 公用变量文件
├── package.json
├── .editorconfig   // 编辑器配置
├── .gitignore // git 忽略文件
复制代码

npm run eject
复制代码

npm install --save node-sass-chokidar
复制代码

   "scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
复制代码

npm install --save npm-run-all
复制代码

 "scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
复制代码

npm i sass-loader node-sass --save or yarn add sass-loader node-sass
复制代码

"proxy": {
    "/user": {
      "target": "https://api.github.com",
      "changeOrigin": true
    },
    "/user/star": {
      "target": "https://api.github.com",
      "changeOrigin": true
    },
    "/login": {
      "target": "https://github.com",
      "changeOrigin": true
    }
}
复制代码

 /* eslint-disable */
 // 主要是这里 eslint会报错
import Refresh from '-!svg-react-loader!../../assets/img/refresh.svg';
/* eslint-enable */

class StarFilter extends Component {
  constructor(props) {
    super(props);
require.resolve('svg-react-loader');
    this.state = {
    };
  }

  componentDidMount() {
  }

  render() {
    return (
      <div className="star-filter">
        <div className="title-container">
          <h3 class="title-gray-dark">STARS</h3>
          <!--这样就可以使用了-->
          <Refresh className="icon-refresh text-grey" />
        </div>
      </div>
    );
  }
}

export default StarFilter;

复制代码

.icon-refresh {
  width: 20px;
  height: 20px;
  fill: #606f7b;
}
复制代码

import NoSelectedImg from '../../assets/img/not-selected.svg';

class ResInfo extends Component {
 // ..此处省略
  render() {
    <img
      alt="no-selected"
      src={NoSelectedImg}
      className="img-no-selected"
    />

  }
}

export default ResInfo;
复制代码

<img src={require('../../assets/img/status-spinner.svg')} alt="fetch" width="16" height="16"/>
复制代码

{
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
    loader: require.resolve('url-loader'),
    options: {
    limit: 10000,
    name: 'static/media/[name].[hash:8].[ext]',
}
复制代码

render() {
    return (
      <div className="App">
        <BrowserRouter basename="/">
          <div>
            <Route exact path="/" component={Auth} />
            <Route path="/auth" component={Auth} />
            <Route path="/star" component={Star} />
          </div>
        </BrowserRouter>
      </div>
    )
  }
复制代码

import { Redirect } from 'react-router-dom'

class Auth extends Component {

 //省略...

  render() {
    // 如果isTokenError为true直接跳转至首页
    if (this.state.isTokenError) {
      return (
        <Redirect to="/"/>
      )
    }
    // 如果hasCode有值则跳转至star
    if (this.state.hasCode) {
      return (
        <Redirect to="/star" />
      )
    }
    return (
      <div className="Auth">
        <Button className="btn-auth" onClick={this.onClickAuth}>
          点击授权
        </Button>
      </div>
    )
  }
}

export default Auth

复制代码

  /**
   * 返回首页
   */
  go2home() {
    this.props.history.replace('/auth');
  }

  /**
   * 前往star界面
   */
  go2star() {
    this.props.history.push('/star');
  } 
复制代码