Naming conventions for stateful components

I’m new to React and there’s a lot of new terms etc. I try to do things rights so I try to use your guidelines (thanks for that BTW). Let’s think about a card component. As far as I understand I should split elements in a stateful components and a stateless function. For instance I have a list of drugs (legal drugs, not silkroad V3.0 ^^), I want to display a list of Card so, doing my best to follow good patterns, I have a stateless function :

export default function Card(props) {
  return (
    <div className="drug-card card hoverable">
{/*Here goes my HTML*/}
    </div>
  );
}

Plus a component with all logic (subscribe to data, states etc.) whereas stateless function only cares about props it receives from the stateful component. Am I right ? Let’s assume than yes for now. Here’s my question : where should I put, or at least where do you put, the stateful components and the stateless function. In the same file, in the same folder, with different names for each files : Index.jsx for the stateless component and Container.jsx for the stateful component.

Is this a good pattern for example ?

I hope I didn’t irritate you with what’s is very probably noob questions but the React land is new for me.

[ljharb]

We currently use Aphrodite for CSS. https://github.com/airbnb/javascript/tree/master/css-in-javascript may be helpful here.

(I’m going to close this issue but feel free to keep discussing)

[ilan-schemoul]

Okay. Another unrelated question (sorry for polluting this thread) what do you use for css with react ? Inline css, modulus css or like me you have a less/sass file in the folder along with components ? Because I’ve been reading a lot of things about styling react components but your opinion, at Airbnb but especially yours, matters a lot for me and a lot of devs.