why do not display in react? [closed]

Solution for why do not display in react? [closed]
is Given Below:

I am a react beginner learner. I do try to create the first project in react. But I can not output my project.

My react index.js is:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js is:

import react  from 'react';
import heard_title from './component/heard_title'



export default function App() {
  return (
    <div>
      <test />
      <heard_title />
    </div>
  );
}


my component is

import React from 'react'


export default function heard_title() {
    return (
        <div>
            <h1>hi</h1>
        </div>
    )
}

But when the project is run why I can not show output hi?

First of all you should share file structure of your app so that we can understand the work flow of imports in your app.

for example

--- project
        -- src
              - App.js
              - index.js
              -- components
                          - heard_title.js
            

Once check your imports “components” or “component” directory name

You are violating one of React protocols!

Warning: <heard_title /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

To achieve your goal, update your App.js like below:

import react  from 'react';
import HeardTitle from './component/heard_title'



export default function App() {
  return (
    <div>
      <Test />
      <HeardTitle />
    </div>
  );
}