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

Question

我不知道为什么react和react-dom不能与我的代码一起工作。你可以看到react的颜色react-dom文本甚至没有亮/清

请问出了什么问题，应该有人来帮帮我。提前感谢

形象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>
)
}

Answer 1

在app组件内部你的Index组件文件路径不正确

import react from "react";
import reactDom from "react-dom";
import Index from '../src/Index'
function App() {
return (
<Index />
);
}

导入如下代码