html - How to apply CSS and Styling to a React component

Question

I have been looking, however, I have had little luck finding any way to style the React.js file that I have created, I converted it from a standard web page, so I have the original CSS, however, I do not know how to use React to display the page with the proper styling.

Any help would be appreciated!

var NavBar = React.createClass({
  render: function() {
    return (
      /* NavBar */
      <div className="dark_bg_color">
        <img src="logo.png" />
        <div className="table_center">
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div className="right_nav">
          <div className="table_center">
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div className="vertical-line">&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<NavBar />, document.getElementById('nav'));

var Gallery = React.createClass({
  render: function() {
    return (
      /* Gallery */
      <div >
        <div align="middle">
          <div id="head">
            <img id="pic" align="middle" max-width="100%" src="title_pic.png" />
            <div align="left" className="big">
              <div>
                <span>Dine with the Best</span>
                <div className="words">
                  <span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Gallery />, document.getElementById("Gallery"));

var WhatsNew = React.createClass({
  render: function() {
    return (
      <div  className="dark_bg_color">
        <h2 style={{marginBottom: 30}}>
          <span>What's New</span>
        </h2>
        <div className="autoplay">
          <img src="whatsnew0.png" />
          <img src="whatsnew1.png" />
          <img src="whatsnew0.png" />
        </div>
      </div>
    );
  }
});
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew"));

var BonEvents = React.createClass({
  render: function() {
    return (
      /* Events */
      <div id="events" className="dark_bg_color">
        <div className="box">
          <div className="box-text">
            <div className="horizontal-line" />
            <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div>
            <div className="horizontal-line" />
          </div>
        </div>
        <h2>
          <span>Bon Events</span>
        </h2>
        <div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<BonEvents />, document.getElementById("events"));

var IOS = React.createClass({
  render: function() {
    /* IOS */
    return (
      <div >
        <h2>
          <span />
        </h2>
      </div>
    );
  }
});
ReactDOM.render(<IOS />, document.getElementById("advertiseApp"));

var Footer = React.createClass({
  render: function() {
    return (
      /* Footer */
      <div>
        <div className="footer_center">
          <div>
            <ul>
              <li>ABOUT</li>
              <li>PRESS</li>
              <li>CONTACT</li>
              <li>SUPPORT</li>
              <li>BONAPP FOR RESTAURANTEURS</li>
            </ul>
          </div>
        </div>
        <div className="legal_center">
          <div>
            <ul>
              <li>Copyright ? 2016 BonApp Dining Inc.</li>
              <li>Privacy Policy</li>
              <li>Legal</li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Footer />, document.getElementById("footer"));

Answer 1

A first read through your question makes it seem that your existing CSS isn't working when you 'React-ify' your webpage.

It should.

If it's not, there's something else going on that will need further diagnosing to fix. I recently rewrote one of my projects in React and continued to use the exact same CSS file and things worked great.

However, if you're asking about the best way to go about this...

As others have said, React prefers inline styles.

However, I don't. It's messy, can be difficult to change, and easily gets unwieldy.

SCSS or LESS are the best ways to style in React.

But why? Here are a few reasons:

Your CSS Is Reusable

If you style inline with the React way, it works great for a couple components.

But when those components start to stack up, you start realizing you're using the same styles again and again. Which sucks.

It's Easy to Make Changes

When a component needs an updated style, you no longer have to dig through your React code to find the right component (or was it the parent component?) and fix it.

Instead, just use CSS like you've always used.

You Don't Have to Worry About Overwriting

In the cascading part of CSS, inline styles are the final stop. They overwrite everything.

At first, it sounds like a great solution to the styles you're implementing, and in a brochure website, perhaps it would be fine. But when you start working with bigger apps, you run into issues that are almost impossible to troubleshoot.

Instead of fighting with the cascading part of CSS, work with it and keep your styles in the same place.

You Use SCSS & LESS Everywhere

The biggest point for me is yes, if you're working in React and you prefer inline styles, they can work great.

But what happens when you move to any other framework? All of a sudden those inline styles don't work so well, and you're back to writing 'normal' CSS with the rest of us. So why change things up just for one framework?

I understand if you work in React full-time and it makes sense to experiment with new best practices, but for most of us, it doesn't make sense to re-invent the wheel when you only can use that wheel on one model of car.