Day 56: React Course on Udemy

Inline Styling
Inline styling is great because you are able to create a fully self contained component. In order to do this:

  1. We need to create a JavaScript object with the CSS properties and styles.
  2. We then then assign this object to the style attribute of the JSX element we want to style.
// Create a variable called redStyle
// Multi-word properties with hyphen will need to be converted to camelcase
// "Red" is also wrapped in quotes like you would in other JavaScript objects
var Red = function() {
  var redStyle = {
    height: 50,
    width: 150,
    backgroundColor: "red" // Multi-word properties with hyphen will need to be converted to camelcase
  }
  return(
    // Include style attribute and assign it a value of our object redStyle
    <h1 style={redStyle}>Red</h1>
  );
}

ReactDOM.render(
  <Red />,
  document.getElementById("app")
);