Styling in React JS | Third Rock Techkno

Introduction

React JS is one of the most popular frameworks for building interactive user interfaces. It's easy to learn and has a vast ecosystem of libraries and tools that can help you create complex applications with ease. However, when it comes to styling React components, things can get a bit tricky. In this article, we will explore the various techniques and tools that you can use to style your React JS applications effectively. From CSS-in-JS to popular libraries like styled-components and CSS modules, we will cover everything you need to know to make your UI/UX design stand out.

Why Styling is important in React JS?

When it comes to building web applications, the user interface (UI) and user experience (UX) design are critical factors that can make or break your project. Styling your React components is an essential part of creating a great user interface. Here are some reasons why styling is essential in React JS:

A well-styled UI/UX design can make your web application more appealing and user-friendly.
Styling helps you maintain consistency throughout your application, making it easier to navigate and use.
Good styling can improve the performance of your application by reducing load times and increasing rendering speed.
Proper styling can help you make your application more accessible to users with disabilities, improving the overall user experience.

CSS-in-JS: The Future of Styling in React JS !

CSS-in-JS is a relatively new approach to styling in React JS that has gained popularity in recent years. It allows you to write your styles using JavaScript instead of traditional CSS files. Here are some of the benefits of using CSS-in-JS:

CSS-in-JS allows you to create dynamic and responsive styles that can adapt to different screen sizes and devices.
It makes it easier to manage your styles by keeping them in the same file as your component's logic.
CSS-in-JS frameworks like Emotion and Styled Components can help you create reusable, composable styles that can be shared across your application.
It reduces the need for external dependencies, making your application more lightweight and faster to load.

Lets explore some popular Libraries !

1. Material-UI

Material-UI is a popular UI library for React JS that provides a set of reusable and customizable components based on Google's Material Design guidelines. It's a great choice for creating modern, responsive, and intuitive user interfaces. In this article, we'll explore how to use Material-UI in React JS with examples.

Getting Started with Material-UI

To use Material-UI in your React JS project, you need to install it as a dependency:

npm install @material-ui/core

After installation, you can import the components you want to use in your project. For example, to use a button component:

import { Button } from '@material-ui/core';

function App() {
  return (
    <Button variant="contained" color="primary">
    	Click Me !
    </Button>
 );

Adding Navbar using Material UI

import React from 'react'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'

const NavBar = () => {
    return(
        <div>
            <Toolbar>
                <Typography variant="title" color="inherit">
                	Add Your Menu Here !
                </Typography>
            </Toolbar>
        </div>
    )
}
export default NavBar;

Github Repo : https://github.com/mui/material-ui

2. Ant Design

Ant Design is a popular UI library for React JS that provides a comprehensive set of reusable and customizable components based on the principles of modern design. With Ant Design, you can easily create responsive and interactive user interfaces for your web apps, while adhering to industry standards and best practices.

To use Ant Design in your React JS app, you can start by installing the necessary dependencies:

npm install antd

Then, you can import the components that you need from the Ant Design library and use them in your code:

import { Button } from 'antd';

function App() {
  return (
    <>
      <Input placeholder="Enter your name" />
      <Button type="primary">Click Me !</Button>
    </>
  );
}

Lets understand from Navbar example

import React from 'react';
import { Menu } from 'antd';
import { HomeOutlined, SettingOutlined } from '@ant-design/icons';

const Navbar = () => {
  const handleClick = (e) => {
    console.log('click ', e);
  };

  return (
    <Menu onClick={handleClick} mode="horizontal">
      <Menu.Item key="home" icon={<HomeOutlined />}>
        Home
      </Menu.Item>
      <Menu.Item key="settings" icon={<SettingOutlined />}>
        Settings
      </Menu.Item>
    </Menu>
  );
};

export default Navbar;

In this example, we import the Menu component from Ant Design, as well as two icons (HomeOutlined and SettingOutlined) to use in our navbar.

We then create a Navbar component that contains our Menu. We set the onClick function to handle clicks on the menu items and set the mode property to "horizontal" to display the menu items in a horizontal layout.

We add two Menu.Item components with keys of "home" and "settings". We also use the icon property to set icons for each menu item. The text for each menu item is set as the children of the Menu.Item component.

Github Repo : https://github.com/ant-design/ant-design

3. React Bootstrap

React Bootstrap is built on top of the popular React JavaScript library, which allows developers to create reusable UI components for building interactive user interfaces. React Bootstrap provides pre-designed components such as navigation bars, forms, modals, alerts, buttons, and many more. These components can be used in your React applications to create a responsive user interface without the need for writing custom CSS or JavaScript.

To use React Bootstrap, you will first need to install it as a dependency in your project using a package manager like npm or yarn. Here's an example of how to install React Bootstrap using npm:

npm install react-bootstrap bootstrap

Once you've installed React Bootstrap, you can import the components you need into your React application and start using them.

Here's an example of how to use the Navbar component from React Bootstrap:

import React from 'react';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';

function App() {
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Brand href="#home">React Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#link">Link</Nav.Link>
          <NavDropdown title="Dropdown" id="basic-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default App;

Github Repo : https://github.com/twbs/bootstrap

4. Chakra UI

Chakra UI is built on top of the popular React JavaScript library and provides pre-designed components such as buttons, forms, modals, alerts, and many more. These components can be used in your React applications to create a responsive user interface with minimal CSS or JavaScript code.

To use Chakra UI, you will first need to install it as a dependency in your project using a package manager like npm or yarn. Here's an example of how to install Chakra UI using npm:

npm install @chakra-ui/react

Once you've installed Chakra UI, you can import the components you need into your React application and start using them.

Here's an example of how to use the Button component from Chakra UI:

import { Button } from "@chakra-ui/react"

function App() {
  return (
    <div>
      <Button colorScheme="blue" size="md">
        Click me
      </Button>
    </div>
  )
}

export default App

Lets understand Chakra UI from below example

import { Box, Flex, Spacer, Heading, Button, useColorModeValue } from '@chakra-ui/react';

const Navbar = () => {
  return (
    <Box p={4} bg={useColorModeValue('gray.100', 'gray.900')}>
      <Flex alignItems='center'>
        <Heading size='md'>Logo</Heading>
        <Spacer />
        <Box>
          <Button variant='ghost'>Home</Button>
          <Button variant='ghost'>About</Button>
          <Button variant='ghost'>Contact</Button>
        </Box>
      </Flex>
    </Box>
  );
};

export default Navbar;

In this example, we've used Chakra UI components such as Box, Flex, Spacer, Heading, and Button to create a basic navbar with a logo and navigation links. We've also added some basic styling using the p and bg props to control the padding and background color of the navbar.

Github Repo : https://github.com/chakra-ui/chakra-ui

5. Styled Components

Styled Components is a popular library that allows you to write CSS in your JavaScript code, creating reusable and customizable components. Here's an example of how to use Styled Components in a React app:

First, you'll need to install Styled Components as a dependency in your React app:

npm install styled-components

Next, you can create a styled component by importing the styled function from the Styled Components library and passing a string containing CSS rules as a template literal:

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

const Button = styled.button`
  background-color: ${({ primary }) => (primary ? '#007bff' : '#6c757d')};
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  &:hover {
    background-color: ${({ primary }) => (primary ? '#0069d9' : '#5a6268')};
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  );
};

export default App;

In this example, we've created a Button component using the styled function from Styled Components. We've used the template literal syntax to write CSS rules inside the backticks. The primary prop is used to conditionally apply styles to the button, such as changing the background color and hover effect.

Then, in the App component, we've used the Button component with different props to demonstrate the flexibility of this approach. The resulting button styles are generated by Styled Components and can be reused across your application.

Github Repo : https://github.com/styled-components/styled-components

6. Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces by providing a set of pre-built CSS classes that can be used to style your HTML elements.

Here's an example of how to use Tailwind CSS in a React app:

npm install tailwindcss

Next, you can create a tailwind.config.js file at the root of your project to customize the default configuration of Tailwind CSS:

module.exports = {
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Next, you'll need to import Tailwind CSS styles in your index.js file:

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

In this example, we've imported the default index.css file generated by create-react-app, which we'll use to include Tailwind CSS styles.

Finally, you can use Tailwind CSS classes to style your React components. Here's an example of how to use Tailwind CSS classes to style a button component:

import React from 'react';

const Button = () => {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Click me
    </button>
  );
};

export default Button;

In this example, we've used Tailwind CSS classes like bg-blue-500, hover:bg-blue-700, text-white, font-bold, py-2, px-4, and rounded to style the button component. These classes are generated by Tailwind CSS and can be combined to create custom styles.

Note that Tailwind CSS classes can quickly become verbose and may require some learning to use effectively. However, once you get the hang of it, Tailwind CSS can be a powerful tool for rapidly prototyping and building user interfaces.

Github Repo : https://github.com/tailwindlabs/tailwindcss

Tips for Styling Your React Components

When styling your React components, there are a few tips you can follow to ensure your code is clean, maintainable, and effective:

Use a consistent naming convention for your classes, components, and files. This makes it easier to find and update your styles.
Avoid using global styles that can affect the entire application. Instead, use scoped styles that apply only to specific components.
Use CSS preprocessors like Sass or Less to write more efficient and reusable styles.
Keep your styles modular and composable, so you can easily reuse them across different components.
Use browser dev tools to inspect your components and debug your styles.
Write media queries to make your styles responsive and adaptable to different screen sizes and devices.
Use color schemes and typography to create a consistent visual hierarchy and improve the user experience.
Use CSS-in-JS or CSS Modules to keep your styles close to your components and avoid global namespace conflicts.
Use third-party libraries like Bootstrap, Material UI, Tailwind CSS to speed up your development process and improve consistency.
Test your styles across different browsers and devices to ensure compatibility and performance.
Keep your styles organized and modular to make them easier to maintain and update.

Frequently Asked Questions (FAQs)

What is CSS-in-JS?
CSS-in-JS is an approach to styling in React JS that allows you to write your styles in JavaScript and attach them to your components. It offers benefits like dynamic and responsive styles, reusable and composable styles, and reduced external dependencies.
What is styled-components?
Styled-components is a popular CSS-in-JS library that allows you to write your styles in JavaScript and attach them to your React components. It offers benefits like a more maintainable codebase, faster rendering speed, and improved consistency.
What are CSS Modules?
CSS Modules is an approach to styling in React JS that allows you to write modular, scoped styles that can be imported and used in your components. It offers benefits like improved code organization, reduced global namespace conflicts, and easier debugging.

Conclusion

Styling in React JS can be a bit challenging, but it's an essential part of creating a great user interface and user experience. With the right tools and techniques, you can create effective and efficient styles that make your application stand out. From CSS-in-JS to CSS Modules and best practices for styling, we hope this guide has given you the knowledge and inspiration you need to take your styling skills to the next level. Remember to keep your code organized and modular, follow best practices, and test your styles to ensure compatibility and performance.

Happy Styling in React JS! 👍

Styling in React JS - The Ultimate Guide for Web Developers

Introduction

Why Styling is important in React JS?

CSS-in-JS: The Future of Styling in React JS !

Frequently Asked Questions (FAQs)

Conclusion