A component of react import cannot be used

problem description

when using a react import component, using this component does not read the component, but an empty definition. The import component does not report an error

related codes

import React from "react";
import ReactDOM from" react-dom";
import". / index.css";
import home from". / containers/home";
import * as serviceWorker from". / serviceWorker";

ReactDOM.render (< home / >, document.getElementById ("root"));

/ / If you want your app to work offline and load faster, you can change
/ / unregister () to register () below. Note this comes with some pitfalls.
/ / Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

clipboard.png

clipboard.png

clipboard.png

May.20,2022

as a component, capitalize the initials of your home . Try changing it to Home .

the React official document says that the build name must begin with an uppercase letter
clipboard.png

document URL: https://react.docschina.org/d...


components you write begin with uppercase letters, which is determined by the JSX parsing rules.
essentially, JSX is just a syntax sugar for React.createElement (component, props,... children). JSX syntax relies on babel for parsing, starting with
lowercase letters: built-in components, HTML elements, such as

, are parsed to React.createElement ('div').
begins with an uppercase letter: custom components or imported components in the JS file, such as < Foo / >, resolve to React.createElement (Foo).
exception: use dot syntax (Dot Notation) in JSX to indicate that a React component < obj.component / > will resolve to React.createElement (obj.component).

Menu