Rendering simple text

Now, we can import both libraries and render simple text. Edit src/index.js and replace the contents with the following code:

Start by importing React and ReactDOM:

import React from 'react'
import ReactDOM from 'react-dom'

Then, we use ReactDOM to render our application to the HTML DOM:

ReactDOM.render(

The first argument is a React component to be rendered. In this case, we create a new React component from the h1 element, with the hello world! content:

React.createElement('h1', {}, 'hello world!'),

The function signature for React.createElement is as follows:

React.createElement(type, props, children)

The HTML equivalent for this would be:

<type ...props>children</type>

The second argument of ReactDOM.render is the target. We select the div we defined in the index.html file, which has the ID root:

  document.getElementById('root')
)

Save the file and start the webpack via:

npm start

Then, visit http://localhost:8080/ in your browser to see the h1 element being rendered!