react 和 react-dom 不工作,请帮忙

react and react-dom not working, please help out

我不知道为什么 react 和 react-dom 不能使用我的代码。你可以看到反应的颜色和反应-dom 文本甚至不是 bright/clear

请问可能是什么问题,有人应该帮助我。提前致谢

image

App.js :

import react from "react";
import reactDom from "react-dom";
import Index from '../public/index.html'

function App() {
  return (
    <Index />
  );
}

reactDOM.render(<App />, document.getElementById("root"))

Index.js :

import react from 'react';
import reactDom from 'react-dom';
import './index.css';
import NavBar from './NavBar';
import Filter from './Filter'

export default function Index() {
  return(
    <div>
      <Filter />
      <NavBar />
    </div>
  )
}

Filter.js :

import react from 'react';
import './index.css';


export default function Filter() {
    render(
        <div id="overall-search-input_container" class="overall-search-input_container">
            <div class="input_container">
                <input type="text" class="search" id="search" placeholder="Search for an airdrop" onchange=""/>
                <i id="inputsearch-icon" class="fa-solid fa-magnifying-glass"></i>
                <i id="clear-input" class="fa-solid fa-xmark"></i>
                <button class="cancel-search" onclick="cancelSearch()">Cancel</button>
            </div>
            <div id="filter-list"></div>
            <div id="search-input_container"></div>
        </div>
    )
}

NavBar.js :

import react from "react";
import './index.css'

export default function NavBar() {
    return(
            <div id="overall-option_container">
                <div class="option-logo_container">
                    <h1 className="option-logo">AirdropInspect</h1>
                    <i id="cancel-option" className="fa-solid fa-xmark"></i>
                </div>
            </div>
    )
}

在应用程序组件内部,您的 Index 组件文件路径不正确

import react from "react";
import reactDom from "react-dom";
import Index from '../src/Index'

function App() {
  return (
   <Index />
  );
 }

导入看起来像这个代码