Create React components and apply styles to them

In this post, I am going to explain how to create two components (Title, Content) and apply styles to them, and render them using React.

Follow step-by-step procedure to start developing the application.

 

Step 1: Go to the post (Quickly Set Up aReact Project with Vite: A Step-by-Step), and set up a React Project ‘apply-css’.

 

Project structure looks like below.

 

Step 2: Create Title and Content components.

 

Create components folder in src/ and define Title and Content components.

 

Title.jsx

export default function Title(){
    return <h1>Introduction to React</h1>
}

Content.jsx

export default function Content() {
  return (
    <p>
      React is an open-source front-end JavaScript library, maintained by
      Facebook, that allows developers to build dynamic and responsive user
      interfaces. It is component-based, meaning you can build encapsulated
      components that manage their own state, and compose them to create complex
      UIs. React follows a declarative approach, where you describe what the UI
      should look like, and React handles updating and rendering components
      efficiently. It primarily focuses on the view layer of the application (in
      MVC architecture), making it easy to build reusable, fast, and interactive
      user interfaces.
    </p>
  );
}

Step 3: Create style sheet file.

 

Create a folder css in src/ and define styles.css file.

 

styles.css

h1 {
  font-family: "Roboto", sans-serif; /* Clean, modern font */
  font-size: 2.5rem; /* Adjust for readability */
  font-weight: 700; /* Bold for emphasis */
  color: #333; /* Soft black for readability */
  margin-bottom: 20px; /* Space below the header */
  text-align: center; /* Center the text */
  line-height: 1.2; /* Balanced line spacing */
  letter-spacing: 1px; /* Slightly more spaced letters */
}

h1::after {
  content: "";
  display: block;
  width: 300px; /* Underline width */
  height: 5px; /* Underline thickness */
  background-color: #ee8abf; /* Accent color for underline */
  margin: 10px auto; /* Center and space below the underline */
  border-radius: 2px; /* Smooth edges */
}

p {
  font-family: "Open Sans", sans-serif; /* Clean, readable font */
  font-size: 1.125rem; /* Slightly larger than default */
  line-height: 1.6; /* Good line spacing for readability */
  color: #555; /* Soft dark gray for easy reading */
  margin-bottom: 1.5em; /* Consistent space between paragraphs */
  max-width: 90vw; /* Limit paragraph width for better readability */
  text-align: justify; /* Aligns text for a clean, justified look */
  letter-spacing: 0.5px; /* Slightly spaced letters */
  margin-left: 30px;
}

p::first-letter {
  font-size: 1.5rem; /* Enlarges the first letter */
  font-weight: bold; /* Emphasizes the first letter */
  color: #3498db; /* Adds color for a nice accent */
}

Total project structure looks like below.

 

Step 4: Update main.jsx with below content.

 

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

// Import Components
import Title from './components/Title'
import Content from './components/Content'

// Import style sheet
import './css/styles.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Title />
    <Content />
  </StrictMode>,
)

Step 5: Build and run the application by executing below commands.

cd apply-css
npm install
npm run dev

Open the url ‘http://localhost:5173/’, you will see below screen.

 

Explanation of main.jsx file

import Title from './components/Title'

import Content from './components/Content'

 

Above statements import two components, Title and Content, from the corresponding files located in the ./components/ folder. In a React app, components are typically separated into different files for better organization and reusability. These imported components will be used in the render section.

 

import './css/styles.css'

This imports a CSS file named styles.css located in the ./css/ folder. The CSS file contains styling rules that will be applied globally to the React components in the application. Importing it ensures that the styles are applied when the components render.

 

createRoot(document.getElementById('root')).render(

  <StrictMode>

    <Title />

    <Content />

  </StrictMode>,

)

Above snippet is responsible for rendering the specified JSX content (<Title /> and <Content />) into the root element in the DOM. The JSX syntax here represents two components, <Title /> and <Content />, which are being rendered inside the <StrictMode> wrapper.

 

You can download this application from this link.

Previous                                                    Next                                                    Home