Getting Started with External CSS in ReactJS

ReactJS, a well-known JavaScript library for building user interfaces, primarily for single-page applications. If you've worked with ReactJS, you may have noticed how everything, including the styles, seems to live inside JavaScript. This blend of JavaScript and CSS is known as CSS-in-JS, which can be a bit confusing for beginners. Don't worry! Today, we're going to focus on how to use external CSS in ReactJS.

What is External CSS?

Before we dive into the code, let's talk about what external CSS is. CSS stands for Cascading Style Sheets. It's a style sheet language used for describing the look and formatting of a document written in HTML. When we talk about external CSS, we refer to the approach where we write CSS in separate files from the HTML file. This approach can make the code more modular and easier to maintain, especially for larger projects.

Your First External CSS in ReactJS

Let's start with a basic example. First, create a new CSS file in the same directory as your React component file. You can name it anything you want, but for this example, let's call it App.css.

Here's what you might include in App.css:

.container {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

In this CSS snippet, we defined a class called .container, which you can apply to any HTML element in your React component. This class centers the element on the page and gives it a green border.

Next, let's see how to use this CSS class in a React component. Here's a simple component in a file named App.js:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

In this App.js file, we first import React and the App.css file. Then we define a functional component App. Inside the component, we use a div element with the class name container. The class name here must exactly match the one we defined in App.css.

Importance of the Correct Path

One crucial thing to keep in mind when importing an external CSS file is to ensure you specify the correct relative path. In our example, App.js and App.css are in the same directory, so we use ./ to indicate the current directory. If your CSS file is in a different directory, make sure to adjust the path accordingly.

Using Multiple CSS Files

Another advantage of external CSS is that you can split your CSS into multiple files, which can be very helpful for large projects. For example, you might have one CSS file for typography, another for layout, and so on.

Here's how you can import multiple CSS files into a React component:

import React from 'react';
import './Typography.css';
import './Layout.css';

function App() {
  // component code...
}

In this example, we import two CSS files, Typography.css and Layout.css, into the App component. The order of import matters, as CSS rules defined in Layout.css can override the ones in Typography.css if they target the same HTML elements.

CSS Modules

If you want to avoid naming conflicts in your CSS classes, you might want to consider using CSS Modules. CSS Modules are CSS files in which all class and animation names are scoped locally by default.

To use CSS Modules in React, you need to use a naming convention: [name].module.css. Here's an example:

/* App.module.css */
.container {
  /* styles... */
}

/* App.js */
import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.container}>
      /* JSX... */
    </div>
  );
}

In this example, the CSS class container becomes a property of the imported styles object.

Conclusion

ReactJS offers a flexible way to handle CSS, whether you prefer to have your styles in your JavaScript, in separate CSS files, or even in CSS Modules. Using external CSS in ReactJS can be a great way to make your project more organized and maintainable.

Remember, programming is like building with LEGOs. You have different pieces (functions, components, classes) and you can assemble them in various ways. The way you assemble them depends on what you’re trying to build, your preferred style, and even the specific requirements of your project. The same principle applies to handling CSS in ReactJS.

So, don't be afraid to experiment and find the approach that works best for you. Happy coding!