Reactjs - 导入的组件不呈现

Question

Made my first Reactjs App using create-react-app . In my main App component i am calling another component named menuButtons . It is imported but it does not display.

Extra info: In App.js when press CTRL key and click on <menuButtons /> , VScode doesn't redirects me to menuButtons component.

Files Structure:

│
└───src
    │   App.css
    │   App.js
    │   App.test.js
    │   index.css
    │   index.js
    │   menuButtons.js
    │   registerServiceWorker.js
    │
    └───components
            menuButtons.js

My App Component:

import React, { Component } from 'react';
import './App.css';
import menuButtons  from './components/menuButtons.js';

class App extends Component {
render() {
 return (
  <div className="App">
    <footer className="App-header">
      <h1 className="App-title">SPEECH RECOGNITION SYSTEM</h1>
    </footer>

    <menuButtons />    
  </div>
  );
 }
}

export default App;

menuButton Component:

import React, { Component } from 'react';

export default class menuButtons extends Component {
  render() {
    return (
      <div>
        <p>Press the icon to start recording</p>
      </div>
    );
  }
}

Answer 1

The directory structure does not seem right. I recommend moving the components directory to src . Then refer the import menuButtons from './components/menuButtons.js';

Answer 2

menuButtons's directory does not seem right. its must be below example.

import menuButtons  from '../components/menuButtons.js';

or

you can moving the component folder to src folder then you can use

import menuButtons from './components/menuButtons.js';

Answer 3

你必须你的c omponentname更改为C omponentname（如果它不到风度工作尝试在你的组件的文件名相同的问题）

Answer 4

如果您在src目录中，请尝试不使用.js

import menuButtons  from './components/menuButtons';

Answer 5

Changed the component named from camelCase to PascalCase and it worked. But I am still confused because the naming convention of components in React-Native is upto user preference.

Answer 6

You have to rewrite the name of your component that is not rendering, instead of menuButtons change it to MenuButtons.