Introduction to React: Understanding the Basics-part.10

In React, assets refer to any files or resources your app needs, such as images, fonts, stylesheets, or data files. Where you store these assets depends on how they are used in your app. Where to Store Assets in React? Public Folder → For Static Assets (No Processing Needed): Use public for: Static images (logo.png, favicon.ico) HTML files (index.html) External JavaScript or CSS (custom-script.js, styles.css) How to access a file in public? Src Folder → For Dynamic Assets (Need Processing by React): The src folder is for files that are imported inside components and need to be bundled with the app. Use src for: React components (.js or .jsx files) Dynamic images (imported in JS) CSS Modules (.module.css) How to import an image in src? import logo from "./assets/logo.png"; function App() { return ; } or , Import Files Dynamically with require (CommonJS): const logo = require("./assets/logo.png"); function App() { return ; } This works in older projects but is less common in modern React. For assets in the public folder: Using Just the File Path (Absolute Path) _!! Since public files are not processed by Webpack, you cannot import them directly in JavaScript. _ _Choose public for files that don’t change and src for assets that are used in components! _

import logo from "./assets/logo.png";

function App() {
  return ;
}

const logo = require("./assets/logo.png");

function App() {
  return ;
}

Related Posts

Terraform Tree Structure: Boost Cloud Efficiency and Ma...

Feb 17, 2025  0

Custom socket.io server.ts in nextjs baby.

Feb 19, 2025  0

Day 9: Adding Edit & Delete Features to My Blog Project

Feb 25, 2025  0