DEV Community: Dhanushkumar

A Comprehensive Guide to ReactDOM, JSX, SPA vs MPA, npm & npx, Hooks

Dhanushkumar — Fri, 13 Jun 2025 18:24:57 +0000

1.React DOM

What is React DOM?

React DOM is the bridge between your React components and the actual browser DOM (Document Object Model). It allows your React code (written in JSX and JavaScript) to be displayed in the browser.

Why do we use it?

React uses a virtual DOM for better performance. Instead of updating the entire web page every time something changes, React compares the new virtual DOM with the previous one and updates only the changed elements in the real DOM using React DOM. This process is called reconciliation and makes React fast and efficient.

When is React DOM used?

React DOM is used when you want to render your React components into the browser. Usually, this happens in your index.js file, where the main component (like ) is mounted to a real HTML element.

Where is it used?

It is used in web projects. For React Native (for mobile apps), React DOM is replaced with React Native modules.

How is it used?

Here’s a basic example:

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

In React 18+, the syntax slightly changes:

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

2. SPA vs MPA

What are SPA and MPA?

SPA (Single Page Application) loads one HTML file and updates the content dynamically using JavaScript without refreshing the page.
MPA (Multi Page Application) loads a new HTML page from the server each time the user navigates to a new route.

Why are they important?

SPAs offer a fast, seamless user experience by reducing load time and transitions. On the other hand, MPAs are better for SEO (Search Engine Optimization) and are often used for large websites like e-commerce or blogs.

When should you use them?

Use SPA for dynamic web apps like dashboards, social platforms, or productivity tools. Use MPA for static websites or sites where SEO is critical.

Where are they used?

SPAs: React, Angular, Vue.

MPAs: Traditional HTML, PHP, JSP, and frameworks like Spring MVC or Laravel.

3. npm vs npx

What is npm and npx?

npm (Node Package Manager) is a tool to install, manage, and share JavaScript packages.

npx (Node Package Executer) is a tool to run npm packages without installing them permanently.

Why are they important?

With npm, you can install libraries like React, Axios, or Lodash. npx helps when you want to run tools (like create-react-app) just once, without keeping them in your system.

When are they used?

Use npm when you want a package available in your project repeatedly. Use npx when you want to run a package only once, like setting up a new React project.

Where are they used? They are used in your command line or terminal inside the project directory.

How are they used?
To install Axios using npm:

npm install axios

To create a React app using npx:

npx create-react-app my-app

4. JSX (JavaScript XML)

What is JSX?

JSX is a syntax extension that lets you write HTML-like code inside JavaScript. It makes your React components more readable and intuitive.

Why do we use JSX?

JSX is easier to understand and write compared to plain JavaScript. Instead of calling functions like React.createElement(), JSX allows you to visually structure UI like HTML.

When should you use JSX?

Whenever you want to build UI components in React. JSX is used inside functional or class components.

Where is it used?

Inside .js or .jsxfiles in your React app.

How does JSX work?

JSX gets compiled into JavaScript behind the scenes. This:

const element = <h1>Hello, world!</h1>;

Turns into:

const element = React.createElement('h1', null, 'Hello, world!');

5. Library vs Framework

What is the difference?

A library is a collection of functions and tools you can use in your code (like React).

A framework provides a complete structure and decides how your app is built and runs (like Angular).

Why does it matter?

Libraries offer flexibility. Frameworks offer structure. Depending on your needs, you may prefer one over the other.

When to choose which?

Use a library like React if you want control and customization. Use a framework like Angular if you want a pre-defined way to build applications.

Where are they used?

React (library) is used in lightweight front-end apps. Angular (framework) is used in enterprise-grade apps needing built-in tools.

6. Conditional Rendering in React

What is it?

Conditional rendering means showing or hiding UI elements based on certain conditions.

Why is it needed?

Your app often needs to show different content for different users or states — like showing a login form if the user isn’t logged in.

When do we use it?

Whenever you need to change the UI based on data, props, or user interaction.

Where is it written? Inside JSX, often within a return statement of a component.

7. How Hooks Work in React

What are Hooks?

Hooks are built-in React functions that let you use state and lifecycle features inside functional components.

Why were hooks introduced?

Before hooks, only class components could use features like state and lifecycle methods. Hooks allow you to write simpler and reusable functional components.

When are they used?

Use useState() when you need local component state. Use useEffect() when you want to run side effects like API calls.

Where are hooks used?

Only inside functional components — not in regular functions or class components.

JavaScript Basics: Everything You Need to Know to Get Started

Dhanushkumar — Wed, 28 May 2025 02:32:14 +0000

JavaScript powers the dynamic behavior of modern websites and applications. Whether you're building interfaces, handling user interactions, or processing data, a strong grasp of JavaScript fundamentals is crucial. This guide walks through key concepts including data types, variables, functions, return values, arguments, function calls, and string concatenation—essential tools for writing robust and efficient JavaScript code.

🔢 1. Data Types in JavaScript

JavaScript provides a variety of data types to represent different kinds of information. Understanding these helps you choose the right type for your task.

String: Used to represent textual data. Strings are enclosed in single (') or double (") quotes.
Number: Represents both integer and floating-point numbers. JavaScript does not distinguish between them.
Boolean: Represents logical values, either true or false, commonly used in conditional statements.
Null: Represents the intentional absence of any object value. It must be assigned explicitly.
Undefined: A variable that has been declared but not assigned a value.
Object: A complex data type used to store collections of data and more complex entities.

Example:

let name = "Alice";       // String
let age = 25;             // Number
let isActive = true;      // Boolean
let data = null;          // Null
let email;                // Undefined
let user = { name: "Alice", age: 25 }; // Object

🏷️ 2. Variables

Variables are used to store data that your program can manipulate. In modern JavaScript, use let and const instead of var.

let: Used when the variable’s value might change.
const: Used when the variable should not be reassigned.

Variables must start with a letter, underscore _, or dollar sign $, and cannot begin with a number.

Example:

let city = "New York";
city = "Los Angeles"; // Allowed

const country = "USA";
// country = "Canada"; // This would cause an error

🧱 3. Functions

Functions are reusable blocks of code that perform a specific task. They help structure your code, make it reusable, and separate concerns.

There are different ways to define functions:

Function Declaration:

function greet() {
  console.log("Welcome to JavaScript!");
}

Function Expression:

const greet = function() {
  console.log("Welcome to JavaScript!");
};

Arrow Function (ES6):

const greet = () => {
  console.log("Welcome to JavaScript!");
};

You call (or invoke) a function by writing its name followed by parentheses.

greet();

🔄 4. Return Statement

A function can use the return statement to send a value back to the place where it was called. This allows functions to produce output and interact with other parts of the program.

If there is no return statement, the function returns undefined by default.

Example:

function multiply(x, y) {
  return x * y;
}

let result = multiply(4, 5); // result = 20
console.log(result); // Outputs: 20

🎯 5. Function Arguments

Arguments are values you pass to a function when calling it. Functions can accept any number of arguments, and these are treated like local variables inside the function.

Example:

function welcomeUser(name) {
  console.log("Hello, " + name + "!");
}

welcomeUser("Daniel"); // Outputs: Hello, Daniel!

You can also use default values for arguments:

function welcomeUser(name = "Guest") {
  console.log("Hello, " + name + "!");
}

welcomeUser(); // Outputs: Hello, Guest!

🔁 6. Function Calling

To execute the code inside a function, you call it using its name followed by parentheses. You can pass arguments inside the parentheses.

function add(a, b) {
  return a + b;
}

let sum = add(10, 15); // sum = 25
console.log(sum); // Outputs: 25

Functions can also be called from within other functions, enabling more complex operations.

➕ 7. String Concatenation

String concatenation means joining two or more strings together.

Using `+` Operator:

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // Outputs: John Doe

Using Template Literals:

Template literals are enclosed by backticks (`) and allow embedded expressions using ${}.

let greeting = `Hello, ${firstName} ${lastName}!`;
console.log(greeting); // Outputs: Hello, John Doe!

🚀 Conclusion

Mastering JavaScript fundamentals such as data types, variables, functions, return values, arguments, and string manipulation lays the groundwork for becoming a proficient developer. These concepts are not just academic—they're used daily in real-world web development.

Practice regularly by creating small scripts, experimenting with functions, and manipulating data. Each step brings you closer to building interactive and dynamic applications.

DEV Community: Dhanushkumar

A Comprehensive Guide to ReactDOM, JSX, SPA vs MPA, npm & npx, Hooks

1.React DOM

2. SPA vs MPA

3. npm vs npx

4. JSX (JavaScript XML)

5. Library vs Framework

6. Conditional Rendering in React

7. How Hooks Work in React

JavaScript Basics: Everything You Need to Know to Get Started

🔢 1. Data Types in JavaScript

Example:

🏷️ 2. Variables

Example:

🧱 3. Functions

Function Declaration:

Function Expression:

Arrow Function (ES6):

🔄 4. Return Statement

Example:

🎯 5. Function Arguments

Example:

🔁 6. Function Calling

➕ 7. String Concatenation

Using + Operator:

Using Template Literals:

🚀 Conclusion

Using `+` Operator: