Day 2: React Rendering - From Confusion to Clarity

Welcome back to the second day of our journey into the world of React! Today, we're debunking myths and unveiling the true power of rendering JSX elements. Let's dive in and demystify the magic!

Misconception: Using .append() for JSX

Our second day started with an experiment. I thought, "Hey, why not just use .append() to slot JSX into the DOM?" But guess what? The outcome was anything but expected. Instead of a sleek UI, my browser displayed the bizarre [object Object][object Object]. A head-scratcher indeed!

Clarification: The Right Way with React

Soon, the fog lifted. React has its own rendering dance, and it's not a .append() waltz. Enter ReactDOM.render(), the key to the kingdom. This method taught me a vital lesson: let React work its magic.

Taking on the Code

Let's embark on a code escapade to witness this transformation.

Code Example 1: Experimenting with .append()

import React from 'react';

function App() {
  const jsxElement = <div>AOA, JSX!</div>;

  const rootDiv = document.getElementById('root');
  rootDiv.append(jsxElement);

  return null;
}

export default App;

In this trial, I bet on rootDiv.append(jsxElement) as the silver bullet. But no, the browser had other ideas and handed me the perplexing [object Object][object Object].

Code Example 2: The Right Way - ReactDOM.render()

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const jsxElement = <div>AOA, JSX!</div>;

  ReactDOM.render(jsxElement, document.getElementById('root'));

  return null;
}

export default App;

As I surrendered to the wisdom of ReactDOM.render(), the browser applauded. The JSX element materialized, and the words "AOA, JSX!" greeted me warmly.

Final Code Example: The Revelation

import React from 'react';
import ReactDOM from 'react-dom';

// Define the JSX element
const jsxElement = <div>AOA, JSX!</div>;

// Render the JSX using ReactDOM.render()
ReactDOM.render(jsxElement, document.getElementById('root'));

// Note: Here, we return null. ReactDOM.render() does the heavy lifting.
export default function App() {
  return null;
}

As we conclude our journey today, remember that rendering isn't just about visuals; it's about creating experiences. Join me tomorrow as we journey deeper into the heart of React!