src⁄App.js

import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import axios from 'axios';

function App() {
  const [chartData, setChartData] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get('http://localhost:5000/stock/AAPL');
      const raw = result.data['Time Series (5min)'];
      const labels = Object.keys(raw).reverse();
      const data = labels.map(time => raw[time]['4. close']);

      setChartData({
        labels,
        datasets: [
          {
            label: 'Apple Stock Price',
            data,
            fill: false,
            borderColor: 'blue',
          },
        ],
      });
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>Stock Chart</h1>
      <Line data={chartData} />
    </div>
  );
}

export default App;

src⁄components⁄About.js

import React, { Component } from 'react';
import logo from '../logo.svg';

class About extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">About Page</h1>
        </header>
        <p className="App-intro">
          Welcome to the about page :)
        </p>
      </div>
    );
  }
}

export default About;

src⁄components⁄Home.js

import React, { Component } from 'react';
import logo from '../logo.svg';

class Home extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Home Page</h1>
        </header>
        <p className="App-intro">
          Welcome to the home page :)
        </p>
      </div>
    );
  }
}

export default Home;

src⁄config⁄routes.js

import Home from '../components/Home';
import About from '../components/About';


export const Routes = [
  {
    path: '/',
    exact: true,
    component: Home
  },
  {
    path: '/about-us',
    exact: false,
    component: About
  },
];

src⁄index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();