title: React localhost page is blank
body: <p>I tried to update my localhost page while working on a react project and it just turned blank. I get no errors on the code itself, but the page turned blank. Tried opening on a different port but it didn't work.</p>
  <p>I'm trying to make an expense tracker, if that helps you at all.</p>
  <p>App.js</p>
  <pre><code>import ExpenseItem from &quot;./components/ExpenseItem&quot;;
  
  function App() {
  
    const expenses = [
      {
        id: 'e1',
        title: 'Toilet Paper',
        amount: 94.12,
        date: new Date(2020, 7, 14),
      },
      { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
      {
        id: 'e3',
        title: 'Car Insurance',
        amount: 294.67,
        date: new Date(2021, 2, 28),
      },
      {
        id: 'e4',
        title: 'New Desk (Wooden)',
        amount: 450,
        date: new Date(2021, 5, 12),
      },
    ];
  
    return (
      &lt;div&gt;
        &lt;h2&gt;Let's get started!&lt;/h2&gt;
        &lt;ExpenseItem title={expenses[0].title}
          amount={expenses[0].amount}
          date={expenses[0].date}&gt;
        &lt;/ExpenseItem&gt;
  
        &lt;ExpenseItem title={expenses[1].title}
          amount={expenses[1].amount}
          date={expenses[1].date}&gt;
        &lt;/ExpenseItem&gt;
  
        &lt;ExpenseItem title={expenses[2].title}
          amount={expenses[2].amount}
          date={expenses[2].date}&gt;
        &lt;/ExpenseItem&gt;
  
        &lt;ExpenseItem title={expenses[3].title}
          amount={expenses[3].amount}
          date={expenses[3].date}&gt;
        &lt;/ExpenseItem&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>ExpenseItem.js</p>
  <pre><code>import React, { Component } from 'react';
  import './ExpenseItem.css'
  
  class ExpenseItem extends Component {
      //state = {}
  
      render(props) {
  
          return (
              &lt;div className='expense-item'&gt;
                  &lt;div&gt;{props.date.toISOString()}&lt;/div&gt;
                  &lt;div className='expense-item__description'&gt;
                      &lt;h2&gt;{props.title}&lt;/h2&gt;
                      &lt;div className='expense-item__price'&gt;${props.amount}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default ExpenseItem;
  </code></pre>
  <p>ExpenseItem.css</p>
  <pre><code>.expense-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
      padding: 0.5rem;
      margin: 1rem 0;
      border-radius: 12px;
      background-color: #4b4b4b;
  }
  
  .expense-item__description {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: flex-end;
      flex-flow: column-reverse;
      justify-content: flex-start;
      flex: 1;
  }
  
  .expense-item h2 {
      color: #3a3a3a;
      font-size: 1rem;
      flex: 1;
      margin: 0 1rem;
      color: white;
  }
  
  .expense-item__price {
      font-size: 1rem;
      font-weight: bold;
      color: white;
      background-color: #40005d;
      border: 1px solid white;
      padding: 0.5rem;
      border-radius: 12px;
  }
  
  @media (min-width: 580px) {
      .expense-item__description {
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          flex: 1;
      }
  
      .expense-item__description h2 {
          font-size: 1.25rem;
      }
  
      .expense-item__price {
          font-size: 1.25rem;
          padding: 0.5rem 1.5rem;
      }
  }
  </code></pre>