Js-the REACT Framework

These days because of the rush time, so there may be a lot of errors in understanding, if you are unfortunate to come in, please do not look at my code, these days I will revise, and then the wrong to correct all the shortcomings.

/hwr/src/index.js

1Import React from ' React ';2Import reactdom from ' React-dom ';//Choose a file from the path3Import Detail from './pages/detail ';//Automatic Search Path4Import {Router, Route, indexroute} from ' React-router ';5Import createhistory from ' History/lib/createhashhistory ';6Import List from './pages/list ';7 8 Reactdom.render (9<router history={createhistory ({querykey:false })} Tenonupdate={() = Window.scrollto (0, 0)}> One<route path= "/" component={List}/> A<route path= "/detail/:repo" component={detail}/> -</router>, -document.getElementById (' app ') the ); -  - //9/* Create history. Access the records of the Web page * / - //11/* If the domain name below is/Then call list this file to start rendering page */ + //13/* If the domain name is directly below the detail, detail to repo and open the detail file will be repo as a parameter to wear in the * *

/hwr/src/pages/index.js

1Import React from ' React ';2Import {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>Ten<li><link to= "/detail/react" >React</Link></li> One<li><link to= "/detail/react-native" >react native</link></li> A<li><link to= "/detail/jest" >Jest</Link></li> -</ul> -</div> the         ); -     } - } -ExportdefaultList; +  - //according to the index file, the first entry after opening the link is the List rendered page. +  A //This part of the content of the time is simple. If you don't, please ask someone else.

/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 () {varSelf = 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}&gt ;            {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.u        Rl}</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>);}}exportdefaultDetail;//3 The repo in the index file is passed as a property to the constructor here props//This.props.params.repo Call this under the, props property, under the repo (specifically what I Baidu a bit, but don't understand, ask the teacher tomorrow. )//Self Analysis 15 16 rows is very simple, 17 lines of error refers to the Ajax.get download page is the success of the status (I estimate should be stored page status code such as 200 (normal), 404 (server cannot provide information) 503 (server refused to provide services, Crawler (common)), response for storage, download after successful content

Js-the REACT Framework