ReactJS Tutorial for Beginners - 13 - Styling and CSS Basics

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

❮ Previous Chapter Next Chapter ❯

---

In this chapter, we are going to learn the basics of styling and CSS in React with an example.

There are many ways to style React components with CSS:

1. Regular CSS stylesheets
2. Inline Styling
3. CSS Modules

1. Regular CSS Stylesheets

Let's start with the first approach using regular CSS stylesheets. Here are the steps to use CSS stylesheets in react components.

1. Create a new file called "index.css" and insert some CSS code in it:

.primary {
  background-color: black;
  color: white;
  font-family: Arial;
  text-align: center;
}

.font-xl {
  font-size: 72px;
}

2. Import the CSS Stylesheet in React component:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class MyComponent extends React.Component {
  render() {
	return (
	  <div>
		 <h1>Hello CSS Style!</h1>
		 <p> Add a little style!.</p>
	  </div>
	);
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

Note that we have imported index.css at the top in the above file:

import './index.css';

We can also conditionally apply a CSS class based on props or state of the component.

For example:

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class MyComponent extends React.Component {
  let className = props.primary ? 'primary' : ''

  render() {
	return (
	  <div>
		 <h1 className = {className } >Hello CSS Style!</h1>
	  </div>
	);
  }
}

ReactDOM.render(<MyComponent primary={true} />, document.getElementById('root'));

2. Inline Styling

To style an element with the inline style attribute, the value must be a JavaScript object.

Let's create a file named inline.js. Within a file, create a functional component called Inline. Within the Inline functional component, we create a JavaScript object with styling information, and refer to it in the style attribute:

import React from 'react'
const heading = {
  fontSize: '72px',
  color: 'orange'
}

function Inline() {
  return (
    <div>
      <h1 style={heading}>Inline Styling</h1>
    </div>
  )
}

export default Inline

Note that the style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

For example: font-size should be camelCased to fontSize.

const heading = {
  fontSize: '72px',
  color: 'orange'
}

We can also directly insert a JavaScript object with the styling information like:

import React from 'react'

function Inline() {
  return (
    <div>
      <h1 style={{ fontSize: '72px', color: 'orange' }}>Inline Styling</h1>
    </div>
  )
}

export default Inline

Note: In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example above is written inside two sets of curly braces {{}}.

3. CSS Modules

CSS Modules are convenient for components that are placed in separate files.

The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.

Let's create the CSS module with the .module.css extension, for example: mystyle.module.css.

.primary{
  color: blue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Import the stylesheet in MyComponent:

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css'; 

class MyComponent extends React.Component {
  render() {
    return <h1 className={styles.primary}>Hello CSS Module Style!</h1>;
  }
}

export default MyComponent ;

Import the MyComponent in index.js of React application:

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

What's Next?

In this chapter, we have learned the basics of styling and CSS in React with an example.

---

❮ Previous Chapter Next Chapter ❯

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF