im confused with the file import and export in react. I have a components folder inside it. I have Authentication folder in which der is Login.css .Outside the components folder I have a pages folder inside it there is Login.js. I want to import Login.css to Login .js .....pls help thank u

CodePudding user response：

---pages
    -Login.js
---components
  ---Authentication
    -Login.css

I am guessing this is your folder structure. To import Login.css to your Login.js file, you need to add,

import "../components/Authentication/Login.css"

at the top of your Login.js file.

.. to traverse up your directory

. is at your current directory

CodePudding user response：

Importing and exporting can be done in two ways:

1. Default Export/Import
2. Named Export/Import

1) Default Exports

You can have only single default export per file

Lets suppose you have a file named yourComponent.js and code inside it is following

const YourComponent = () => {
    ...
    return <>...</>
}

export default YourComponent;

Suppose you want that component in index.js, you can import YourComponentin the following way:

import YourComponent from "./yourComponent"
//in case the index file and yourComponent file are adjacent to each other

import YourComponent from "./folder/yourComponent"
//in case the index file and folder are adjacent to each other and folder has yourComponent

import YourComponent from "../yourComponent"
//in case yourComponent file is one level up from the index file

2) Named Exports

You can have multiple named exports from single file

This is how you will perform a named export of YourComponent

export const YourComponent = () => {
     ...
     return <>...</>
}

You have to enter the same name by which you have exported the component in case of named export. This is how you import a named export

import {YourComponent} from "./yourComponent"

CodePudding user response：

First of all, you should improve the quality of your question. You have many typos and it is hard to understand the structure of your files. is this correct?:

Project
├── pages
│   └── Login.js
└── components
    └── Authentication
         └── Login.css

If so inside Login.js import it like that:

import '../components/authentication/login.css';

But why are you separating your files like that? As Login seems to be a page, I think it does not make sense to put its style sheet into components/Authentication.