[SNIPPET-13] Samer Buna - ReactJs Getting Started

exercise1.jsx

class Button extends React.Component {
	// constructor (props) {
	// super(props);
	// this.state = { counter: 0 };
	// }
  state = { counter: 0 }
  
  handleClick = () => {
  	// this.state.counter++
    this.setState((prevState) => ({
      	counter: prevState.counter + 1
    }));
  }
  
  render() {
		return (
		  <button onClick={this.handleClick}>
      	{this.state.counter}
      </button>	
    );
  }
}

ReactDOM.render(<Button />, mountNode);

exercise1_2.jsx

class Button extends React.Component {
  //  handleClick = () => {
  //   this.setState((prevState) => ({
  //     	counter: prevState.counter + 1
  //   }));
  // }
  
  render() {
		return (
		  <button 
      	onClick={() => this.props.onClickFunction(this.props.incrementValue)}>
      	+{this.props.incrementValue}
      </button>	
    );
  }
}

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

class App extends React.Component {
 	state = { counter: 0 }
  
  incrementCounter = (incrementValue) => {
  	this.setState((prevState) => ({
    	counter: prevState.counter + incrementValue
    }));
  }
	render() {
  	return (
    	<div>
      	<Button incrementValue = {1} onClickFunction={this.incrementCounter}/>
        <Button incrementValue = {5} onClickFunction={this.incrementCounter}/>
        <Button incrementValue = {10} onClickFunction={this.incrementCounter}/>
        <Button incrementValue = {100} onClickFunction={this.incrementCounter}/>
        <Result counter={this.state.counter}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

exercise1_3.jsx

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

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

class App extends React.Component {
 	state = { counter: 0 }
  
  incrementCounter = (incrementValue) => {
  	this.setState((prevState) => ({
    	counter: prevState.counter + incrementValue
    }));
  }
	render() {
  	return (
    	<div>
      	<Button incrementValue = {1} onClickFunction={this.incrementCounter}/>
        <Button incrementValue = {5} onClickFunction={this.incrementCounter}/>
        <Button incrementValue = {10} onClickFunction={this.incrementCounter}/>
        <Button incrementValue = {100} onClickFunction={this.incrementCounter}/>
        <Result counter={this.state.counter}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

exercise2.jsx

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

let data = [
	{
  	avatar_url: "https://avatars2.githubusercontent.com/u/11813607?v=3",
  	name: "Abdurrachman Mappuji",
  	company: "@ole-vi @open-learning-exchange "
  },
  {
    avatar_url: "https://avatars2.githubusercontent.com/u/13684059?v=3",
    name: "dogi",
    company: "@ole-vi @open-learning-exchange "
  }
];

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

ReactDOM.render(<CardList cards={data}/>, mountNode);

exercise2_complete.jsx

const Card = (props) => {
	return (
  	<div style={{margin: '1em'}}>
    	<img width="75" src={props.avatar_url} />
      <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 => <Card key={card.id} {...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.onSubmit(resp.data);
        this.setState({ userName: '' })
      });
  }
  
  render() {
  	return (
    	<form onSubmit={this.handleSubmit}>
      	<input type="text"
        	value = {this.state.userName}
          onChange = {(event) => this.setState({ userName: event.target.value })}
          placeholder="Github username" required />
        <button type="submit">Add card</button>
      </form>
    );
  }
}

class App extends React.Component {
	state = {
  	cards: []
  };
  
  addNewCard = (cardInfo) => {
    this.setState(prevState => ({
    	cards: prevState.cards.concat(cardInfo)
    }))
  };
  
  render() {
  	return (
    	<div>
      	<Form onSubmit={this.addNewCard}/>
        <CardList cards={this.state.cards} />
      </div>
    )
  }
}

ReactDOM.render(<App />, mountNode);