detailed overview of react components

Components are UI utilities we can use to distribute our UI in our code. For now, think that components are JavaScript functions and we can pass 'props' as an argument to them.

function MyFun(props){
  //MyFun is a component
  //props is an argument to MyFun

      //your code
}

What is the need of components?

So let's think we are building a static page from scratch. Try to think about what we can include on this page. There should be a navbar, an article, a main section, a footer, etc.

Now initially, we can write all these sections' code in a single file. But when we want to scale our code and want to add more functionality then it may become messy and hard for us to understand which section is doing what?

So now we can make a parent file for handling all sections and can include different files for different sections in the parent file.

function App(){

//you can assume them as components
//these are external funcitons
    header()
    main()
    article()
    footer()
}

Now we can handle the different sections of our code from different files. These are called functional components

Some Rules/ Syntex

The first letter of the function name of the component should be capitalized because the components tag is similar to the HTML tags.
Only include one react component per file.
You have to call all the components from the single div

You have to call the functional component with the following syntax-

function App()
{
    <div>
        <Header />
        <Main />
        <Footer />
    </div>
}

Import/ Export of components

If we are using one component per file then there should be a way to use them all together in a single file and that is where the concept of import & export comes into play.

Suppose our parent file is an App() component, then we have to import all the components which we want to use, at the top of the App() component.

Similarly, we have to export all the child components so that we can use them in the parent component.

import React from "React"
import Header from "./Header"
import Main from "./Main"
import Footer from "./Footer"

function App(){
    <div>
        <Header />
        <Main />
        <Footer />
    </div>
}

export default function Header()
{
    return(
        //code here
    )
}

export default function Main()
{
    return(
        //code here
    )
}

export default function Footer()
{
    return(
        //code here
    )
}

We can also use nested components in React

import Article from '../Article'
import Aside from '../Aside'

export default function Main()
{
    return(
        //code here

        <div>
            <Article />
            <Aside />
        </div>
    )
}

How it works

First, the index.html file loaded in the browser which includes the main.js file.
This file renders the app component which is the parent component.
Since we also write HTML in our react file, react differs the tags of components on the basis of the first letter.
When react sees the first letter is capitalized, it knows that it is a component and then it calls the component for rendering.
Then the content of that component is rendered first and comes back to the parent for executing the remaining code.
This process is repeated until all components get rendered.

Recap

All components in react are for handling different UI sections.
They are just like JavaScript functions with some added features
We have to import / export components for using them together.
We can nest components for more distributed code.

....and we can create amazing React projects using components :)

That's it for now. Bye 👋

Saran's Blog