title: React - component for every styled element?
body: <p>I'm learning React.</p>
  
  <p>It seems React highly promotes composition. <strong>Create React App</strong> even advises against reuse of css class.</p>
  
  <p>Let's say I have a container, which is a white box, with nice rounded corner and shadow, etc. It can contain anything. That's it. No logic. Not much html except a <code>&lt;div&gt;</code></p>
  
  <p>Traditionally, I would just create a global css class named <code>.white-box</code> and then apply it to any <code>&lt;div&gt;</code> that I want it to be this white box.</p>
  
  <p>I know in React you can do this, too. You can do whatever you want. But what is the general practice? From what I found online, it seems I should create a component for it and put any children inside:</p>
  
  <p><code>&lt;WhiteBox&gt;
      &lt;div&gt;anything&lt;/div&gt;
  &lt;/WhiteBox&gt;</code></p>
  
  <p>Isn't it overkill? What are the benefits of doing this? Should I create a component for everything that can be re-used, even when it is such a small thing?</p>