Javascript 修复React中的文件夹结构错误

在我决定将代码组织到文件夹和子文件夹中之前，我还没有做出反应，一切正常。现在我发现这个模块没有找到，但它不是有一些答案的“无法解决‘反应’”。也许你们中的一些人可能知道这个愚蠢的事情。提前谢谢！我真的很感激

下面是编译错误

这是我的文件夹的图像

这是我的Header.js

import React from 'react';
import './Header/CSS/Header.css';

// Class will consist of Header design and structure
const Header = (props) => {
    return (
        <header className="App-header">
        <div className="container">
            <button className="btn">
              <span>About</span>
            </button>
            <button className="btn">
              <span>Experience</span>
            </button>
            <button className="btn">
              <span>Education</span>
            </button>
            <button className="btn">
              <span>Projects</span>
            </button>
            <button className="btn">
              <span>Contact</span>
            </button>
          </div>
      </header>
    )
};

export default Header;

/* 
  ========================
   HEADER Component
   CSS for the header   
  ========================
  */

 .App-header {
     background-color: black;
     min-height: 05vh;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
     color: white;
     padding: 5vw;
 }

 /* 
  ========================
   HEADER BUTTONS
  ========================
  */

 .container {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .btn {
     margin: 5%;
     display: inline-flex;
 }

import React, { Component } from 'react';
import './App.css';
import Header from './Header/js/Header.js';
/* 
  ========================================
   App class
   Where everything is put together
   eg. Skeleton of my website
  ========================================
*/
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
      </div>
    );
  }
}

export default App;

这是我的App.js

import React from 'react';
import './Header/CSS/Header.css';

// Class will consist of Header design and structure
const Header = (props) => {
    return (
        <header className="App-header">
        <div className="container">
            <button className="btn">
              <span>About</span>
            </button>
            <button className="btn">
              <span>Experience</span>
            </button>
            <button className="btn">
              <span>Education</span>
            </button>
            <button className="btn">
              <span>Projects</span>
            </button>
            <button className="btn">
              <span>Contact</span>
            </button>
          </div>
      </header>
    )
};

export default Header;

/* 
  ========================
   HEADER Component
   CSS for the header   
  ========================
  */

 .App-header {
     background-color: black;
     min-height: 05vh;
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
     color: white;
     padding: 5vw;
 }

 /* 
  ========================
   HEADER BUTTONS
  ========================
  */

 .container {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .btn {
     margin: 5%;
     display: inline-flex;
 }

import React, { Component } from 'react';
import './App.css';
import Header from './Header/js/Header.js';
/* 
  ========================================
   App class
   Where everything is put together
   eg. Skeleton of my website
  ========================================
*/
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“./Header/js/Header.js”导入标题；
/* 
========================================
应用程序类
所有的东西都放在一起
我网站的框架
========================================
*/
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

尝试将导入路径更改为

导入“../Header/CSS/Header.CSS”；

尝试将导入路径更改为

导入“../Header/CSS/Header.CSS”；

应该是这样的

import'../CSS/Header.CSS'；

。/

（2点）返回一个文件夹，

/

（1点）保持在同一目录中

由于您的结构如下所示：

. src
.. Header
.... CSS
...... Header.css
.... JS
...... Header.js

在

Header.js中使用
。/
将带您进入
Header
文件夹。
应该是

import'../CSS/Header.CSS'；

。/
（2点）返回一个文件夹，
/
（1点）保持在同一目录中

由于您的结构如下所示：

. src
.. Header
.... CSS
...... Header.css
.... JS
...... Header.js

在
Header.js中使用
。/
会将您带到
Header
文件夹。
在您的配置文件（如webpack config或Babel）中，您需要使用与操作系统无关的方法查找文件，因为：

Windows使用
\
，其他所有操作都使用
/

因此需要节点的内置
路径
模块

const path = require('path')

在配置文件中使用
路径
和
目录名

// "target": "./dist"
"target": path(__dirname, '/dist')

在您的配置文件（如webpack config或Babel）中，您需要使用与操作系统无关的方法查找文件，因为：

Windows使用
\
，其他所有操作都使用
/

因此需要节点的内置
路径
模块

const path = require('path')

在配置文件中使用
路径
和
目录名

// "target": "./dist"
"target": path(__dirname, '/dist')

如果我这样做，我会得到这个。/src/Header/JS/Header.JS模块未找到：无法解析'C:\Users\leosu\Desktop\my website\src\Header\JS'中的'../Header/CSS/Header.CSS'。如果我这样做，我会得到这个。/src/Header/JS/Header.JS模块未找到：无法解析'C:\Users\leosu\Desktop\my website\src\Header\JS'中的'../Header.CSS'。你的
Header在哪里r、 css
文件？您可能将它指向错误的路径。它看起来将是
导入。/css/Header.css'；
@BrunoMonteiro我添加了我的文件夹结构的图像。这是否回答了您的问题？您的
Header.css
文件在哪里？您可能将它指向错误的路径。它看起来将是
导入。/css/Header.css'；
@BrunoMonteiro我添加了一个我的文件夹结构的图像。这回答了你的问题吗？我得到了这个->。/src/Header/JS/Header.JS模块未找到：无法解析。/CSS/Header.CSS'在'C:\Users\leosu\Desktop\my website\src\Header\JS'我的错了，这是一个打字错误。使用2个点。我更新了答案。现在我得到了这个-/src/Header/JS/Header.JS.JS模块ot在C:\Users\leosu\Desktop\my website\src\Header\JS'中发现：“/node\u modules/react”没问题！很高兴听到：）我得到了这个->。/src/Header/JS/Header.JS模块未找到：无法解析。/CSS/Header.CSS在C:\Users\leosu\Desktop\my website\src\Header\JS'中发现了一个输入错误。使用2个点。我更新了答案。现在我得到了这个-。/找不到src/Header/JS/Header.JS模块：无法解析“C:\Users\leosu\Desktop\my website\src\Header\JS”中的“/node\u modules/react”没有问题！很高兴听到这个消息：）