• Each Component in react must be exported
• Every component much return only 1 Element

<aside> 🛠 A component in React is a reusable piece of UI that can manage its own state and be composed with other components to build complex interfaces.

</aside>

<aside> ➡️ Every React component must be imported and used somewhere within the application to be recognized by React.

</aside>

Relationship of Components

The components of the ReactJs Application are not independent but built to be dependent on each other to build a User Interface.

Therefore the Above graph can be interpreted as:

<Root>
	  <A>
		    <D />
	  </A>
	  <B>
		    <E />
	  </B>
	  <C>
		    <F />
		    <G />
	  </C>
</Root>

The components are placed altogether in a folder Components → best practise

Each component is placed in a folder casing is camel, and the component is named in Pascal Case.

my-first-react-app/
├── node_modules/
├── public
├── src/
│   ├── components/
│   │   └── test1
│   │       ├── Test1.jsx
│   │       └── Test1.css
│   │── App.jsx
│   ├── main.css
│   └── index.js
├── package.json
├── package-lock.json
└── README.md

• Example

Nested Components:

Nesting Test2 into Test1,

To import Test2 component in Test1.jsx:

/components/test1/Test1.jsx
import React from 'react'
import Test2 from '../test2/Test2'
const Test1 = () => {
  return (
    <div>
      <h1>Test1 Component</h1>
      <Test2/>
    </div>
  )
}
export default Test1

Test2.jsx: