The MERN stack is one of the most popular tech stacks for full-stack development today. It combines four key technologies: MongoDB, Express.js, React.js, and Node.js. This blog post will guide you through the essential components of the MERN stack, demonstrating how to build a powerful and scalable web application from scratch.<\/p>\n
The MERN stack encompasses:<\/p>\n
When used together, these technologies form a powerful full-stack development framework that enables developers to build applications entirely in JavaScript, which can lead to improved efficiency and productivity.<\/p>\n
Before diving into code, it\u2019s essential to set up your development environment. Follow these steps:<\/p>\n
Now, let\u2019s dive into building a basic MERN stack application. We will create a simple To-Do application that allows users to add and delete tasks.<\/p>\n
Navigate to your development folder and create a new directory for your project. Then, open a terminal and execute the following commands:<\/p>\n
mkdir mern-todo-app\ncd mern-todo-app\nnpm init -y<\/code><\/pre>\nThis will create a new Node.js project. Next, install the necessary packages:<\/p>\n
npm install express mongoose cors body-parser<\/code><\/pre>\nThe express<\/strong> package is the web framework we\u2019ll use, while mongoose<\/strong> facilitates communication between the app and MongoDB. cors<\/strong> allows cross-origin requests, and body-parser<\/strong> helps parse incoming request bodies.<\/p>\nCreating the Server<\/h4>\n
In your project root, create a file named server.js<\/strong>. This will be the main file for your back-end application:<\/p>\nconst express = require('express');\nconst mongoose = require('mongoose');\nconst cors = require('cors');\nconst bodyParser = require('body-parser');\n\nconst app = express();\nconst PORT = 5000;\n\n\/\/ Middleware\napp.use(cors());\napp.use(bodyParser.json());\n\n\/\/ MongoDB connection\nmongoose.connect('mongodb:\/\/localhost:27017\/todo-app', {\n useNewUrlParser: true,\n useUnifiedTopology: true,\n});\n\n\/\/ Define a Todo schema\nconst todoSchema = new mongoose.Schema({\n task: String,\n completed: { type: Boolean, default: false },\n});\n\nconst Todo = mongoose.model('Todo', todoSchema);\n\n\/\/ RESTful API routes\napp.get('\/todos', async (req, res) => {\n const todos = await Todo.find();\n res.json(todos);\n});\n\napp.post('\/todos', async (req, res) => {\n const newTodo = new Todo(req.body);\n await newTodo.save();\n res.status(201).json(newTodo);\n});\n\napp.delete('\/todos\/:id', async (req, res) => {\n await Todo.findByIdAndDelete(req.params.id);\n res.status(204).send();\n});\n\n\/\/ Start the server\napp.listen(PORT, () => {\n console.log(`Server is running on http:\/\/localhost:${PORT}`);\n});<\/code><\/pre>\nThis server listens on port 5000 and provides routes for creating, retrieving, and deleting to-do items.<\/p>\n
Step 2: Setting Up the Front-End<\/h3>\n
Now it\u2019s time to set up the front-end. In a new terminal, navigate to your project folder and create a new React application:<\/p>\n
npx create-react-app client\ncd client\nnpm install axios<\/code><\/pre>\nHere, we use axios<\/strong> for making HTTP requests from the front-end to our back-end API.<\/p>\nCreating the To-Do Component<\/h4>\n
In your React app, navigate to the src<\/strong> directory, and create a new file named TodoApp.js<\/strong>. This component will manage the display and interaction of our To-Do items:<\/p>\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\n\nfunction TodoApp() {\n const [todos, setTodos] = useState([]);\n const [task, setTask] = useState('');\n\n useEffect(() => {\n fetchTodos();\n }, []);\n\n const fetchTodos = async () => {\n const response = await axios.get('http:\/\/localhost:5000\/todos');\n setTodos(response.data);\n };\n\n const addTodo = async (e) => {\n e.preventDefault();\n const newTodo = { task };\n\n const response = await axios.post('http:\/\/localhost:5000\/todos', newTodo);\n setTodos([...todos, response.data]);\n setTask('');\n };\n\n const deleteTodo = async (id) => {\n await axios.delete(`http:\/\/localhost:5000\/todos\/${id}`);\n setTodos(todos.filter(todo => todo._id !== id));\n };\n\n return (\n \n To-Do List<\/h1>\n \n setTask(e.target.value)}\n required\n \/>\n