Difference between Component and Feature (React)

Hello everyone,

i’m wondering what the difference between a Component and a Feature is. When do i have to use which?

Through the react and redux lessons, i learned to create folders named “features” and “components”. In features, there will be the slices created. But sometimes also the components. In the flashcard project, they’re even mixed. So i’m confused now…

Can someone explain me the exact difference between features and components?

Thanks all :grinning:

Hey @sebscher!
this post caught me off guard as I finished the React course and not once was mentioned some special method or element called “Feature” specific to React. :fearful:
(anxious sweating)

Could you share more where you learnt about “features”? Also what do you mean by “slices”? Is it possible that creating different folders was just about organization rather than a React-specific attribute?

As per Components you use them when you need to render something.

Every Component must always render something, thus every time a new Component is created the render method must be included

Components can be defined as JS classes (Class Components) or JS functions (Function Components) they do the same but changes the syntax.

There’s a design pattern to divided Components in smaller units called Presentational and Functional Components when they are becoming too complex (they have too many features).

A component is a small, reusable chunk of code that is responsible for one job

Presentational Components will have the sole objective to render HTML/JSX.
Functional Components (also Containers) will have the objective to manage the logic, states etc (the functional part).

Hope this helps :slight_smile:

“Features” are part of React Redux Flashcards project. So it might be a part of Redux.

I agree with you, in React course i learned about stateful and stateless components. The folder structure made sense too.

But when i finished the Redux course, the folder structure there is like above mensioned different and theres no explanation about it.

alright, I haven’t followed the Redux course so I cannot help, cheers! :slight_smile: