Understanding React and ReactDOM

The first line — import React from 'react'; - brings in the React module from your React library. It also creates an Object called React which you can tap into pre-written methods. For example, createElement() is a method that belongs in the React object. createElement() is also how React renders things into HTML. When you're using JSX, JSX compiles and transforms your code into a React.createElement() call. Note: You can write React ‘code’ without JSX, but it means that you will need to format everything to fit with createElement() method requirements. The next line after import React from 'react'; is import ReactDOM from 'react-dom';. This line imports methods that are available from react-dom and makes it accessible through the Object named ReactDOM. When you are rendering your React component, you are doing it via ReactDOM.

Note: the DOM is not something that is new or exclusive to React. It is part of HTML and lets you hook into different parts of the document. Here’s a piece about DOMs I wrote a while back if you want to learn more.