We are going to have a basic setup of our directories, npm modules.
But first before anything lets create our react-app, if your do not have create-react-app, nodemon, npm, nvm, or node. Install them globally here are a couple of links for all of them.
Install Node and Npm, with just installing node.
OPTIONAL: Can also install yarn for faster downloads of npm modules.
Download | Node.js
Download the Node.js source code or a pre-built installer for your platform, and start developing today.
Globally install nodemon and create-react-app, since you will be using it globally on your local machine.
npm i -g create-react-app
npm i -g nodemon
Here is a little bit of documentation of installing nvm.
If you work on more than one project at a time or you do a lot of open source work or you decide to go back to a…
nvm - Node Version Manager - Simple bash script to manage multiple active node.js versions
Finally lets create our react-app
so run create-react-app, if that doesn’t work run npx create-react-app, and name of your app, i will be calling it a boring basic name called e-commerce-app.
NOTE: App name has to be lowercase.
npx create-react-app e-commerce-app
Now lets install the npm modules we need at the moment.
npm i --save dotenv express express-session body-parser cors cloudinary mongoose react-icons react-router-dom react-redux redux
Now lets setup directories in the backend. OUTSIDE THE src directory.
Then cd to that directory and create a index.js file, which will be a main server file, and create a models folder for your mongoose models.
Now get out of server folder and cd to src and create a components directory, where your store the components. Now create a presentational folder, and a container folder for your presentational and container components. If you don’t know what that means. Looks at this article.
Container vs Presentational Components in React
The main thing to keep in mind is that container components and presentational components go together when setting up a…
Right now that will be it, we will start on the backend first. Then go to the frontend. We will setup our backend next if you need a refresh or you don’t have the right stuff installed and bookmarked look at step 1.
Here is the git repository for reference.
And the next step if you feel like your ready for the next step.