Scribd
Upload
9 views4 pages

Beginner Guide JavaScript Node Express React

This document is a beginner's guide to the MERN stack, covering JavaScript, Node.js, Express.js, and React. It outlines the key concepts, setup instructions, and provides examples for running JavaScript on both the server and client sides. The guide emphasizes the importance of JavaScript as a universal language and offers next steps for building a full MERN application.

Uploaded by

arupghosh123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views4 pages

Beginner Guide JavaScript Node Express React

This document is a beginner's guide to the MERN stack, covering JavaScript, Node.js, Express.js, and React. It outlines the key concepts, setup instructions, and provides examples for running JavaScript on both the server and client sides. The guide emphasizes the importance of JavaScript as a universal language and offers next steps for building a full MERN application.

Uploaded by

arupghosh123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Complete Beginner’s Guide: JavaScript

+ Node.js + Express.js + React


What You Will Learn
By the end of this tutorial, you will:

✅ Understand the MERN stack (MongoDB, Express.js, React, Node.js)

✅ Learn the difference between client-side and server-side JavaScript

✅ Use Node.js to run JS outside the browser

✅ Create a frontend with HTML + JavaScript

✅ Write a basic backend server using Node.js

✅ See how Express.js and React fit into the architecture

Why JavaScript First?


JavaScript is the only programming language that works on both the frontend (browser)
and the backend (server). It is:

- Universal 🌍 (used everywhere)

- Easy to start with

- Supported by modern tools like Node.js, React, and Express.js

MERN Stack Architecture


MERN stands for:

M - MongoDB (Database)

E - Express.js (Handles HTTP requests/responses)

R - React.js (Frontend UI)


N - Node.js (Runs JavaScript backend logic)

Architecture Flow:

Browser (React) → Fetch API / AJAX → Express.js (with Node.js) → MongoDB

Setup on Windows/macOS
1. Install Node.js from https://nodejs.org

2. Verify with `node -v` and `npm -v`

3. Install VS Code from https://code.visualstudio.com

PART 1: Run JavaScript with Node.js


Create hello.js with:

console.log("Hello from Node.js!");

Run with:

node hello.js

PART 2: Run JavaScript in Browser


Create index.html with a button and JavaScript:

<script>

function sayHello() {

alert("Hello from the browser!");

</script>

PART 3: HTML + Node.js Backend


Create folder: node-html-app/

├── public/index.html

└── server.js
server.js sets up HTTP server using Node.js to serve index.html and handle /api/message
endpoint.

Run with:

node server.js

Bonus: What is Express.js?


Express.js is a web framework for Node.js. It simplifies backend code for handling routes,
responses, and middleware.

Example:

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('Hello from Express!'));

app.listen(3000);

Bonus: What is React?


React is a JavaScript library for building user interfaces.

Key features:

- Component-based architecture

- Virtual DOM

- Used for single-page apps

Example:

function App() {

return <h1>Hello from React!</h1>;

}
Final Summary
JavaScript: Core Language for frontend/backend

Node.js: JS runtime for backend

Express.js: Simplified server framework

React: UI library for frontend

MongoDB: NoSQL database

Next steps:

- Convert server to Express.js

- Build frontend in React

- Connect to MongoDB

- Deploy full MERN app

You might also like