<!DOCTYPE html>
React JS Tutorial: CSS in React JS (Hindi) | 2024
Welcome to our tutorial on using CSS in React JS. In this tutorial, we will learn how to style our React components using CSS. React JS is a powerful library for building user interfaces, and styling is an essential part of creating a polished and professional-looking application.
Why Use CSS in React JS?
CSS allows us to control the appearance and layout of our components. By using CSS, we can change the color, size, font, and other stylistic properties of our components. This helps us create a user-friendly interface and improve the overall user experience of our application.
Adding CSS to React JS
There are several ways to add CSS to React JS:
- Inline Styles: You can add inline styles directly to your components using the “style” attribute.
- External Stylesheets: You can create an external stylesheet and import it into your components using the “import” statement.
- Styled Components: You can use libraries like styled-components to create styled components with CSS-in-JS syntax.
Example
Let’s look at an example of how to style a React component using CSS:
“`jsx
import React from ‘react’;
import ‘./App.css’;
function App() {
return (
Welcome to our React JS tutorial!
This is a paragraph of text styled using CSS.
);
}
export default App;
“`
“`css
.container {
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}
h1 {
color: #333;
font-size: 24px;
}
p {
color: #666;
}
“`
Conclusion
In this tutorial, we learned how to use CSS to style our React components. By styling our components, we can create a visually appealing user interface that enhances the overall user experience of our application. I hope you found this tutorial helpful!
