React components are not returning HTML & React is not magic! React is just plain Javascript Library for building powerful and interactive User Interfaces.
Let's start with a simple function in Javascript.
function App(){
console.log('Hello World'); // logs 'Hello World'
}
App();
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.
function App() {
return (
<h1>
Hello World
</h1>
);
}
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:
- This is just a function declaration. Where it is being called?
- If this is a Javascript function then, how HTML is being returned from the function? Is this even valid?
- Also, Why is it called rendering?
Let's answer all these questions.
1. Where it is being called?
The function App() would actually be rendered by ReactDOM from react-dom package.
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
The Function App is called here with angle brackets like <App /> the returned HTML is rendered by ReactDOM into the rootElement.
Read More about ReactDOM.render() 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)
<div id="root">
<h1 class="App">Hello World</h1>
</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.
function App() {
return (
<h1>
Hello World
</h1>
);
}
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.
function App() {
return (
React.createElement("h1", null, "Hello World")
);
}
And this is the reason to import React in the module even though we don't explicitly use it.
import React from 'react';
function App() {
return (
<h1>Hello World</h1>
);
}
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.
// This JSX syntax:
return <h1>Hello World</h1>
// is converted to this call:
return React.createElement("h1", null, "Hello World")
// and that becomes this element object:
{type: 'h1', props: null, children: ["Hello World"]}
"Babel compiles JSX down to React.createElement() calls." - 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
// No import 'React' from 'react' needed
function App() {
return (
<h1>Hello World</h1>
);
}
to this
import { jsx as _jsx } from "react/jsx-runtime";
function App() {
return (
_jsx("h1", {
children: "Hello World"
});
);
}
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
A JavaScript library for building 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:
ReactDOM.render(<App />, rootElement);
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. This process is called Reconciliation
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 re-render 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
Also, keep in mind that,
For the end-users, it is all just HTML, CSS, and JavaScript!
Thanks go to:
Top comments (0)