ReactJS# 3:Rendering HTML Elements in React

In this lab, we will explore how to create an HTML element in reactJS App.

HTML Element always starts with a start tag & ends with end tag and the content is always placed in between.

for example,

<h1> My ToDo App </h1>
<p> This is simple todo app to manage day to day todos</p>

React elements are plain objects.

For example, here, we can create the following a react element

const element = <h1> My ToDo App </h1>

This JSX ( Javascript XML) which allows to write HTML code in javascript easily.

The Render Function

In react, the Render function from ReactDOM is used to display the top-level root node in the browser DOM.

In our case, the top-level DOM or root level DOM is available in an index.html.

c:/codebase/todo-app/
  public/
    index.html

And, The root-level element in index.html is

   <div id="root"></div>

To Render HTML element in the browser, we need to pass new react element and root level element to the ReactDOM.Render() method.

ReactDOM.Render(<h1>My ToDo App</h1>, document.getElementById('root'))

OR
const element = <h1> My ToDo App </h1>
ReactDOM.Render(element, document.getElementById('root'))

Or we can render a react first component <App/>

ReactDOM.render(<App />, document.getElementById('root')); 

The <App> component is a react function component which will return the plain object that we defined.

 const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
     </div>
  );
}

export default App;

That’s it all about how to render HTML Element or react element into browser DOM