React is Just Javascript

Photo By Christian Wiediger

There is a quiz at the end to test your knowledge. Feel free to skip to the quiz if you think you already know about basic react!

Let's start this post with a simple function in Javascript.

1function App(){
2  console.log('Hello World'); // logs 'Hello World'
3}
4
5App();

In the above code snippet, the function call on line no 5 calls the App function which outputs 'Hello World' in the console.

Let's React!#

React is simply Javascript. A component defined in React is just a Javascript function. Consider the React component below.

1function App() {
2  return (
3    <h1>
4      Hello World
5    </h1>
6  );
7}

This component renders <h1> with a text 'Hello World' in the Webpage.

To reiterate,

A component defined in React is just a Javascript function

Just compare our plain JS code with this react code:

// JS
function App(){
  return 'Hello World';
}

// React
function App() {
  return (
    <h1>
      Hello World
    </h1>
  );
}

Now you would have these questions:

1. This is just a function declaration. Where it is being called??
2. If this is a Javascript function then, how HTML is being returned from the function? Is this even valid?
3. Also, Why is it called rendering?

Let's answer all these questions.

1. Where its being called?#

The function App() would actually be rendered by ReactDOM from react-dom package.

1import ReactDOM from "react-dom";
2import App from "./App";
3
4const rootElement = document.getElementById("root");
5ReactDOM.render(<App />, rootElement);

The Function App is called here with angle brackets like <App /> the returned HTML is rendered by ReactDOM into the rootElement.

From React 18, this has been updated with createRoot

1import { createRoot } from 'react-dom/client';
2
3const container = document.getElementById('root');
4const root = createRoot(container);
5root.render(<App />);

Read More about createRoot on the react docs

This rootElement can be any valid HTML DOM. Usually, we prefer to go with an empty <div> with the id root.

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

You should be careful, this should be an empty element because when the rendering occurs, this div's children would be replaced with the tag h1 with text 'Hello World' inserted automatically by React (ReactDOM)

1<div id="root">
2  <h1 class="App">Hello World</h1>
3</div>

2. How HTML is being returned from the function? Is this even valid?#

To start off, the HTML like thing that is returned from our App function is called JSX.

1function App() {
2  return (
3    <h1>
4      Hello World
5    </h1>
6  );
7}

Technically this JSX is just a transpiled Javascript function call (yes it sounds scary). This HTML like thing is converted to Javascript by a transpiler called babel and, Finally the App would be sent to JS engine like below code that is just pure javascript.

1function App() {
2  return (
3    React.createElement("h1", null, "Hello World")
4  );
5}

And this is the reason to import React in the module even though we don't explicitly use it.

1import React from 'react';
2
3function App() {
4  return (
5    <h1>Hello World</h1>
6  );
7}

React.createElement is top level API provided by react package to create the corresponding element in Virtual DOM.

createElement returns React elements, which are plain JS objects that describe the intended structure of the UI.

1// This JSX syntax:
2return  <h1>Hello World</h1>
3
4// is converted to this call:
5return  React.createElement("h1", null, "Hello World")
6
7// and that becomes this element object:
8{type: 'h1', props: { children: "Hello World" }}

"Babel compiles JSX down to React.createElement() calls." - Old React Docs

You can play around with Babel and its transpiled code on the live babel repl. To get to know about JSX, head-over to JSX on react docs.

Also, it is now worth pointing out that with React worked with Babel to introduce new JSX transform which enables users to write JSX without even importing React.

Starting with React 17, babel now automatically imports 'react' when needed. After the new JSX transform, our App component would compile from this

1// No import 'React' from 'react' needed 
2
3function App() {
4  return (
5    <h1>Hello World</h1>
6  );
7}

to this

1import { jsx as _jsx } from "react/jsx-runtime";
2
3function App() {
4  return (
5    _jsx("h1", {
6      children: "Hello World"
7    });
8  );
9}

React core team is making these set of changes gradually to remove the need of forwardRef in the future.

And to the most important question,

3. Why is it called Rendering ?#

In short, Rendering in Web refers to the appearance of something. On a broader picture, the terminology rendering on the web can mean a lot of things like painting, server-rendering, etc. For our understanding, Let's keep it short, Render refers to appearance of a element, or a set of elements (component) on a webpage.

From the React docs it is clear that React is

The library for web and native user interfaces

React helps us build user interfaces, not only on the Web. It helps us render something on screens that can be presented to the user.

A revisit to the example of ReactDOM API:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

The ReactDOM renders our <App /> into the <div> that we specified.

High level overview of the the rendering process:

React would create a Virtual DOM in memory which is very similar to the real DOM and renders our <h1> tag in the Virtual DOM, this virtual DOM would be synced with real DOM and during this process <h1> tag is added to real DOM. Learn more about how this works on the preserving and resetting state section.

The costliest operation on Web is DOM painting and manipulation.

If you are wondering this is too much boilerplate, why can't we just simply write HTML files and include Javascript and CSS to make it more presentable?

Yes! You are right, We can easily build a website with plain HTML, JS, and CSS and still make it cool. No one can deny it.

Where our React shines is, it will drastically simplify how we render and rerender our elements by providing set of Declarative APIs

Declarative : You just tell what you need and don't need on DOM and React would take care of that for you!

With the APIs provided by react, we can create Web Applications which are highly ⚡️ interactive, 🔥 performant and 🚀 responsive

If you want some examples, all these following websites are built with 🚀 React

• Facebook
• Airbnb
• Atlassian
• Netflix

Also, keep in mind that,

For the end-users, it is all just HTML, CSS, and JavaScript!

Quiz#

Thanks go to:

• A (Mostly) Complete Guide to React Rendering Behavior
• 10 Famous Websites Built with React JS
• React JS