DEV Community

Cover image for React Mindset: How New React Developers Should Think

React Mindset: How New React Developers Should Think

Amir H. Moayeri on September 16, 2024

React, a popular JavaScript library for building user interfaces, has revolutionized front-end development by enabling developers to create reusabl...
Collapse
 
mark_batham profile image
Mark Schlacter

Love how this article breaks down the essential mindset for new React developers. Thinking in components, embracing declarative programming, and understanding state and props are key to mastering React. A great guide for anyone starting out!

Collapse
 
ymir profile image
Amir H. Moayeri

Welcome to the community and thanks for reading Dear Mark 👍

Collapse
 
billhannah profile image
Bill Hannah

Nice introduction, but puts an emphasis on prop drilling and local state, and doesn't mention context at all. In your example, you have the logged-in status as local state, which it would never be. That would be determined by a context provider in the app component so you don't need to pass this value as a prop to every component in the tree

Collapse
 
aaronre16397861 profile image
Aaron Reese

True, but it is an article for beginners. Context or State stores are a more advanced concept and getting your head around useEffect is hard enough for newbies.
Maybe a couple of lines about separating Application state (dark theme, is logged in, side menu open etc) from Data state (list of items, form contents failed validation l, data submission pending) would help.

Collapse
 
respect17 profile image
Kudzai Murimi • Edited

Yes, you're right Aaron!

Collapse
 
godwinkachi profile image
Godwin 'Kachi

Moments ago, I read from this platform how complex React had made a simple workflow.

And now, I read about approaches to take to get the best out of React.

Isn't Life beautiful 😍?

It's just feel like react is a two edged sword 🗡️ ah

Collapse
 
kennielarkson profile image
LAWAL ABDULRAFIU KEHINDE

Without a doubt, the mindset is a major determinant whether you’ll write a good React code or not. Thinking in components leads the pack just as you have mentioned. As much as possible break down repetitive features into independent component and employ props to customize for different scenarios.
This is an amazing article.

Collapse
 
floony7 profile image
Fred Lunjevich

This is a great summation of the mindset needed to be a competent React Dev.

What is becoming more important now, is the ability to know how to think in server and client components and composing UI this way.

This is an added layer of complexity that brings with it the need for careful thought about how state is managed (e.g. using query params instead of local state) and the flow of data. I guess that's an entirely different article!

Collapse
 
abi0l9 profile image
Monsur Oyedeji

This is a very concise and significant article. These are very essential in the journey of a React Developer. And, these aren't applicable to only new developers but existing ones, as well, who aren't following the conventional way.
Thanks for the article.

Collapse
 
therrou profile image
Tomas Herrou

Would be nice (but maybe a hassle at the same time) to talk a bit more about React Server Components, server actions and all the new-releases coming in React 19. The industry is going in the direction of involving the server and the sooner the better to address those different mental models.

Collapse
 
brense profile image
Rense Bakker

Modern React developers should drop the distinction between state and props. Every piece of data in your app is state. Props is just short for properties that we all know from basic javascript functions (React components are just javascript functions). Props are used to pass state down to child components. React developers should think about data flow in this regard, particularly which components should manage the data and how far it should flow down the tree. Btw uni-directional data flow is just theory of how react works when rendering. In practice there are several ways to pass state up the component tree, for example using React context.

Collapse
 
huzaifa_uddin_f64d7ea443e profile image
huzaifa uddin

Love how this article breaks down the essential mindset for new React developers.I work in a react native app development company in uae and personally Thinking in components, embracing declarative programming, and understanding state and props are key to mastering React.

Collapse
 
j_xvw_a057242433886efa1c7 profile image
J XVW

I'm tired of using React JS if the application is too big when I run it and the compilation process takes a long time, besides the complexity of the code which makes my head spin, especially if I want to change the code, there are no more dependency problems which are often depreciated, I throw away React JS so I use C# .Net which is easier.

Collapse
 
abi0l9 profile image
Monsur Oyedeji

Yeah, use Vite and enjoy life.

Collapse
 
abrahamn profile image
Abraham

Try React with Vite, the compilation is lightning fast

Collapse
 
elsyng profile image
Ellis

Very good article :)

-- The points 1-5 are really good, and a React developer needs to: become aware of them. Many developers are not.

-- Then 6-7 are just basics/fundamentals which are not optional, one cannot "not use" them for any real React programming. They kinda dilute this post, imho ;o)

Collapse
 
isa_ahamed_san profile image
Isa Ahamed San

Though Many beginner wont understand these concept but 1.Think in Components can be understand by every beginner. I want to mention about 1 little thing about this section. Think SVG as a component too if you are using RAW SVG file. Pretty sure most of the beginner wont even think of it.

Collapse
 
damian_cyrus profile image
Damian Cyrus • Edited

8 → 1. 😄
This is also an important mindset, as you already know what the result should be, so write it down and then develop it until the expected result is shown.

Collapse
 
muhammadahsanmirza profile image
Muhammad Ahsan

A comprehensive overview
I was looking for articles like this for a long time but I hardly found so detailed guide

Collapse
 
lakshmanan_krishnan_5ffbd profile image
Lakshmanan Krishnan

Good Read.

Collapse
 
styylz profile image
styylz

Composition Over Inheritance
Can you please explain more clearly, where is inheritance used in function components as you're using function approach to explain declarative approach

Collapse
 
77pintu profile image
77pintu

Thanks for the great post!!!

Collapse
 
ashwinv profile image
Ashwin V

Thank you

Collapse
 
obinna_cfba2283268b69bf0d profile image
Obinna

Awesome article🚀.
How would you advice a developer on the topic of testing. Whether it's end-to-end testing or writing unit tests

Collapse
 
kelvinmacharia254 profile image
Kelvin Macharia

A very good piece. Just getting the hang of React, this resource goes a long way to help me understand basic React principle

Collapse
 
hviana profile image
Henrique Emanoel Viana

Hello.
Check out this Full-Stack React framework for Deno. It's really cool:
faster_react

Collapse
 
hviana profile image
Henrique Emanoel Viana

Well organized framework.

Collapse
 
edo90 profile image
Edward Colón

nice article

Collapse
 
samji3877 profile image
Samuel Benson

perfect thank you

Collapse
 
devendra_singh_a7317db5e3 profile image
Devendra Singh

Well written article. I really liked how to part. Terminologies are commonly known but approach is important.

Collapse
 
mayank-sanket profile image
Mayank

insightful article!

Collapse
 
maaltech profile image
MKXinrare

Thanks for the article. I especially enjoyed the flow of the content.

Collapse
 
marinostbh profile image
Mohamed Amine Terbah

Here is a Love react for your React post.

Collapse
 
respect17 profile image
Kudzai Murimi

Well documented article, keep sharing with the community

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

I mostly use Nextjs for my projects because it's far easier to work there. Most of these ones could be for any framework imo.

Collapse
 
aloisseckar profile image
Alois Sečkár

New React devs should flee while they still can, embrace Vue.js and see that everything is equal or better with it.

Collapse
 
blessedtechie profile image
Blessing Emejulu

Perfect summary for React course that I took in one month

Collapse
 
sam4rano profile image
Oyerinde Samuel

Nice read

Collapse
 
ashutosh856 profile image
Ashutosh

Currently learning React, needed a brief explanation of what is going on, where to start from. This helped me a lot. Thanks

Collapse
 
kashif_ullah_dev profile image
Kashif Ullah

appreciated

Collapse
 
abosigodwin profile image
Abosi Godwin

A straight to the point article.

I recommend following this guideline to any new React developer.

Collapse
 
jahid2121 profile image
Jahid2121

I wish I had these advice when I started, short and right to the point, Thanks brother,

Collapse
 
denny_wright_b202f3da1886 profile image
Denny Wright

Great summary!

Collapse
 
wilfred05777 profile image
Wilfred Erdo

Its a refresher to read this kind of article

Collapse
 
kc900201 profile image
KC

How would you tackle coupling vs cohesion problem in React?
Components can be break down but if we overuse, there might disrupt the cohesion level of the code

Collapse
 
nerdcules profile image
SoonA Ryan

I've primarily been a BE developer and delving into FE with React 18 (only now). This has been the most clear and consise explanation I have come across.

Many thanks.

Collapse
 
devkojo profile image
Enoch Boison

It all makes sense now that I have some experience, it took me almost a year to transition from vanilla javascript to react. Nice piece!

Collapse
 
majortomoo profile image
Tomasz Bernat

I like how this article can be used as guidelines when learning react and help keep focus on important stuff. Thanks a lot for this one!

Collapse
 
chandra_pantachhetri profile image
Chandra Panta Chhetri

Nice overview of the most important concepts beginners should know!

Collapse
 
rrahul profile image
Rahul Chauhan

great

Collapse
 
julius_this_juliusraza profile image
Julius “THIS_JULIUS” Razanauskas

Big fan of testing when components are following the SRP, just better code overall :)

Collapse
 
flukeyzx profile image
Abdul Ahad

Wow! great material now I can reference this to my junior students.

Collapse
 
zava profile image
Egbaunu precious

I love this article!