Question 134957 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Difference between "react page" naming rule and "react component" naming rule

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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    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.

    Login or Signup to reply.
  3. 0

    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."

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search