{"id":593,"date":"2022-08-12T16:44:08","date_gmt":"2022-08-12T14:44:08","guid":{"rendered":"https:\/\/www.javascripttutorials.net\/?p=593"},"modified":"2024-04-23T17:54:14","modified_gmt":"2024-04-23T15:54:14","slug":"mern-stack-mongodb-express-react-node-js-full-tutorial","status":"publish","type":"post","link":"https:\/\/www.javascripttutorials.net\/mern-stack-mongodb-express-react-node-js-full-tutorial\/","title":{"rendered":"MERN Stack (MongoDB, Express, React, Node.js) Full Tutorial"},"content":{"rendered":"<p>This tutorial teaches how to create a full-stack web application using the MERN stack. The MERN stack combines the following technologies MongoDB, Express, React, and <a href=\"https:\/\/www.javascripttutorials.net\/category\/node-js\/\">Node.js<\/a>. This tutorial also explains how to use MongoDB Realm to convert the backend to serverless and host the entire thing for free in the cloud. You will even learn how to host the React frontend for free.<!--more--><\/p>\n<p>MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.<br \/>\n* MongoDB \u2014 a NoSQL document database<br \/>\n* Express(.js) \u2014 Node.js web framework<br \/>\n* React(.js) \u2014 a client-side JavaScript framework<br \/>\n* Node(.js) \u2014 the premier JavaScript web server<\/p>\n<p>MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js front-end framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and really any front-end JavaScript framework can work. Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and Node.js is the popular and powerful JavaScript server platform. Regardless of which variant you choose, ME(RVA)N is the ideal approach to develop web applications with JavaScript and JSON. The MERN architecture allows you to easily construct a three-tier architecture (front end, back end, database) entirely using JavaScript and JSON<\/p>\n<p><iframe loading=\"lazy\" title=\"Learn the MERN Stack - Full Tutorial (MongoDB, Express, React, Node.js)\" width=\"730\" height=\"548\" src=\"https:\/\/www.youtube.com\/embed\/7CqJlxBYj-M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Video producer: <a href=\"https:\/\/www.freecodecamp.org\/\">https:\/\/www.freecodecamp.org\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial teaches how to create a full-stack web application using the MERN stack. The MERN stack combines the following technologies MongoDB, Express, React, and Node.js. This tutorial also explains how to use MongoDB Realm to convert the backend to serverless and host the entire thing for free in the &hellip;<\/p>\n","protected":false},"author":1,"featured_media":595,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[49],"class_list":["post-593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-node-js","tag-database"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/posts\/593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/comments?post=593"}],"version-history":[{"count":0,"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/posts\/593\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/media\/595"}],"wp:attachment":[{"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/media?parent=593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/categories?post=593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javascripttutorials.net\/wp-json\/wp\/v2\/tags?post=593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}