Creating the project structure

Ctrl + Alt + T will open the terminal, change the directory to the desired location, create a shopping cart app with the meteor CLI, and install all the required packages.

Copy the following commands serially to create the app and install the packages:

>> meteor create shopping_cart
>> npm install
>> npm install react --save
>> npm install react-dom --save
>> meteor add react-meteor-data
>> npm install --save react react-addons-pure-render-mixin

Starting from the client side, let's delete all the default folders and create the following files and folders:

How to structure your app is completely up to you. For quick prototypes, you can use the defaults and just add more into the directories or, if you have a favorite open source project and you like its setup, you can copy the design from it. However, in real life, how the app is architected can depend on many factors. Often, we work on a mixture of new and legacy code and sometimes even different frameworks into one big application. Personally, I always try to ensure that I can easily remove or add new components without touching other parts of the system; that is always a challenge:

The first step is to break down the app into core components.

This is a common way of splitting the components into two main categories in the app tree: a Container and Presentational components. The parent component App renders the container components that will render the presentational components.

The main idea of this splitting is that the containers are responsible for the data handling, and they are usually at the top level; each time changes in the data occur, they will pass the new data down to their children as props that will force React to re-render the new changes. React's philosophy is that we should keep in mind that the data should always flow from top to bottom in one direction: