The client-side code will reside inside this folder. Now we will re-arrange our React Application.įirst of all, create a client folder inside the root folder. Step 3: Re-arrange the React application.
react-router-dom lets us use React router. react-modal lets us create a modal dialog in React. react-bootstrap lets us use bootstrap components with React. nodemon automatically restarts the server whenever the code changes. mongoose is an ODM framework for MongoDB. express is a web application framework for NodeJS. babel-cli will be used to compile files from the command line. We can get access to the information inside the request via req.body. body-parser parses the request bodies. 
axios will be used to send requests to server to fetch or insert data. npm i axios babel-cli body-parser express mongoose nodemon react-bootstrap react-modal react-router-dom -SAVE Do not forget to put ‘ - SAVE’ at the end as it will update the package.json file. Run the following command to install the dependencies. It should look like this.īasic React App Step 2: Install the dependencies. This will create a new folder called expense-manager and install the react dependencies. We will now use create-react-app package to create a new react application. First install the create-react-app package by running the following command. To do that we will use the create-react-app package. 
In this step we will create a basic react application to get us started.
Step 1: Create a basic React Application. The application will enable the user to add, update, delete and display their expenses. We will create an Expense Manager application using MERN stack. This is NOT a tutorial on MongoDB, Express, React or NodeJS. You should also have npm (Node Package Manager) installed. You need to have a basic understanding of all the four technologies that make up the MERN stack. MERN Stack is a combination of four technologies - MongoDB(M), Express(E), React(R), NodeJS(N). In this tutorial, I will teach you how to create a simple MERN stack application. Creating your first MERN stack application.
0 kommentar(er)
