DEV Community

Cover image for What a React developer needs to know in 2021

What a React developer needs to know in 2021

Matvey Romanov on March 18, 2021

Knowledge of JavaScript React is built on the basis of JavaScript. First of all, people who want to learn React need to understand how w...
Collapse
 
rangercoder99 profile image
RangerCoder99

So same thing they needed to know in 2020, ok awesome! πŸ˜€

Collapse
 
dastasoft profile image
dastasoft

I would add as optional but highly recommended, knowing the principles of Clean Code and some understanding of how to apply a correct architecture to your project, in front-end we tend to hardcode more things like putting routes or literals directly in place instead of doing enums.

React is also about being clean and tidy :)

Collapse
 
thabo78828856 profile image
Thabo Moate

ok

Collapse
 
yitzhakbloy profile image
yitzhak-bloy • Edited

Good read!
I just wanted to remark, having the React Context, the need for a state management library has significantly diminished in many cases.

Collapse
 
frontendengineer profile image
Let's Code • Edited

specially the useReducer hook

Collapse
 
julians300 profile image
Julian Salas

Yep, Context with useReducer will work for 90% of apps.

Collapse
 
tomavelev profile image
Toma • Edited

Few more things may be included to be 2020:
Not a word about architecting stuff to be app-like: offline-first mobile business work approach, pwa and eventual transition to RN, not Cordova/PhoneGap - if a native app is required.

Haven’t heard a word from Facebook about migrating the engine to WebAssembly.

All the design patterns and dependencies over addition in JavaScript is making the web bigger and bigger and slower. In production, sometimes the apps may be fast and optimized, but - How big is your node _modules?

Collapse
 
rangercoder99 profile image
RangerCoder99

96% of Node modules folder files are never use in production or development even there is so much junk in that folder, packages downloading their complete git history and 100s of files while you may need one 1 or 2 JavaScript files from it!

Collapse
 
starpebble profile image
starpebble

WebAssembly looks cool. There hasn't been much explanation about this silence you mention.

Collapse
 
pcockerell profile image
Peter Cockerell

One of the reasons your class-based component was more complex than the functional one was that you unnecessarily used the function-argument form of setState(). You could have just used

onIncrement = () => this.setState(
{counter: this.state.counter + 1}
);

instead.

Collapse
 
virtualghostmck profile image
virtualghostmck

This could be buggy in some cases.

Collapse
 
pcockerell profile image
Peter Cockerell

How so?

Thread Thread
 
vberen profile image
Nicklas Wessel

Because of the async nature.
If you spam the button it might only increment it by one, since the state at that point at the second click isn't updated yet.

Thread Thread
 
pcockerell profile image
Peter Cockerell

Ah, got it, thanks!

Collapse
 
frontendengineer profile image
Let's Code • Edited

Great post Matvey! Javascript is definitely a pre-requisite for learning React. One may struggle without jess fundamental js knowledge.

React Hooks are a powerful addition to functional components. No need to refactor functional components now in order to use lifecycle and state.

I find myself guilty of just jumping ReactJS when I first saw it, got too excited. Need to be better here. LOL πŸ˜…

I want to share this video as a supplement to this post, uploaded today-

Collapse
 
hyggedev profile image
Chris Hansen

Great article! I'ma take another look at MobX. I haven't used that in a year at least! I remember it being super Intuitive and easy to use.

Collapse
 
_perceptionbox_ profile image
PerceptionBox

Good read!

Collapse
 
aalphaindia profile image
Pawan Pawar

Interesting thanks

Collapse
 
ra1nbow1 profile image
Matvey Romanov

You’re welcome

Collapse
 
xavierbrinonecs profile image
Xavier Brinon

I'm using redux toolkit as my go to State Library but XState is going strong for state management as well. Definitely worth having a look.

Collapse
 
aalphaindia profile image
Pawan Pawar

Good read!

Collapse
 
frontendengineer profile image
Let's Code

JS is definitely important to understand and know prior to learning React.

Arrow Function, map, filter, reduce and etc will help an engineer/developer code in reactjs.

Collapse
 
jessebeke profile image
jesse beke

Nice list πŸ‘πŸ‘

Collapse
 
thereis profile image
Lucas Reis

It's important to mention about react context, it helps to behave as a state manager. And also is very interesting to mention their study about React Server components.

Collapse
 
rushannotofficial profile image
Rushan S J

Wow, this is a great article. All React devs should know this stuff even in 2022

Collapse
 
disgustingdev profile image
disgusting-dev

That feeling when you jumped to the Vue project one year ago and now like: "Redux Toolkit? Effector? New approaches again?". Kinda constant vibe of learning something new