React 6 Tips

Upgrade
New! Select "Design your profile" in the menu to create a personalized space.
Got it
 ARCHIVE
 WRITE FOR US
 STYLE GUIDE
 ABOUT
 VISIT OUR JOB BOARD
Responses (8)
Luisgoyburo
What are your thoughts?
Cancel
Respond
Anisuzzaman Babla
3 days ago (edited)
Good read. But I didn't understand which 6 libraries you wish to start using earlier.
28
1 reply
Reply
Bryan Martin
about 15 hours ago (edited)
Until I discovered Formik and react-hook-form

Formik is pretty awesome. I haven't used react-hook-form. I'll have to take a look.
12
Reply
Bryan Martin
about 15 hours ago
which helped me to reduce conditional styling in my components by a lot

Conditional styling should be avoided regardless if you are using style-components are not. Use state
selector or psuedo-selectors in your css rules that target the desired state of your HTML instead.
8
1 reply
Reply
Ammar Sayed
1 day ago
great article but would you pls write the 6 libraries at the end of articles to be gathered in one place thanx
:)
6
1 reply
Reply
Josue Cedeno
about 23 hours ago
Great article!
2
1 reply
Reply
Gregor
about 3 hours ago
Mixing HTML, JS and CSS all together? Ew.

3
1 reply
Reply
Daniel Burger
32 minutes ago
Just start writing tests as much (and as early) as possible.

Wise words… Trust me! In the long run, this will save you hours if not even days of your precious
lifetime.
1 reply
Reply
Szymon Owczarek
about 15 hours ago
Great read, especially for a starting react dev!

1 reply
Reply
You have 2 free member-only stories left this month.
Upgrade for unlimited access.
6 Regrets I Have As a React

Developer
Things I wish I did earlier
Mohammad Faisal
Follow
Feb 1 · 3 min read
Photo by Francisco Gonzalez on Unsplash
React is a great tool to learn. It allows us to do things in our

own way. It's both powerful and limiting at the same time.
For new developers, there’s no clear guideline on which tool is

best for which use case, and as a result there are multiple
solutions to every problem. And sure enough, I also fell into
this mistake and was late to adopt some best practices.
Today I am sharing the top 6 things that I should have started

doing earlier in my React development journey.
1. Testing
For a long time testing was my weakness. I didn’t write tests
for my components and, as expected, often I had to debug
typos.
But as daunting as it may look, testing in React is really easy

(For most use-cases).
Adding a very basic test that takes two minutes to write can
save hours in the long run. Here’s a test that checks if
the Title component will render correctly:
it('checks if the title component is in the document', () => {
expect(screen.getByText('Title')).toBeInTheDocument()
})
If you are using create-react-app you already have the testing
setup in place. Just start writing tests as much (and as early) as
possible.
2. Using the Correct Folder Structure

I think as a beginner in React my biggest mistake was not
using the correct folder structure. Essentially what I did was
group files according to their type:
|-store |--actions
|---UserAction.js
|---ProductAction.js
|---OrderAction.js |--reducers
|---UserReducer.js
|---ProductReducer.js
|---OrderReducer.js
But as the project grew bigger it was getting tougher to find

any file.
So finally I started to organize my files by feature. That means

all the similar files are now put in the same folder:
|-store |--user
|---UserAction.js
|---UserReducer.js |--product
|---ProductAction.js
|---ProductReducer.js |--order
|---OrderAction.js
|---OrderReducer.js
Now it’s much easier for me to navigate through the file system
to find anything.
3. Using Styled Components

I started using css files at the beginning to style my
components but as time went on it got really messy.
After some time I learned sass and it was great! But although it
provided some syntactic sugar over vanilla css it was really
hard to style any component. Reusing any style was especially
hard as I often forgot that a particular style was already there.
Also, personally, I don’t like using className property inside JSX.
After some time I found a library called styled-components which

rescued for me. Now I just declare my styles as separate
components and my code is more clean and easy to the eye.
Also styled-components accepts props, which helped me to reduce

conditional styling in my components by a lot!
4. Switching to Functional Components Early

In the beginning, I was introduced to React through class-
components and for around a year I only worked with class
components.
After I switched to functional components their enormous

benefits became clear. I think react-hooks is the single best thing
that’s happened since React has been in the picture.
There are very few reasons that anyone in 2021 would try to
use class-based components.
Now I’m trying to rewrite all my components to functional

components.
5. Using a Form Handling Library

The handling form is maybe one of the most common features
of any application. I used the vanilla onChange method for a good
amount of time. Handling data and validation was big pain!
Until I discovered Formik and react-hook-form.
Using these two libraries, form handling has become so much

easier and cleaner. On top of that, form validation is now
declarative and easy for me.
6. Using a Linter and Formatter

For a long time formatting my code manually was a great
hassle. I like my code tidy and clean so every time I needed to:
 Remove an unused variable
 Remove an unused function
 Remove unused imports
 Use proper indentation

I had to do it manually. Until I came across Eslint and Prettier —
two libraries that make the painful work of formatting easy!
So, those are the top 6 libraries I wish I started using earlier in
my career. What about you?
Have a nice day!
Related Libraries:
Testing: react-testing-library, jest

Styling: styled-components
Form: react-hook-form
Tools: EsLint and Prettier
Better Programming
Advice for programmers.

Follow
354
Sign up for The Best of Better Programming

By Better Programming
A weekly newsletter sent every Friday with the best articles we published that week. Code
tutorials, advice, career opportunities, and more! Take a look
Get this newsletter
Emails will be sent to [email protected].
Not you?
Thanks to Anupam Chugh.
 Programming
 JavaScript
 React
 Web Development
 Angular
354 claps
8 responses
WRITTEN BY
Mohammad Faisal
Follow
Passionate about Clean code and SOLID Architecture
Better Programming
Follow
Advice for programmers.
More From Medium

More from Better Programming
Why I Still Lisp (and You Should Too)

Anurag Mendhekar in Better Programming
Jan 30 · 16 min read
633
10 Unforgivable Phrases Developers Should Stop

Saying at Interviews
Isabel Nyo in Better Programming
1.3K
My Everyday Struggles as a Senior Developer

Gerard van der Put in Better Programming
956
Learn more.
Medium is an open platform where 170 million readers come to find insightful and dynamic thinking.
Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the
surface. Learn more
Make Medium yours.

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage
and in your inbox. Explore
Share your thinking.

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and
free to post your thinking on any topic. Write on Medium
About
Help
Legal

React 6 Tips

Uploaded by

Copyright:

Available Formats

React 6 Tips

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React 6 Tips

Uploaded by

Copyright:

Available Formats

Upgrade

 VISIT OUR JOB BOARD

3 days ago (edited)

about 15 hours ago (edited)

Until I discovered Formik and react-hook-form

about 15 hours ago

which helped me to reduce conditional styling in my components by a lot

about 3 hours ago

Mixing HTML, JS and CSS all together? Ew.

Just start writing tests as much (and as early) as possible.

about 15 hours ago

Great read, especially for a starting react dev!

6 Regrets I Have As a React

React is a great tool to learn. It allows us to do things in our

For new developers, there’s no clear guideline on which tool is

Today I am sharing the top 6 things that I should have started

But as daunting as it may look, testing in React is really easy

2. Using the Correct Folder Structure

But as the project grew bigger it was getting tougher to find

So finally I started to organize my files by feature. That means

3. Using Styled Components

Also, personally, I don’t like using className property inside JSX.

After some time I found a library called styled-components which

Also styled-components accepts props, which helped me to reduce

4. Switching to Functional Components Early

After I switched to functional components their enormous

Now I’m trying to rewrite all my components to functional

5. Using a Form Handling Library

Until I discovered Formik and react-hook-form.

Using these two libraries, form handling has become so much

6. Using a Linter and Formatter

 Remove an unused variable

 Remove an unused function

 Remove unused imports

 Use proper indentation

Have a nice day!

Testing: react-testing-library, jest

Advice for programmers.

Sign up for The Best of Better Programming

More From Medium

Why I Still Lisp (and You Should Too)

10 Unforgivable Phrases Developers Should Stop

My Everyday Struggles as a Senior Developer

Make Medium yours.

Share your thinking.

You might also like