ReactJS: How to add markup and styles

In ReactJS, adding markup and styles is essential for creating visually appealing user interfaces. In this article, we will explore various ways to add markup and styles to your ReactJS applications.

Adding Markup with JSX

JSX is a syntax extension for JavaScript which allows you to write HTML-like code within your JavaScript files. It simplifies the process of creating and manipulating DOM elements in ReactJS.

To add markup to your components, you can use JSX. Here’s an example:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to my ReactJS application.</p>
    </div>
  );
}

export default App;

In the above code, we have defined a functional component App that returns a <div> element containing an <h1> heading and a <p> paragraph.

Styling Components

There are multiple ways to style components in ReactJS. Let’s explore some of them:

Inline Styles

You can apply inline styles directly to your components using the style attribute in JSX. Here’s an example:

import React from 'react';

function App() {
  const headingStyle = {
    color: 'blue',
    fontSize: '24px',
    fontWeight: 'bold',
  };

  return (
    <div>
      <h1 style={headingStyle}>Hello, World!</h1>
      <p>Welcome to my ReactJS application.</p>
    </div>
  );
}

export default App;

In the above code, we define a JavaScript object headingStyle which contains CSS properties as key-value pairs. We then apply the headingStyle to the <h1> element using the style attribute.

CSS Modules

CSS Modules is a popular approach for styling React components. It allows you to write modular CSS code where class names are scoped locally to the component.

To use CSS Modules, first, you need to configure your project to support it. After that, you can import CSS files and use them in your components. Here’s how it works:

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

function App() {
  return (
    <div>
      <h1 className={styles.heading}>Hello, World!</h1>
      <p>Welcome to my ReactJS application.</p>
    </div>
  );
}

export default App;

In the above code, we import the CSS module file App.module.css and assign it to the styles variable. We then use the scoped heading class name from the CSS module in the className attribute of the <h1> element.

CSS-in-JS Libraries

There are several CSS-in-JS libraries available for styling React components, such as styled-components and Emotion. These libraries allow you to write CSS code directly in your JavaScript files.

Here’s an example using styled-components:

import React from 'react';
import styled from 'styled-components';

const Heading = styled.h1`
  color: blue;
  font-size: 24px;
  font-weight: bold;
`;

function App() {
  return (
    <div>
      <Heading>Hello, World!</Heading>
      <p>Welcome to my ReactJS application.</p>
    </div>
  );
}

export default App;

In the above code, we define a styled component Heading using the styled function from styled-components. We can then use the Heading component as if it were a regular HTML element.

Conclusion

Adding markup and styles is crucial for creating visually appealing user interfaces in ReactJS. In this article, we explored various methods of adding markup and styles to React components, including JSX, inline styles, CSS Modules, and CSS-in-JS libraries. By using these techniques, you can enhance the aesthetics of your ReactJS applications and provide a better user experience.

Remember to experiment with different approaches and find the one that best suits your project requirements. Happy coding!