HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the structure of a webpage.
CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the appearance of HTML elements.
color, font-size,
margin, padding, border, etc.).
JavaScript is a programming language used to create dynamic content on websites. It's essential for client-side scripting.
let, const,
var, array, object).
for, while, if,
switch).
arrow functions,
destructuring).
document.getElementById,
addEventListener).
async/await.Node.js is a runtime environment that allows you to run JavaScript on the server-side.
require('http'), require('fs')).npm init,
npm install).fs, http, path).http.createServer).express()).
Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
const express = require('express'); const app = express();).app.get('/path', (req, res) => {...}),
app.post('/path', (req, res) => {...})).app.use(bodyParser.json()),
app.use(cors())).app.set('view engine', 'ejs'),
res.render('template')).app.use((err, req, res, next) => {...}),
app.get('/api/resource', (req, res) => {...})).Databases are used to store and manage data. For the MERN stack, MongoDB is commonly used.
MySQL,
PostgreSQL vs. MongoDB, Cassandra).CREATE TABLE, INSERT INTO,
SELECT, UPDATE, DELETE in SQL; insertOne,
find, updateOne, deleteOne in NoSQL).CREATE INDEX, EXPLAIN
in SQL; createIndex, explain in MongoDB).PRIMARY KEY,
FOREIGN KEY in SQL; embedded documents, references in NoSQL).GRANT,
REVOKE in SQL; user roles and permissions in NoSQL).MongoDB is a NoSQL database that uses a document-oriented data model. It's designed for scalability and flexibility.
documents,
collections, databases).db.collection.insertOne(),
db.collection.find()).insertOne(),
find(), updateOne(), deleteOne()).db.collection.createIndex(),
db.collection.aggregate()).Mongoose is an ODM (Object Data Modeling) library for MongoDB and Node.js. It provides a schema-based solution to model your application data.
const mongoose = require('mongoose');
const Schema = mongoose.Schema; const model = mongoose.model;).const userSchema = new Schema({ name: { type: String, required: true } });).userSchema.pre('save', function(next) { ... });).User.find(),
User.findByIdAndUpdate()).UserSchema with ref for
populate).Hosting involves deploying your web application to a server where it can be accessed by users.
Shared Hosting,
VPS, Dedicated Hosting, Cloud Hosting).git push to deploy).git push heroku master).docker build,
docker run, docker-compose).React is a JavaScript library for building user interfaces. It allows you to create reusable UI components.
import React from 'react';).<div>Hello, World!</div>).this.state, this.props).onClick).componentDidMount,
componentWillUnmount).useState, useEffect).<Route path="/about" component={About} />).connect, mapStateToProps).
Next.js is a React framework that enables server-side rendering and generating static websites for React-based web applications.
npm install next react react-dom).pages/index.js,
pages/about.js).pages/post/[id].js,
pages/api/post/[id].js).getStaticProps,
getServerSideProps)._app.js,
_document.js).<Image src="/image.jpg" alt="Image" width={500} height={300} />).next.config.js,
getStaticPaths).vercel for automatic
deployment).next.config.js,
pages/api/hello.ts).Jest,
Testing Library).To gain a good command over MERN (MongoDB, Express.js, React, Node.js) development, it's essential to work on projects that cover various aspects of each technology. Here are some project ideas that can help you strengthen your skills in MERN stack development: