How do you usually split components into files in ReactJs?

Question

JavaScript

Started learning ReactJs.
Created a small application, there was a problem that there is too much code in App.jsx. It is logical to break this whole thing into files, of course, the problem is that I did not find a proper example on the Internet.
Logically, I can concatenate jsx files with gulp, but is this correct or is there another common solution?
I use webpack and gulp.

Answer 1

Well, what's the problem? Get a components folder, break your application into logical blocks, for example
App -> Header + Content + Footer
Accordingly, there will be the following structure
-components
--header
---index.js
---header.css
--content
-- -index.js
---content.css
It's also important to distinguish between smart and dumb components: "dumb and smart components" you can search the web for that.
Regarding the assembly - if you are using webpack, then gulp is not needed for merging files - webpack should do this, and also if you are using babel for broadcasting, then the jsx format can be removed and left as just js.

Answer 2

I’ll add to the above that it’s convenient to break components into containers, google it - reactjs container components.

Answer 3

If at the stage of study, then it is easier to use what Facebook itself recommends
https://facebook.github.io/react/docs/installation...
No need to bother with webpacks, babels, etc.