DEV Community

Tamilselvan K
Tamilselvan K

Posted on

Day-31 React Basics You Should Know as a Beginner

#webdev #programming #javascript #react

Today, I started my journey into React.js and learned some important foundational concepts. Whether you're new to web development or just getting started with React, these basics are must-knows! Here's what I explored today:

1. DOM vs Virtual DOM vs React DOM

Understanding the DOM is key to knowing how React improves performance.

Feature DOM Virtual DOM React DOM
Definition Browser's representation of the HTML structure Lightweight copy of real DOM in memory React’s way to interact with the DOM
Speed Slower when updating large structures Faster, as changes are calculated before updating real DOM Acts as a bridge between Virtual DOM and actual DOM
Usage Used in vanilla JS and all browsers Used internally by React Used by React to update browser DOM

Analogy: Think of the Virtual DOM like a draft copy. React updates the draft first, then compares it with the original and only applies minimal changes – just like a good editor!

2. SPA vs MPA

This is about the structure of your web app.

Feature SPA (Single Page Application) MPA (Multi Page Application)
Pages One main page that dynamically updates Multiple full pages (reloads on each navigation)
Speed Faster after first load Slower due to full reloads
Examples Gmail, Facebook Amazon, Wikipedia
Routing Handled by JavaScript (like React Router) Handled by the server

SPA feels like a mobile app. MPA feels like traditional websites.

3. What is NPM?

NPM (Node Package Manager) is a tool that helps you manage JavaScript packages (libraries, tools, frameworks).

  • Helps install third-party libraries (like React)
  • Manages dependencies in your project
  • Creates a node_modules/ folder and package.json file

Analogy: NPM is like a food delivery app. You choose what you want (React, Axios, etc.), and it brings the code to your project.

4. What is NPX?

NPX is a tool that comes with NPM (version 5.2+). It lets you run packages without installing them globally.

  • Use it to run tools temporarily (like create-react-app)
  • Saves your system from being cluttered with global packages

Analogy: NPM installs a kitchen item. NPX lets you use it once without buying it — like renting a blender for one smoothie.

Example:

npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

5. What is JSX?

JSX (JavaScript XML) lets us write HTML inside JavaScript.

const element = <h1>Hello, React!</h1>;
Enter fullscreen mode Exit fullscreen mode
  • Combines HTML + JS logic
  • Easier to build UI components
  • Compiled by Babel into regular JavaScript

JSX feels like HTML, but it's actually JavaScript! It’s a powerful way to describe the UI directly in code.

Final Thoughts

React simplifies building dynamic UIs. Today I understood:

  • How React efficiently updates the DOM
  • Why SPAs feel smoother than traditional websites
  • What tools (npm, npx) power the React ecosystem
  • How JSX makes writing UI fun and readable

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.