Estoy empezando a crear una página web de React.js alojada en firebase y, para empezar, he estado creando un componente que es solo un texto dinámico y un botón juntos. El código para este componente en mi archivo counter.jsx es
import React, { Component } from "react"; class Counter extends Component { state = { count: 1, }; styles = { fontSize: 20, fontWeight: "bold", }; render() { // const { imageUrl } = this.state; return ( <div> <span className={this.getBadgeClasses()}>{this.formatCount()}</span> <button className="btn btn-secondary btn-sm">Increment</button> </div> ); } getBadgeClasses() { let classes = "badge m-2 bg-"; classes += this.state.count === 0 ? "warning" : "primary"; return classes; } formatCount() { const { count } = this.state; return count === 0 ? "Zero" : count; } } export default Counter; Este código se ve así cuando se ejecutó desde mi localhost: 3000 npm start deal. (No muestra el contenido de index.html, solo reacciona los componentes) 
El código que representa esto y todo dentro de mi index.js es
import React from "react"; import ReactDOM from "react-dom"; import './index.css' import 'bootstrap/dist/css/bootstrap.css' import Counter from './Components/counter' ReactDOM.render(<Counter />, document.getElementById('root'));Hasta ahora, todo está bien cuando se ejecuta desde mi computadora, pero cuando se implementa en mi proyecto web Firebase (bajo el plan gratuito), solo muestra mi archivo index.html en lugar del componente reaccionado (lo que significa que es solo el html texto, no botón y esas cosas). A continuación se muestra mi archivo index.html que se muestra en mi página web alojada desde firebase, pero nunca se muestra en mi host local: 3000
<!DOCTYPE html> <html lang="en"> <div id="root"> <h1>this is html, not react component</h1> </div> </html>¿Hay algo que me falta sobre por qué mi página web de firebase es diferente a mi localhost? De nuevo, recién estoy comenzando, así que cualquier ayuda es muy apreciada.