Your first App using React with Express and MongoDB

By | February 28, 2017

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:

React Native And Redux Course
The Complete React Native and Redux Course
iOS and Android App Development from scratch – build fully native mobile apps ridiculously fast! Get up and running with React Native quickly, and teach the core knowledge you need to deeply understand and build React components for mobile devices.

React Native - Advanced Concepts
React Native: Advanced Concepts
Master the advanced topics of React Native: Animations, Maps, Notifications, Navigation and More! Go beyond the basics of React Native!  This course will teach you the advanced topics you need to make a #1 best-selling app.
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

Follow here for a complete ASP.NET Core 2.0 MongoDB solution.

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
Angular 4 is out now. We can use Angular 4 to develop applications that are cross platform with maximum speed and performance. More on Angular 4 here.

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: