App-Fetching.js

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      error: null,
      data: null,
    };
    fetch('https://api.github.com/repos/facebook/react')
      .then((response) => response.json())
      .then((data) => {
        this.setState({data: data});
      })
      .catch((error) => {
        this.setState({error: error});
      });
  }

  render() {
    let {data, error} = this.state;
    if (error != null) {
      return <p>We received an error: {error.message}</p>;
    }
    if (data == null) {
      return <p>Still waiting...</p>;
    }
    return (
      <div>
        <p>This repository has {data.stargazers_count} stars!</p>
      </div>
    );
  }
}

export default App;

App.js

import React from 'react';
import CounterButton from './CounterButton';
import './App.css';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }

  render() {
    let count = this.state.count;
    let inc = () => {
      this.setState({count: count + 1});
    }
    return (
      <div>
        <p>Your count is {count}</p>
        <CounterButton onClick={inc} count={count} />
      </div>
    );
  }
}

export default App;

CounterButton.js

import React from 'react';

function CounterButton(props) {
  let {onClick, count} = props;
  return (
    <button onClick={onClick}>Increase ({count})</button>
  );
}

export default CounterButton;