CODEWITHSUNDEEP
javascriptnode.jsreactjsexpressmern
Sina Abedi
Sina Abedi

Reputation: 2401

How to build a dynamic single page web app using MERN stack?

I read a lot of articles about creating dynamic apps with express js using (ejs,handelbars, etc...),but i want my web app to be dynamic and single page by using react.

my purpose is to render template and insert dynamic data from express server to react single page application to make my application fast, is there any way to do that with MERN stack?

Upvotes: 3

Views: 2833

Answers (1)

AIMEUR Amin
AIMEUR Amin

Reputation: 365

Of coourse there is a way to do that, it's what the MERN is made for:

M: Mongodb is for database and you should npm install mongoose, mongoose is a great npm library for dealing with mongodb

E: Expressjs is a framework to make web application (send get/post/put/delete.. requests and much other stuff) on Nodejs

R: Reactjs for your frontend as you know

N: Nodejs as they mention it on their web site; 'javascript on the server' for the backend

If you want to create a single page application all you have to do is to set up your database (if you need one) then just code your backend using nodejs and expressjs once done just lunch the backend using yarn start or node app.js as you prefer and finally just open a react project using create-react-app command (this one is an npm package so you have to install it first using npm i -g create-react-app) once done with setting up your frontend you can retreive data from the backed using axios in your react code. and everything will work fine.

Here are some articales that might help you out:

How to create your first MERN (MongoDB, Express JS, React JS and Node JS) Stack

Let’s build a full stack MongoDB, React, Node and Express (MERN) app

The MERN Stack Tutorial – Building A React CRUD Application From Start To Finish – Part 1

The MERN Stack Tutorial — Building A React CRUD Application From Start To Finish — Part 2

The MERN Stack Tutorial – Building A React CRUD Application From Start To Finish – Part 3

The MERN Stack Tutorial – Building A React CRUD Application From Start To Finish – Part 4

Upvotes: 1

Related Questions