DEV Community

Cover image for Every React Concept Explained in 5 Minutes

Every React Concept Explained in 5 Minutes

Jitendra Choudhary on July 29, 2024

React is a JavaScript library that allows you to develop front-end code in minutes. It has pre-built methods and functions to perform certain tasks...
Collapse
 
poetro profile image
Peter Galiba

Fragments can have keys.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Your are absolutely right,

I appreciate you bringing this up.

Collapse
 
sharypovandrey profile image
Andrey Sharypov

Is there some feeling of the GPT generation? 😁

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

You decide and let me know.😇 For real

Collapse
 
velumurugesan profile image
velu-murugesan • Edited

I have some knowledge in react and node how can I get a entry level job as a fresher

Thread Thread
 
jitendrachoudhary profile image
Jitendra Choudhary

Let's be honest, it's impossible to guarantee a job.

To maximize the chances of getting a job, you can:

Gain practical experience by building projects; you can checkout @bigsondev blog on webdev.

Try Open Source

Intern at a local tech company.

Reach out to potential employers.

Engage in extensive networking to connect with as many people as possible for job opportunities.

Collapse
 
chuksjoe profile image
Chukwunonso Orjiakor

Interesting article for beginners. Well done Jitendra.

Quick note: A Functional component is only referred to as stateless, if it is not managing any state value, and is relying on Props value for it's dynamic data.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary • Edited

Thanks for your correction & kind words.

I have updated the post.

Collapse
 
sushantj97 profile image
Sushant Jarial • Edited

Isn't state should be defined in lowest common ancestor instead of top level component. If we define state at top level component then when the state changes every component rerenders. But we define it lowest component then only where the component where the state is used get rerenders.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Naah, Passing data is one way in React (from high to low level). In order to avoid unnecessary renders, React has Redux, Zustand. This state management libs directly passes the state to the required component hence improving performance.

Also, there a thing "lifting up the state", we lift the state to common ancestor so that it can be passed to its child easily.

Collapse
 
khatriafaz profile image
Afaz Khatri

Great article.

I find the content on the useContext example to be inaccurate. Can you please update it?

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thanks for pointing out the inaccuracy in the useContext example.

I have updated the explanation and corrected the errors in the code snippet.

Collapse
 
justin3go profile image
Justin3go

Thank you, for someone like me who doesn't use React often, I reviewed a lot of knowledge

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thank you for your love. I hope I am fulfilling my goal of technical writing.

Collapse
 
rowleks profile image
Rowland

Very nice and succinct. It captures the fundamental concepts in using react. One thing I'll suggest is the implementation of react router v6

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Hi Rowland, I'm glad you found the article helpful.

I didn't include the React Router v6 features because I felt it would be beyond the scope of the article. However, I did mention , which enables client-side rendering. I'll do my best to include react-router v6

Collapse
 
diuk profile image
RoyLizhiyu

nice recap

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thanks for reading

Collapse
 
austinosaz profile image
Omozemoje Augustine Oisasoje

This is an in depth Technical blog

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Hope, You found this useful.

Collapse
 
xiaowo profile image
harry li

it‘s useful but it's not very deep

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

I think that's the most one can get out of 5 minutes.

I'm glad you found this helpful!!

Collapse
 
its_kundan profile image
Kundan Kumar

Nice

Collapse
 
joaozitopolo profile image
Joao Polo

Awesome. Clear. Fast. Congrats!

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Glad you find this explanation helpful

Collapse
 
shravan_gt_ profile image
Shravan G.T

Next do for angular pls

Collapse
 
joaozitopolo profile image
Joao Polo

for angular it's required 5^5 minutes

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

true, lol

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

sshhh. It's in the queue.

Collapse
 
leonardo_beron_1b53aec648 profile image
Leonardo Beron

Thanks guy.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary • Edited

Thanks for reading

Collapse
 
chovy profile image
chovy

This is awesome. I wish you'd write one for react native.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thanks you so much!!

A React Native article sounds like a great idea-- l''ll definitely try my best to write.

Collapse
 
efochristian profile image
Zigah Christian

This is simple and awesome, Big thanks for the Effort.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Big thanks for taking the time to read it and for the kind words

Collapse
 
whattheportal profile image
WTP | WhatThePortal.com

Do add TSX as the primary variant to JSX - don't want new folks going down that path unnecessarily!

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary • Edited

Thanks for the suggestion; it improves the content of the article.

I have updated the article.

Collapse
 
vilmos_bartalis_7242c8d44 profile image
Vilmos Bartalis • Edited

Thanks for the intro. That was easy to digest from the pov of a angular/astro dev.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

I'm happy to hear you found it easy to understand. Thank you for bringing a smile to my face.

Collapse
 
chandan_e69c011b258e09242 profile image
Chandan

Nicely Explained 👏🏻👍🏻

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

It made my day. Thanks for the read.

Collapse
 
srjsdev profile image
Steven Olsen

Review the notes for hooks, they aren't accurate.

Thanks for the article!

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thanks, Steven, for your feedback. Can you be more specific about the inaccuracy?

I would love to correct any errors and update the article accordingly.

Collapse
 
boldnight153 profile image
Matthew McKinney

A bit more than 5 min but a good read regardless.

Thank you for sharing.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

I'm glad you found the article worth the read, even though it took a bit more than 5 minutes.

LOL!! It's a 5-minute article but due to the intro, conclusion, and code snippet, it took longer.

Collapse
 
hasan_farook_e9e8c6f79084 profile image
Hasan Farook

This is awesome. Thanks

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thank you for your kind words!

Collapse
 
nikhil2004 profile image
nikhilprajapati1080@gmail.com

React portal?

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Yes, I missed out on Virtual DOM, Portal, and a few more concepts.

Collapse
 
sadaqat_ali_5b8f003418703 profile image
Sadaqat Ali

Good information

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thank you for the read!!

Collapse
 
anand259 profile image
Anand259

I appreciate your post. Please also explain hooks in detail like useState, useEffect, useRef, useCallback, etc.

Collapse
 
shoeb_uddin944 profile image
Syed Shoebuddin

great article

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thanks for reading

Collapse
 
alioune_tour_fc27105ebe2 profile image
Alioune Touré

Thank you for your article.
I started learning react recently and you helped me understand some things better.

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Glad you found this helpful.

Thank you for letting me know

Collapse
 
theobuh profile image
obuhdaniel

Your Explanation of Context API is simple and understandable

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Thank you for reading the article

Collapse
 
muhammad_irshad_1229229a1 profile image
Muhammad Irshad

Thunk you am new hear please guide me how to Best liptop use for apple MacBook pro for web development and web design also use for software Engineer please guide me