React DOM and Component Instantiation – Connecting to HTML, Function Styles, and JSX Event Handlers

Connecting React to HTML with React DOM

In src/main.jsx, the App component is instantiated using <App /> and rendered into the HTML element with the id root:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  
    
  
);

The index.html file contains a single <div id="root"> element where React injects itself. From there, the component hierarchy begins.

Component Instantiation

Declaring a component is like defining a class, and using it in JSX is like instantiating it:

function List() { ... }

function App() {
  return (
    

      
      
    
  );
}

You can create multiple instances of a component as long as it’s declared.

Function Styles for Components

Components can be declared using either function or arrow function syntax. Arrow functions can be written with a block body or a concise body:

// function declaration
function App() { return 
...
; }

// arrow function with block body
const App = () => {
  return 
...
;
};

// arrow function with concise body
const App = () => 
...
;

If the component only returns JSX, a concise body is fine. If you need logic before the return, use a block body.

Adding Event Handlers in JSX

To add interactivity, you can attach handlers to HTML elements in JSX. For example, in the Search component, we define an onChange handler for the input field:

const Search = () => {
  const handleChange = (event) => {
    console.log(event);
    console.log(event.target.value);
  };

  return (
    

      Search: 
      
    
  );
};

In React, handlers are added declaratively via JSX attributes, unlike traditional addEventListener in HTML.

Conclusion

React DOM bridges React with HTML using createRoot and render. Function styles offer flexibility in how components are declared, and JSX handlers make it easy to add interactivity. These concepts form the backbone of dynamic and scalable React applications.