Your first App using React with Express and MongoDB

By | February 28, 2017
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

In one of our previous MEAN Stack tutorial, we followed a step by step approach to develop a RESTful API using ExpressJS with MongoDB. Here in this MEAN Stack article, we are going to develop another application in ExpressJS and MongoDB with ReactJS. We will follow the same step by step approach to build this application. If you are not familiar with the technologies being used in this article, you can follow the below links to fully understand these technologies as:

Now, lets move further to start developing our application using ReactJs with Express and MongoDB.

STEP 1: Initialize the project:

  • Create a folder with the project name such as todoapp.
  • Open command prompt window on the project folder.
  • Run the following command
    This command will create a package.json file with following details:

    MEAN Stack Tutorial

STEP 2: Install Express:

  • Install express with following command

STEP 3: Install Express Generator:

  • Install express-generator using following command

STEP 4: Create the Project:

  • Use the following command to create the express project.

    This will give the following output:

STEP 5: Setup Development Dependencies:

  • Add the following dependencies and dev dependencies in package.json file and run npm install from the root folder of the project.

STEP 6: Setup ReactJs Build Dependencies:

  • In package.json add the following script  and dev-dependencies.

  • Config the webpack.config.js file as following:

  • From command prompt run ‘npm start’. This will create a new directory called build inside public folder and the following files will be there:npm start
  • Create index.html file inside public folder.

  • Change the routes in routes/index.js as following:

  • Change the app-engine in app.js.

  • Create a index.jsx in /views folder.

  • Create a App.jsx in /views folder.

  • From browser run http://localhost:3000/MEAN Stack App

STEP 7: Run Mongo:

  • Run mongodb.exe it will start the mongodb.Run MongoDB Tutorial
  • Connect to todoapp databse using following command:Connect MongoDB

STEP 8: Develop the Server-side:

  • Create the server REST API in routes/todo.js

STEP 9: Develop the Client-side:

  • Add model

  • Add Form Component ‘TodoForm’.

  • Add List Component

  • Update App.jsx

  • Update index.jsx

  • From browserReactJS Application

Hopefully, this application will be helpful in understanding the technology in practical manner and developing the first application using React.js with Express and MongoDB.

Top Related Technical Articles:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest