Level Up React : React and React DOM architecture

Ever wondered why React is split into two packages? Let's explore the architecture behind React and React DOM!

When you start a React project, you always install two packages:

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

This separation isn't random - it's a deliberate architectural choice that makes React so versatile. At its core:

• 'react' is the brain: it handles component logic, state management, and element creation
• 'react-dom' is the hands: it does all the browser work, turning React's instructions into actual DOM operations

What's fascinating is that the 'react' package can work completely independently. You don't even need JSX or react-dom to create React elements! Here's a pure JavaScript example:

const { createElement } = React;

function Welcome() {
  return createElement(
    'div',
    null,
    'Hello React!'
  );
}

Though let's be honest, most of us prefer the more readable JSX version 😉:

function Welcome() {
  return (
    <div>
      Hello React!
    </div>
  );
}

In our complete guide, we explore:

• The specific roles of each package
• How this separation enables React's "Learn Once, Write Anywhere" philosophy
• Why you can use React without react-dom
• Practical examples of React without transpilation

Ready to understand React's architecture better? Read the full article here: https://www.56kode.com/posts/level-up-react-react-and-react-dom-architecture/