JS - The react framework

这几天因为赶时间 , 所以理解上可能有许多的误差 , 如果你不幸点进来了 , 请不要看我的代码 , 这几天我会重新修改 , 然后把错误的不足的 全部修正一下 .

/hwr/src/index.js

 1 import React from 'react';
 2 import ReactDOM from 'react-dom';       //  Choose a file from the path 
 3 import Detail from './pages/Detail';        //Automatic search path 
 4 import { Router, Route, IndexRoute } from 'react-router';
 5 import createHistory from 'history/lib/createHashHistory';
 6 import List from './pages/List';
 7 
 8 ReactDOM.render(
 9         <Router history={createHistory({ queryKey: false })} 
10             onUpdate={() => window.scrollTo(0, 0)}>
11             <Route path="/" component={ List } />                   
12             <Route path="/detail/:repo" component={ Detail } />    
13         </Router>,
14     document.getElementById('app')
15 );
16 
17 // 9  /* 创建历史记录 . 访问网页的记录 */
18 //11   /* 如果域名下面的是 / 的话就调用 list这个文件 开始渲染页面 */
19 //13   /*    如果域名下面直接是detail的话就讲detail后面的东西传给 repo 并且打开detail文件将 repo 作为参数穿进去    */

/hwr/src/pages/index.js

 1 import React from 'react';
 2 import { Link } from 'react-router';
 3 
 4 class List extends React.Component {
 5         render() {
 6         return (
 7             <div>
 8                 <p>Please choose a repository from the list below.</p>
 9                 <ul>
10                     <li><Link to="/detail/react">React</Link></li>
11                     <li><Link to="/detail/react-native">React Native</Link></li>
12                     <li><Link to="/detail/jest">Jest</Link></li>
13                 </ul>
14             </div>
15         );
16     }
17 }
18 export default List;
19 
20 // 根据 index 文件来看 , 打开链接之后 首先进入的就是  List 渲染的页面 . 
21 
22 // 这一部分的内容就时分的简单了 . 自己 不会的话 , 赶紧 请教一下别人 . 

/hwr/src/pages/index.js

import React from 'react';
import ajax from 'superagent';
class Detail extends React.Component {
    constructor(props) {                    
        super(props); 
    this.state = {
            name: [],
            mode: 'test1',
            test1: [],
            test2: [],
            test3: []
        };
    }    
        fetchFeed(type) {
            const baseURL = 'http://192.168.1.100:3000';
            ajax.get(`${baseURL}/${this.props.params.repo}/${type}`)
            //ajax.get(`http://192.168.1.100:3000/${type}`)
                .end((error, response) => {
                    console.dir(response.body[0].url)
                    if (!error && response) {
                        this.setState({ [type]: response.body });
                    } else {
                        console.log(`Error fetching ${type}`, error);
                    }
                }
            );
        }
    componentWillMount() {
         var self = this;
         
        self.fetchFeed('test1');
        self.fetchFeed('test2');
        self.fetchFeed('test3');
    }
    showcommits() {
        this.setState({ mode: 'test1' });
    }
    showforks() {
        this.setState({ mode: 'test2' });
    }
    showpulls() {
        this.setState({ mode: 'test3' });
    }
    findName(){
        
    }
    rendercommits() {
        return this.state.test1.map((commit, index) => {
            const author = commit.author||commit.owner ? commit.author : 'Anonymous';
            return (<p key={index}>
                <strong>{author}</strong>:
                    <a href={commit.url}>{commit.url}</a>.
            </p>);
        });
    }
    renderforks() {
        return this.state.test2.map((fork, index) => {
            const owner = fork.author ? fork.author : 'Anonymous';
            return (<p key={index}>
                <strong>{owner}</strong>:
                <a href={fork.url}>{fork.url}</a>
        </p>);
        });
    }
    renderpulls() {
        return this.state.test3.map((pull, index) => {
            const user = pull.author ? pull.author : 'Anonymous';
            return (<p key={index}>
                <strong>{user}</strong>:
                <a href={pull.url}>{pull.url}</a>.
        </p>);
        });
    }
    render() {
        let content;
        if (this.state.mode === 'test1') {
            content = this.rendercommits();
        } else if (this.state.mode === 'test2') {
            content = this.renderforks();
        } else {
            content = this.renderpulls();
        }
    return (<div>
        <button onClick={this.showcommits.bind(this)}>Show Commits</button>
        <button onClick={this.showforks.bind(this)}>Show Forks</button>
        <button onClick={this.showpulls.bind(this)}>Show Pulls</button>
        {content}
        </div>);
    }
}
export default Detail;

// 3  在 index 文件中的 repo 作为 属性传到了这里的构造函数 props
// 16 this.props.params.repo  调用this下的 , props 属性 , 下的 repo (  具体是什么我百度了一下 , 但是看的不懂 , 明天问一下老师 .   )

//  自己分析 15 16 行 很简单 , 17行的error指的是 ajax.get 下载网页是否成功的状态( 我估计应该是储存的网页状态码 例如 200(正常) , 404( 服务器无法提供信息 ) 503 ( 服务器拒绝提供服务 , 爬虫常见 ) ) , response 用于储存 , 下载成功之后 的内容

 

转载于:https://www.cnblogs.com/A-FM/p/5847729.html