React 组件未呈现并在 vscode 中显示为灰色

Question

组件未正确加载。它也变灰了。该应用程序很简单，只有一个组件，在 it.However 中只有一个 div 我似乎无法导入 it.Never 有这个问题 before.Maybe 我遗漏了一些东西 idk.I在过去的 5 个小时里我一直在为此苦苦挣扎。也许我的 system.plz 帮助有问题。

counterr.js

代码

import React from 'react'

function counterr () {
    return (
        <div>
            hello from counter
        </div>
    );
}

export default counterr;

app.js

代码

import react from 'react';
import './App.css';
import counterr from './components/counterr'

function App() {
  return (
    <div>
    1234
     <counterr/>
    5678
    </div>
  )
}

export default App;

计数器组件

app.js

呈现应用程序不加载 counterr 组件

Answer 1

React（函数式或 class）组件必须以大写字母开头

Answer 2

您的功能组件需要大写。

import React from "react";

function Counterr() {
  return <div>hello from counter</div>;
}

export default Counterr;

和 App.js:

import Counterr from "./components/counterr";

export default function App() {
  return (
    <div>
      1234
      <Counterr />
      5678
    </div>
  );
}

React 组件未呈现并在 vscode 中显示为灰色

React component not rendering and greyed out in vscode

javascript

frontend

node.js

reactjs

visual-studio-code