What's exactly the purpose of Components, Layouts and Pages folders in a Meteor-React project?

Question

I'm starting a new project with Meteor and I would like to use the --full architecture when creating the project: meteor create myApp --full

However, I don't really understand the purpose and differences of some folders in imports/ui/ :

• components
• layouts
• pages

Especially the difference between layouts and pages. What type of code should they contain ?

Answer 1

It actually becomes clear as soon as you try to master React. However, its also very valuable to understand it in regards to Blaze.

Components These are react components or blaze templates that are self-contained. This means that they are not bounded to anything else in the application. Meteor describes 2 types of components: Reusable and Smart. Reusable components are generic, reusable and don't contain any business logic. They receive their data via parent components.

Smart components typically don't contain too much UI related logics, but simply act as a layer between the data and the reusable components. These smart components contain business logic and push data to reusable components.

Layouts Literally just layouts. The structure of your app's user interface is a layout. It should not contain any logics. Layouts contain mostly references to react smart components that in their turn load reusable components.

Pages Same as layouts, but on a page level. Each page contains a layout and references components.

A better explanation can be found here: https://guide.meteor.com/ui-ux.html