CSS in React - simple syntax question

JavaScript
#1

Hi, very simple question today - why do CSS property values need quotation marks in React? I remember seeing this somewhere else as well, maybe Jquery? Searched on Google to clarify what the purpose of this is but couldn’t find anything:

example:

class Counter extends Component {
  state = { count: 0, imageUrl: "https://picsum.photos/200" };

  styles = {
    fontSize: 10,
    fontWeight: "bold"
  };
#2

If you did not use " and " around fontWeight’s bold value, then JavaScript would think bold is a variable and you would end up with a Reference error if bold is not defined. The styles object is just a normal object and property names and values still must following the same syntax rules they normally do. The following would totally be valid:

const BOLD = "bold";
class Counter extends Component {
  state = { count: 0, imageUrl: "https://picsum.photos/200" };

  styles = {
    fontSize: 10,
    fontWeight: BOLD
  };

OR the following:

const fontWeight = "bold";
class Counter extends Component {
  state = { count: 0, imageUrl: "https://picsum.photos/200" };

  styles = {
    fontSize: 10,
    fontWeight
  };
#3