React create app - 如何导入嵌套组件？

Question

I am using React create app and I understand how to import a component into my main app which is called app.js. What I do not understand is how I import a component in a component which is then imported in app.js (nested component). In my app.js file, I have a component called Portfolio. In my portfolio.js file, I have a component called Language. Is it even possible to nest components with React create app? Because it does not seem to work.

This is what I tried to do:

In my app.js file :

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Portfolio from './components/portfolio';    
import "./css/styles.css"


function App() {
  return (
    <div className="App">
      <header>
      <h1>My beautiful title</h1>

      </header>
      <Portfolio />
    </div>
  );
}

export default App;

In my portfolio.js file :

 import React, {Component} from 'react';
import Language from './components/language';
class Portfolio extends Component {

      render() {

        return (
          <div className="portfolio">
         <Language/>
            <h1>My protfolio</h1>


          </div>
        );
      }
    }

    export default Portfolio;

And in language.js I have:

import React, {Component} from 'react';

class Language extends Component {
  render() {
    return(
<div>Switch language</div>
      );
  }
}

export default Language;

In my browser, I keep getting the following error:

"./src/components/portfolio.js Module not found: Can't resolve './components/language' in 'C:\\Users\\mluce\\exercice-react\\src\\components'"

My language.js file is definitely sitting in my components folder. I do not understand why I get this error?

Answer 1

在portfolio.js ：

import Language from './language';