React globant course.

by Rodwyn Moreno

HTML

<div id="content"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class SearchForm extends React.Component {
	render() {
  	return (
    	<form className="search-form">
    	  <input
          className="user-input"
          type="text"
          value={this.props.user}
        />
        
        <button className="submit-form" type="submit">
          Search
        </button>
        <label className="member-check">
          <input
            type="checkbox"
            checked={this.props.includeMember}
          />
          Incluir repositorios donde el usuario es miembro
        </label>
    	</form>
    )
  }
}

class ItemResult extends React.Component {
	render() {
  	const result = this.props.result;

  	return (
			<li className="result">
			  <h3>
        <a href={result.html_url} target="_blank">
          {result.name}
        </a>
			  </h3>
        <p className="result-info">
          {result.fork && <span className="result-fork">
            <i className="fa fa-code-fork" /> Forks
          </span>}
        </p>
        <p className="result-description">
          {result.desciption}
        </p>
        <p className="result-update-date">
          Updated at: {result.updated_at}
        </p>
        <p clasName="result-stats">
          <span className="result-stat">
            {result.languaje}
          </span>
          <span className="result-stat">
            {result.forks_count}
          </span>
          <span className="result-stat">
            {result.stargazers_count}
          </span>
          <span className="result-stat">
            {result.watchers_count}
          </span>
        </p>
			</li>    	
    )
  }
}

class ResultList extends React.Component {
	render() {
  	return (
    	<ul className="result-list">
        {
        	this.props.results.map(result => (
          	<ItemResult key={result.id} result={result} />
          ))
        }
    	</ul>
    )
  }
}

class App extends React.Component {
	render() {
  	return (
    	<div className="app">
  	    <SearchForm
         ...