Different ways of using Images in ReactJs

JsConfig — Mon, 11 Mar 2024 15:10:01 +0000

In React, pictures make your app look cool! This guide will show you easy ways to use different types of images. Whether they're from your computer, change when you click, or load super fast, we'll learn simple tricks to make your React app awesome.

Local Charm: Importing Images

1.1 Importing Local Images:

The easiest way to use images stored within your React project is by importing them directly into your components. Imagine having a folder named 'images' with your local gems:

import localImage from './images/local-gem.jpg';

const LocalImageComponent = () => {
  return <img src={localImage} alt="Local Gem" />;
};

Distant Dreams: Hosted Images

2.1 Including Images from URLs:

Easily include images from external URLs to add a touch of the web to your project:

const HostedImageComponent = () => {
  return <img src="https://example.com/web-image.jpg" alt="Web Image" />;
};

Dynamic Delights: Loading Images Dynamically

3.1 Dynamically Loading Images:

When your images need to change dynamically based on conditions or data, React has your back:

const DynamicImageComponent = ({ imageIndex }) => {
  const imageArray = ['url1.jpg', 'url2.jpg', 'url3.jpg'];
  const dynamicImage = imageArray[imageIndex];

  return <img src={dynamicImage} alt="Dynamic Gem" />;
};

SVG Stories: Reacting to SVGs

4.1 Using SVGs in React:

SVGs, the heroes of vector graphics, find a cozy home in React components:

import { ReactComponent as Logo } from './images/logo.svg';

const SvgImageComponent = () => {
  return (
    <div>
      {/* Using an imported SVG */}
      <Logo />

      {/* Using an inline SVG */}
      <svg width="100" height="100" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" fill="green" />
      </svg>
    </div>
  );
};

Performance Pilots: Optimizing for Speed

5.1 Lazy Loading Images:

For a smoother user experience, consider lazy loading images not immediately visible on the screen:

const LazyLoadImage = () => {
  return <img src="lazy-gem.jpg" alt="Lazy Gem" loading="lazy" />;
};

Images in React are not just visuals; they're the heroes of your story. With these easy tricks, you're all set to make your React app a visual masterpiece. Try them out, mix things up, and enjoy your journey with React! Happy coding! 🚀📸
This tutorial is brought to you by Jsconfig.com, specializing in Next.Js training.

Feel free to contribute any additional methods you're familiar with in the comment section.

ReactJS Styling: Exploring Different Techniques with Examples

JsConfig — Thu, 07 Mar 2024 11:59:20 +0000

In ReactJs development, how we style things is super important. This article explores different ways to style React components, each with its own benefits and best uses.

There are various methods or, more precisely, numerous ways to utilize CSS in ReactJs :

Traditional Stylesheets:
The conventional method involves using external stylesheets (CSS or SCSS) and importing them directly into React components. For instance:

// styles.css
.button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

// Button.js
import React from 'react';
import './styles.css';

const Button = () => (
  <button className="button">
    Click me
  </button>
);

export default Button;

Inline Styles:
React supports inline styles, allowing developers to apply styles directly within components using JavaScript objects. For instance:

const Button = () => {
  const buttonStyles = {
    backgroundColor: '#2ecc71',
    color: '#fff',
    padding: '10px 15px',
    border: 'none',
    borderRadius: '5px',
  };

  return (
    <button style={buttonStyles}>
      Click me
    </button>
  );
};

CSS Modules:
CSS Modules offer local scoping within React components to avoid global styling conflicts. For instance:

// Button.module.css
.button {
  background-color: #e74c3c;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

// Button.js
import React from 'react';
import styles from './Button.module.css';

const Button = () => (
  <button className={styles.button}>
    Click me
  </button>
);

export default Button;

Styled Components:
Styled-components allow the definition of styles directly within JavaScript files. For instance:

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #f39c12;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
`;

const Button = () => (
  <StyledButton>
    Click me
  </StyledButton>
);

Preprocessors(SASS/LESS):
Integrating CSS preprocessors enhances styling capabilities. For instance, using SASS:

// styles.scss
$primary-color: #9b59b6;

.button {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
}

// Button.js
import React from 'react';
import './styles.scss';

const Button = () => (
  <button className="button">
    Click me
  </button>
);

export default Button;

Utility-First CSS:
Libraries like Tailwind CSS provide a utility-first approach. For instance:

import React from 'react';

const Button = () => (
  <button className="bg-gray-800 text-white p-2 rounded">
    Click me
  </button>
);

Conclusion:
In ReactJs, choosing the right styling approach is crucial. Whether using traditional stylesheets, inline styles, CSS Modules, Styled Components, preprocessors, or a utility-first paradigm, understanding these techniques empowers developers for tailored decisions in their projects. This tutorial is brought to you by Jsconfig.com, specializing in React.js training.

Feel free to contribute any additional methods you're familiar with in the comment section.

Forem: JsConfig

Different ways of using Images in ReactJs

ReactJS Styling: Exploring Different Techniques with Examples