Home » Tutorials » JavaScript » React For Absolute Beginners – Part 2

React For Absolute Beginners – Part 2

React For Absolute Beginners – Part 2

The Full Series

You’ve learned to understand what is JSX and how to write it on the “React for Absolute Beginners – Part 1, Getting Started with JSX! Now it’s the time to learn to render them on the screen.

ReactDOM

The ReactDOM is a JavaScript package that contains DOM specific methods to deal with the DOM.

As we all know that, DOM manipulation is necessary for building a modern web app. Unfortunately, it is also a lot slower than most JavaScript operations. It is due to most JavaScript frameworks update the DOM much more than they have to.

To address this problem, React utilize “Virtual DOM” to boosts the performance.

In React, for every DOM object, there is a corresponding “Virtual DOM object.” A Virtual DOM object is a representation of a DOM object. A Virtual DOM object has the same properties as a real DOM object.

Every time when you render or update a JSX element, the Virtual DOM gets updated. Once the Virtual DOM updated, React starts to compare the Virtual DOM with a Virtual DOM snapshot that was taken right before the update, then figures out what is the difference & update only the necessary part of the real DOM.

ReactDOM.render()

ReactDOM.render() method is the way to render JSX expression on screen. You are allows to pass 3 arguments to the ReactDOM.render(). *first 2 arguments are mandatory, 3rd argument is optional:

<script>
ReactDOM.render(
  element,
  container,
  [callback]
)
</script>

The 1st argument being passed to the render method should be the JSX element; The 2nd argument is the container for the 1st argument. It tells the ReactDOM where on the screen should that 1st argument appear?

If the 3rd argument (optional callback) is provided, it will be executed after the React element is rendered or updated.

Example:

<script>
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);
</script>

It doesn’t have to be JSX expression for the 1st argument, it could also be a variable:

<script>
var element = <div>Hello World!</div>;

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

Congratulations! You’ve learned to render JSX element on screen using ReactDOM.render() method. You’ve also learned what is the Virtual DOM & how it helps in boosting the performance. ^^

In the next chapter, you’ll learn some advanced React knowledge.


Android, iOS Development Tutorials