Categories React, React FundamentalsPosted on

Difference between React and ReactDOM

Hi, in this post Im going to mention a little beat about React fundamentals and the difference between React and ReactDOM.

  • React: responsible for creating React elements (kinda like document.createElement())
  • ReactDOM: responsible for rendering React elements to the DOM (kinda like rootElement.append())

Note: the reason that React and ReactDOM are separate is because ReactJs support other platforms as well like React Native.

Example:

<body>
  <div id="root"></div>
  <!-- UNPKG -->
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>

  <script type="module">
    const rootElement = document.getElementById('root')

    // raw React APIs here
    const element = React.createElement('div', {
      className: 'container',
      children: 'Hello world',
    })
    ReactDOM.render(element, rootElement)
  </script>
</body>

The UNPKG this will allow us to access to anything that is on npm just from the browser using the url and the script tag.

If we want to create more elements with React API, for example:

<div class="container">
  <span>Hello</span>
  <span>World</span>
</div>

The solution will be:

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>

  <script type="module">
    const rootElement = document.getElementById('root')
    const helloElement = React.createElement('span', null, 'Hello') // null means not attributtes assigned to the span
    const worldElement = React.createElement('span', {children: 'Hello'}) // we can use this way too
    const element = React.createElement('div', {
      className: 'container',
      helloElement,
      worldElement,
    })
    ReactDOM.render(element, rootElement)
  </script>
</body>

Result:

By Cristina Rojas.