Hi Luiza, those are some great tips, thank you for this post!

Just one thing though. I would advise against the use of boolean && over the ternary operator. Here's a cautionary tale: kentcdodds.com/blog/use-ternaries-rather-than-and…

TL;DR is that the operator && might evaluate to the first value whereas the ternary will only evaluate to the explicit expressions you type in second and third positions. While the code is new and short it's clear to see, but once enough time has past and enough keyboards have touched it things get messier and bugs like these creep in.

Have a great day! ☺️

Great post! I liked specially the parts about how to organize imports (I already kind of did that but had no formal rule for this, I just absorbed it from what I had seem before), and the one about one-conditional rendering. It's great because ternary conditional expressions can look so damn ugly inside JSX code. I'm definitely using this in the future!

By the way, it's not always that we see an article by a fellow Brazilian having so much traction inside the developer community! Great job! I'm looking forward for your next posts!

Amazing one Luísa Ribeiro Bezerra Totally loved it. ❤️ Just one question where can I find this eslint-plugin-import plugin? I checked in extensions of VS Code it was not there.

The part about destructuring props is not completely correct. The second example shows:

const { name, age, phone } = props.user;

while the third example shows:

const UserCard = ({ name, age, phone })=> {

It should read instead:

const UserCard = ({ user })=> {

and be used as user.name or user.age, or even better:

const UserCard = ({ user: { name, age, phone } })=> {

and be used simply with name or age.

Other than that, good article. Thanks! :)

Thank's for the article ! I juste have a little comment about this part :

const UserCard = ({ name, age, phone })=> {

On your previous examples, those props (name, age, phone) are children of props.user, not props directly.

But it's quite nothing !

I'm a big fan of Vue.js, even being a contributor to some projects in its ecosystem, but for the past 8~9 months I've been working with React and even though I like many parts of Vue better, I think React is a powerful tool and the way components are handled is pretty neat.
But if you're learning/working with React, I can't recommend Typescript enough.
I was super scared of Typescript at first, always looked at it like "ugh" but once I started actually working with it, it just makes development so much better. It feels more professional, you get type safety in your components and nice DX powered by autocomplete in VSCode or other IDEs, for component props for example.
So, learn React, make your code clean with the tips here but as soon as you can, try and add Typescript to your skillset. It will change your life.

A clean code based on a clean post :)

Love the tips!!! I feel like my scripts will smell like lavender now!