Components are the fundamental units in any React app.
In this thread, I'll explain what components are and how they're used.
Let's begin 👇🏽
In this thread, I'll explain what components are and how they're used.
Let's begin 👇🏽
What are components?
Components are the building blocks of any React app.
The idea of React is to create an app out of multiple individual components.
Components enable us to break the UI down into independent reusable pieces so that we can work on one component at a time.
Components are the building blocks of any React app.
The idea of React is to create an app out of multiple individual components.
Components enable us to break the UI down into independent reusable pieces so that we can work on one component at a time.
So, multiple components are clubbed together and an app is made.
Think of Twitter for instance: the search bar is one component, the sidebar is another, the feed is another and so on.
You can read more about it here:
Think of Twitter for instance: the search bar is one component, the sidebar is another, the feed is another and so on.
You can read more about it here:
But what are components from a Javascript point of view?
Well, if you have your Javascript lens on, components can be viewed as simple function calls.
They take input(s) and give output.
The input is called 'props' and the output is the element that appears on the screen.
Well, if you have your Javascript lens on, components can be viewed as simple function calls.
They take input(s) and give output.
The input is called 'props' and the output is the element that appears on the screen.
Let's take an example:
In the attached image, we're defining a component that takes the string 'Sumit Saurabh' as input and produces an h1 header with the string inside it as output.
In the attached image, we're defining a component that takes the string 'Sumit Saurabh' as input and produces an h1 header with the string inside it as output.
Now, since components are just Javascript functions, we can shorten them using arrow functions as in the attached image below:
We're using braces around 'props . name' as it is JSX and not plain HTML.
You can read more about JSX here:
We're using braces around 'props . name' as it is JSX and not plain HTML.
You can read more about JSX here:
Also, note that every component name must start with capital letter.
This is why the component above is called 'SayHi' and not 'sayHi'
Another point to note is that components are self-closing.
This means that we don't need to place a closing tag when calling them.
This is why the component above is called 'SayHi' and not 'sayHi'
Another point to note is that components are self-closing.
This means that we don't need to place a closing tag when calling them.
Take a look at this image below:
In this code sample, we're using two components: one greets 'Sumit' while the other greets 'Saurabh'
This way, we can reuse components without creating them from scratch every time it is needed.
In this code sample, we're using two components: one greets 'Sumit' while the other greets 'Saurabh'
This way, we can reuse components without creating them from scratch every time it is needed.
The example above may seem simplistic but imagine working on a full-stack e-commerce app.
In one app itself, there can be hundreds of buttons.
With react, we can create the button component once and customize it using props to get the desired button.
In one app itself, there can be hundreds of buttons.
With react, we can create the button component once and customize it using props to get the desired button.
We can customize what the button text says by using props and can attach different event handler functions to each component to customize functionality.
Lastly, note that I have used terms like 'calling a component' above. In the real world, we don't use those terms.
It was just there to help you draw parallels between a conventional Javascript function and a React component.
It was just there to help you draw parallels between a conventional Javascript function and a React component.
One last thing:
Since React prepares a virtual DOM tree, using several components to stitch together a UI further helps us understand how React updates only those nodes of the DOM which have changed.
Since React prepares a virtual DOM tree, using several components to stitch together a UI further helps us understand how React updates only those nodes of the DOM which have changed.
Think of it this way - There are two buttons and every time one button is clicked, we want the button text color to change.
To achieve this, only that button's node (or component) will change in the browser's DOM and not the entire UI (which would've happened without React).
To achieve this, only that button's node (or component) will change in the browser's DOM and not the entire UI (which would've happened without React).
Note that DOM nodes don't correspond directly to React components but thinking of it like that does help us visualise things better.
That's a wrap!
I write threads daily on web dev so if you enjoyed this thread, please:
✅ Follow me @sumitsaurabh927 for more of these.
❤️ Each like, every comment of y'all motivates me to come up with awesome new stuff!
I write threads daily on web dev so if you enjoyed this thread, please:
✅ Follow me @sumitsaurabh927 for more of these.
❤️ Each like, every comment of y'all motivates me to come up with awesome new stuff!
Loading suggestions...