Skip to content

Instantly share code, notes, and snippets.

@EduardoLopes
Last active September 10, 2020 01:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EduardoLopes/aa6763854c8d16f2244b9f73433264ce to your computer and use it in GitHub Desktop.
Save EduardoLopes/aa6763854c8d16f2244b9f73433264ce to your computer and use it in GitHub Desktop.
Even though i already know React, i'm watching a course about it on Udemy.

React Course

Even though i already know React, i'm watching a course about it on Udemy. The course talks about Hooks, but it's mainly created around class components, and talks a lot about the deprecated lifecycle methods. I was kinda aware of that, it's not a complaint.

I'm writing this to list the things i like and things i don't like about some conventions people follow when making react apps.

I'll be updating this as i'm advancing in the course.

I like

I like the idea of container components. Containers are components are stateful, have some logic or mutate data, but i see it being usefull for big applications, most apps have only one container (the app).

I was watching a video about the spotify agile strategies, and i see this being usefull there.

I don't like

This is mainly about file structure. When you have a components folder like this:

components
└───Person    
    Person.js
    Person.css

you will need to import like this: import Person from '@components/Person/Person; It's a lot of Person every where.

Have every thing inside folders seems so good:

components
└───Person    
    index.js
    style.css

and import it like this: import Person from '@components/Person;. But it's harder to search/edit various components at the same time, because it's file names are the same. There's the nesting problem too.

From now on, i'll be using this aproch:

components/
    Person.js
    Person.css
    Person.test.js
    Feed.js
    Feed.css
    Feed.test.js

No nesting, no one hundred folders, i should have followed the react docs from the start.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment