React 6 Tips

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 13

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
More from Better Programming

10 Unforgivable Phrases Developers Should Stop


Saying at Interviews
Isabel Nyo in Better Programming
Jan 25 · 7 min read
1.3K
More from Better Programming

My Everyday Struggles as a Senior Developer


Gerard van der Put in Better Programming
Jan 28 · 6 min read
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

You might also like