Some Important Concepts of React Js (part-2)

react js vision secrets

Table of Contents

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.

  • Components
  • State
  • Props
  • Presentational Vs Container
  • Fragment

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.

Alt Text

In the above picture, you can see there is one parent component which contains two other components that is main and sidebar.

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.

Alt Text

In the above example, you can see we have used isAuth state to render the Dashboard component. if it is true we render Dashboard otherwise null.

the takeaway is state is your component manager which decides how and when a component will render.

Props

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).

Alt Text

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.

Fragments

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 <Fragment></Fragment> or <> </>.

Alt Text

Conclusion

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.

1 thought on “Some Important Concepts of React Js (part-2)”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top