Difference between "react page" naming rule and "react component" naming rule-CodePudding

i was going through a video tutorial on youtube [react web application]... that person in the video was writing file name in small-case "signin.js" [first letter]... component name in small case [first letter]

import React from 'react'

const signin = () => {
    return (
        <></>
    )
}

export default signin

and was importing it in small case as well

import signin from "./signin";

but when i do the same thing it gives me error... asks me to name component in upper-case first letter... m confused here... i searched for it on internet but did not get the answer... if anyone can help me understand this, pls... thanking you

CodePudding user response：

as far as I know, all react component must get started with upper-case and it even contains pages(because pages are already components and react-router-dom use them as pages ), you can use lower-case as file-name but you must use upper-case to use it otherwise babel will consider that as html tag and if it's not it will returns error

like this :

import Signin from "./signin";

but for better readability it would be better to write file name upper-case too

CodePudding user response：

import signin from "./signin";

If you use it like this, there's a problem with readability,

From signin.jsx

const signin = () => {
return (<></>)}

You have to write it in lowercase here, too

Instead,

import Signin from "./Signin";

File name also Signin.jsx(Extensions are examples)

const Signin = () => {
return (<></>)}

This is more clearly legible and can reduce errors.

CodePudding user response：

Here is the official doc

https://reactjs.org/docs/jsx-in-depth.html also another good resource: https://beta.reactjs.org/apis/react/createElement#caveats

"When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX."