React

by Sergio Sánchez

HTML

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.2/cosmo/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<div id="gameApp"></div>


<div id="app"></div>
<div id="button">
</div>

<div id="cardApp"></div>

CSS

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

#app,
#cardApp,
#gameApp {
  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;
}

.fa-star
{
  margin: 0.5em;
  font-size: 24px;
}

span
{
  display: inline-block;
  margin: 0.5em;
  text-align: center;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  
}

.selected 
{
  background-color: #eee;
  color: #ddd;
  cursor: not-allowed;
}

.used
{
  background-color: #aaddaa;
  color: #99bb99;
  cursor: not-allowed;
}

React

const Button = (props) =>
{
	return (
  	<button>{props.label}</button>
  );
}

ReactDOM.render(<Button label="serginho" />, document.querySelector("#button"));

class Button2 extends React.Component {
  
  handleClick = () => {
  	this.props.onClickFunction(this.props.incrementalValue);
  };
	render ()
  {
  	return (<button onClick={this.handleClick}>+{this.props.incrementalValue}</button>);
  }
}

const Result = (props) =>
{
	return (<div>{props.counter}</div>);
};

class App extends React.Component {
	state = {counter: 0};
  incrementCounter = (incrementalValue) =>
  {
  	this.setState((prevState) =>
    ({
    	counter: prevState.counter + incrementalValue
    }));
  };
	render ()
  {
  	return (
    	<div>
    	  <Button2 incrementalValue={3} onClickFunction={this.incrementCounter}></Button2>
         <Button2 incrementalValue={5} onClickFunction={this.incrementCounter}></Button2>
    	  <Button2 incrementalValue={7} onClickFunction={this.incrementCounter}></Button2>


        <Result counter={this.state.counter}></Result>
    	</div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

 
const Card = (props)=>
{
	return (
  	<div style={{margin: '1em'}}>
  	  <img width="75" src={props.avatar_url}></img>
      <div style={{display: 'inline-block', marginLeft: 10}}>
        <div style={{fontSize:'1.25em', fontWeight:'bold'}}>{props.name}</div>
        <div>{props.company}</div>
      </div>
  	</div>
  );
};

const CardList = (props) =>
{
	return (
  	<div>
      {props.cards.map ((card, index) => <Card key={index} {...card } ></Card>)}
  	</div>
  );
}

class Form extends React.Component{
	state = {
  	userName: ''
  }
  handleSubmit = (event) =>
  {
  	event.preventDefault();
    axios.get(`https://api.github.com/users/${this.state.userName}`)
    .then( resp => 
    {
	    this.props.onClick(resp.data);
    }
    )
    
  }
	render()
  {
  	return (
    	<form onSubmit={this.handleSubmit}>
    	  <input type="text"
    	   ...