As a react developer you should know some rules and regulations to follow in your code to refine your code so that your code can function properly.

1.Always Return Empty Fragments or div

Since reactions will return only one thing and if you want to return multiple elements then you have to use either div <div></div> or empty fragments <> </>.

1. // Function that returns elements inside an empty fragments. 
function App(){
return(
<> 
<h1>Hello Js</h1>
<p> Hello I Am Para </p>
 </>
);
}

// Function that returns multiple items under div.
function SecondApp(){
return (
<div>
<h1> Heading</h1>
<p>I am a paragraph. </p>
<a href="#"> Click Me </a>
</div>
);
}

2. Always set Function Names Having First Letter Capital.

If You notice, above i have created two function but first letter of their name is Capital letter. In React whenever you declare the function set the first letter capital of the function name.

function App(){
return (
<div> 
<h1>Heading</h1>
<p> Paragraph  is Paragraph </p>
</div>
)
}

3.Always Name Components File having First letter CAPITAL.

Whenever You Create a Component file then always set the first letter capital.

4.Always Export the main component function and Import to main file.

If you notice above, I have not exported the components thus this will not render or reflect in my main page. But after exporting its also important to import on the main page Component file.

5.Always pass the Props from the Parent File to Component File.

If you need to pass the same values to different locations or you want show the dynamics values then you can pass the values as props and then apply them. It's a very good practice that you always pass the parent to child rule - where you have to pass the prop from parent to child.