First React Program

This is an example of a basic React program demonstrating how to create and render elements to the DOM.

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

const Heading = React.createElement(
"h1", 
{ 
  id: "heading",
  className: "title",
  style: { color: "blue" }
}, 
"Hello world from React app!"
);

const Paragraph = React.createElement(
"p",
{ id: "description" },
"This is a simple demonstration of React's core functionality."
);

const Container = React.createElement(
"div",
{ className: "container" },
[Heading, Paragraph]
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Container />);

React elements are JavaScript objects with props, rendered into the DOM using `render()`. In this example, we:

  • Import React and ReactDOM libraries
  • Create multiple elements using React.createElement()
  • Use props like id, className, and style to customize elements
  • Nest elements within a container div
  • Render everything to the DOM via a root element

Key concepts demonstrated:

  1. React.createElement: Takes three arguments - element type, props object, and children
  2. ReactDOM.createRoot: Creates a root node for rendering React elements
  3. Hierarchy: Shows how elements can be nested within each other

Note: While this example uses React.createElement directly, modern React applications typically use JSX syntax, which is more readable and gets transpiled to these createElement calls behind the scenes.