DEV Community

rajeshwari rajeshwari
rajeshwari rajeshwari

Posted on

## 🚀 My Journey into React: From Basics to Building Blocks

Great! Since you've been learning React DOM, npm & npx, state & map, JSX & JS, components, and the difference between libraries & frameworks, here's a blog post that brings all these concepts together in a beginner-friendly way:

🚀 My Journey into React: From Basics to Building Blocks

React has become one of the most powerful tools in the front-end development world, and as someone just getting started, I’ve already discovered how powerful—and fun—it can be. In this blog, I’ll walk through the core concepts I’ve learned so far: React DOM, npm & npx, JSX vs JS, state & map, components, and how libraries differ from frameworks.

⚛️ What is React DOM?

React DOM is the part of React that interacts with the actual browser DOM. It’s responsible for updating the UI efficiently. When we create elements with React, React DOM updates only the parts of the DOM that change. This makes React fast and optimized.

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Enter fullscreen mode Exit fullscreen mode

📦 npm & npx – What’s the Difference?

  • npm (Node Package Manager) helps you install packages like React.
  • npx is a tool to run packages without permanently installing them.

Example:

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

So, npx helps us get started with a React project quickly using create-react-app.

✨ JSX vs JS

JSX is like HTML, but inside JavaScript. It makes code readable and lets us write UI in a familiar syntax.

JSX Example:

const element = <h1>Hello, world!</h1>;
Enter fullscreen mode Exit fullscreen mode

JSX is not HTML, but it compiles down to JavaScript calls like React.createElement.

🧠 State & map() – React's Brain

In React, state lets components remember information and respond to user actions.

const [count, setCount] = useState(0);
Enter fullscreen mode Exit fullscreen mode

The map() method is often used to render lists dynamically:

const items = ['Apple', 'Banana', 'Cherry'];

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);
Enter fullscreen mode Exit fullscreen mode

🧩 Components – React’s Building Blocks

Everything in React is a component: buttons, forms, entire pages. They’re reusable and help split the UI into independent pieces.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Components can be functional or class-based, but modern React uses function components + hooks more often.

đź›  Library vs Framework

React is a library, not a framework.

  • A library (like React) gives you tools and leaves the structure to you.
  • A framework (like Angular) provides a full structure and makes more decisions for you.

React gives more freedom but also means you manage more—routing, state, etc.

✅ Wrap-Up: What I’ve Built So Far

After learning these basics, I built a small app that:

  • Renders components using JSX
  • Uses useState to track changes
  • Maps over an array to render dynamic content
  • Runs through npm start with create-react-app

React might seem tricky at first, but once you understand these core concepts, things start to click. 🚀

Let me know if you want this turned into a Markdown file, published to a blog, or expanded into a portfolio project!

Top comments (0)