JS - The react framework

標籤：

這幾天因為趕時間 , 所以理解上可能有許多的誤差 , 如果你不幸點進來了 , 請不要看My Code , 這幾天我會重新修改 , 然後把錯誤的不足的 全部修正一下 .

/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 用於儲存 , 下載成功之後 的內容

 

JS - The react framework