React is a JavaScript library that allows developers to build user interfaces using a component-based architecture. One of the key features of React is its ability to render HTML elements to the DOM.
To render HTML in React, you will first need to import the React library. Once you have React imported, you can use the React.createElement() function to create an HTML element. This function takes three arguments: the type of element you want to create, the properties you want to assign to that element, and any children elements that should be nested within it.
For example, to create a div element with a class name of "container" and a child h1 element with the text "Hello, World!", you would write the following code
Once you have created your element, you can use React's render() method to render it to the DOM. The render() method takes two arguments: the element you want to render and the DOM node where you want to render it.
For example, to render the div element we created earlier to the element with the id of "root", you would write the following code
This will add the div element with the class name of "container" and the h1 element with the text "Hello, World!" to the "root" element in the HTML file.
In React, instead of using React.createElement() and ReactDOM.render() to render elements, we use JSX. JSX is a syntax extension for JavaScript that allows you to write HTML-like elements in your JavaScript code. It is a more intuitive way of creating elements and it will look similar to HTML
For example, instead of the above code, we can write the following code
and for rendering, we use the following code:
That's it, you have successfully rendered HTML using React.
