🐉 neospace ~

📝 Latest Posts

Pure React

Jun 08, 20254 min read

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<!-- Including React library from CDN -->
	<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
	<!-- Including ReactDOM library from CDN for rendering React components -->
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
	</head>
 
<body>
	<div>id="root"</div>
</body>
	<script>
		function App() {
			return React.createElement("header", null, "Hello React!");
		}
		const root = ReactDOM.createRoot(document.getElementById("root"));
		root.render(React.createElement(App));
	</script>
</html>

In React, createElement is a fundamental method used to create React elements, which are the building blocks of a React application. The createElement() function takes three arguments:

  1. The type of the element (e.g., a string like "div" or "header" for HTML elements, or a React component).
  2. An optional props object that contains properties and attributes for the element.
  3. Any number of children elements or text nodes.

In this case, the function is called with only the first argument, "header", which means it creates a <header> HTML element without any additional properties or children. This is a common pattern in React when you want to create a simple element.

Here is a breakdown of the code:

  • React.createElement: This is a method provided by the React library to create a new React element.
  • "header": This string specifies the type of the element to be created, which in this case is an HTML <header> element.

The resulting React element can then be rendered to the DOM by React, or it can be used as part of a larger component tree. This approach is part of React’s declarative programming model, where you describe what the UI should look like, and React takes care of updating the DOM to match that description.

For example, if this line is part of a React component’s render method, it would return a <header> element to be included in the component’s output. This is a low-level way of creating elements in React, and in practice, most developers use JSX syntax, which is syntactic sugar for React.createElement. For instance, the JSX equivalent of this line would be:

return <header />;
root.render(React.createElement(App));

  1. root.render: This part of the code calls the rendermethod on the rootobject. In a typical React application, root is often a reference to a DOM element where the React application will be mounted. This is usually obtained by calling ReactDOM.createRoot on a DOM element, such as document.getElementById('root').

  2. React.createElement(App): This function call creates a new React element. React.createElement  is a fundamental method in React that creates a virtual DOM element. The first argument, App, is the component you want to render. App is typically a React component defined elsewhere in your code, either as a function or a class.

root.render(React.createElement(App)); tells React to create an instance of the Appcomponent and render it into the DOM element referenced by root. This is a crucial step in initializing and displaying your React application on the web page.

RealTime Update Dynamic Clock

This HTML file sets up a basic React application that displays the current time and updates it every second. Here’s a step-by-step explanation:

  1. HTML Structure:

    • The HTML document includes the necessary meta tags and a title.
    • The React and ReactDOM libraries are included from a CDN.

  2. React Component:

    • A function component App is defined.
    • Inside App], the current time is stored in a state variable time using React.useState
    • React.useEffect is used to set up an interval that updates the time state every second using setTime

  3. Rendering:

    • The root element is selected from the DOM.
    • The Appcomponent is rendered into the root element using ReactDOM.createRoot and root.render

Code Explanation

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Including React library from CDN -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!-- Including ReactDOM library from CDN for rendering React components -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    function App() {
      // Initialize state with the current time
      const [time, setTime] = React.useState(new Date().toLocaleTimeString());
      
      // Set up an effect to update the time every second
      React.useEffect(function () {
        const intervalId = setInterval(function () {
          setTime(new Date().toLocaleTime
          String());
        }, 1000); // 1000ms = 1s
        
        // Cleanup interval on component unmount
        return () => clearInterval(intervalId);
      }, []);
      
      // Render the current time inside a header element
      return React.createElement("header", null, `The time is: ${time}`);
    }
    // Select the root element and render the App component into it
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(React.createElement(App));
  </script>
</html>

Key Points

  • React.useState: Manages the state of the current time.
  • React.useEffect: Sets up a side effect to update the time every second.
  • React.createElement: Creates a React element to be rendered.
  • ReactDOM.createRoot: Initializes the root for rendering the React component.
  • root.render: Renders the App component into the DOM.

Graph View

Backlinks