Adding Styles to React Components with CSS or Inline Styles

There are two main (default) ways to add styles to React components:

First, just normal CSS classes can be added to react components by setting a className attribute:

<p className='big-text'>BIG</p>

(It's called className instead of class because "class" is a reserved keyword in javascript)

Second, "inline styles can be added as javascript objects to the style attribute of a component:

<p style={{ fontSize: 20, color: 'blue' }}>Blue</p>

Notice that the "double curly braces" represent a javascript object being created inside of JSX, and also that the css attributes are camel cased.