DEV Community

Cover image for Getting Started with React
ANSI KADEEJA
ANSI KADEEJA

Posted on

Getting Started with React

React is a powerful and popular JavaScript library for building user interfaces. If you're new to React, you might be wondering how it works and what makes it special. In this blog, I’ll explain some of the most important basic concepts to help you get started: DOM vs React DOM, SPA vs MPA, Class vs Functional Components, JSX, and npm vs npx.

📘 DOM vs React DOM

  • DOM (Document Object Model) is the browser’s representation of your HTML structure. JavaScript can interact with it using functions like document.getElementById() to change content or style.

  • React DOM is a React-specific version that uses a Virtual DOM to update the actual DOM more efficiently. Instead of reloading the entire page, React updates only the parts that change, making apps faster and smoother.

🔁 SPA vs MPA

  • SPA (Single Page Application):
    In an SPA, the entire website loads one single HTML page. When the user interacts with the site, JavaScript updates the page without reloading it. React is designed to build SPAs.
    Example: Gmail, Facebook

  • MPA (Multi Page Application):
    An MPA loads a new HTML page every time a user clicks a link. The browser reloads completely. These are common in traditional websites.
    Example: Amazon, online banking sites

🏗️ Class vs Functional Components
React allows you to build UI using components, which are like reusable building blocks. There are two main types:

📦 Class Components

  • Written using JavaScript classes.
  • Include lifecycle methods like componentDidMount().
  • Older but still valid.
class Welcome extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}
Enter fullscreen mode Exit fullscreen mode

✨ Functional Components

  • Simple JavaScript functions.
  • Use Hooks (like useState, useEffect) to manage state and side effects.
  • Modern and preferred way of writing components.
function Welcome() {
  return <h1>Hello, React!</h1>;
}
Enter fullscreen mode Exit fullscreen mode

💡 What is JSX?
JSX stands for JavaScript XML. It lets you write HTML-like code inside JavaScript, making your UI code more readable and powerful.
Example:

const name = "Ansi";
const greeting = <h1>Hello, {name}</h1>;
Enter fullscreen mode Exit fullscreen mode

JSX supports dynamic content using {} and makes your code cleaner and easier to work with.
📦 npm vs npx
📌npm (Node Package Manager)

  • Used to install libraries or tools into your React project.

Example:

npm install react
Enter fullscreen mode Exit fullscreen mode

⚡ npx

  • Used to run packages without permanently installing them.
  • Helpful for tools like Create React App:
npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

This command sets up a new React project with all the required tools in seconds.

Top comments (0)