0
100
ViewsFirebase Webpage different from localhost
I'm starting to creating a React.js webpage hosted on firebase and to start out I have been creating a component that is just a dynamic text and button together. The code for this component in my counter.jsx file is
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;
This code looks like this when ran from my localhost:3000 npm start deal. (Does not display index.html contents, only react components) 
The code that renders this and all within my index.js is
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'));
So far, everything is fine when it is ran from my computer, but when this is deployed to my firebase web project (under the free plan) it solely displays my index.html file rather than the react rendered component (meaning its just the html text, not button and stuff). Below is my index.html file that is displyed on my hosted webpage from firebase, but is never shown on my localhost:3000
<!DOCTYPE html>
<html lang="en">
<div id="root">
<h1>this is html, not react component</h1>
</div>
</html>
Is there something I'm missing as to why my firebase webpage is different than my localhost? Again, I'm just starting out so any help is much appreciated