In a previous post that is Part-1, I have discussed some important concepts of React js.
In this post, we’ll discuss some other important concepts of React js.
List of things that we’ll discuss in this post.
- Presentational Vs Container
What are Components?
when we start learning React we hear this term often but what exactly is components?
Well, components are the building blocks of your application.it could be anything for example
sidebar of your application or
navbar of your application.
In the above picture, you can see there is one
parent component which contains two other components that is
sidebar components also contains 2 more components those are
about and ‘links`. and rest you can see yourself.
the takeaway is when you planning your application always try to plan your application considering
components. because that’s how you can build large applications.
Note: Facebook like the giant company has around 50k components of React.
What is State?
The state is nothing but a set of properties or object which belongs to a particular component. whenever the state changes the component re-renders.
For example: let say you are making authentication and authorization system. you want some part of your application only accessible by an authenticated user. so, you need to keep track of user is authenticated or not.
In the above example, you can see we have used
isAuth state to render the Dashboard component. if it is true we render
the takeaway is
state is your component manager which decides how and when a component will render.
The prop is how Components get their properties. Starting from the top component, every child component gets its props from the parent.
for example: let say you want to render a list of blog posts in your application for that you required dynamic data for every post. so, here you will pass down the props(properties to the single blog component).
The takeaway is props are useful when you want to pass information to the child components.
what is Presentational and Container Components?
In React components are often divided into 2 Types: presentational components and container components.
Each of those has their unique characteristics.
Presentational components are mostly used for generating some markup. They don’t manage any kind of state.
Container components are mostly concerned with the "backend" operations. They might handle the state of various sub-components. They might wrap several presentational components.
As a way to simplify the distinction, we can say presentational components are concerned with the look, container components are concerned with making things work.
As we know In react component we can only return one element at a time for that we always use
<div> tag to wrap other elements.
but every time when we wrap elements inside
<div> tag we are just creating another node in DOM and it is not efficient.
for this react developer come up with
React Fragments which overcome this problem.
to wrap elements we use Fragments. that is
These are the Some other important concepts of React js. if I have missed some concepts let me know in the comments.
if you like my post then Buy me a coffee.