Introduction
JSX stands for Javascript XML which is used to write HTML code in Javascript files and place them in the DOM without any use of explicit element creation.
Recap
In the last React Installation blog we installed a basic react application and we saw the file structure available like this -
What's Next?
Here the index.html file is responsible to render the DOM which calls a main.jsx file to render the React code. In the main.jsx file we see something like this -
This might be a little overwhelming to see all the import statements, React.StrictMode, App etc, but for now we will remove the unnecessary code and Instead of React.StrictMode tags we are now using just plain HTML as an argument in the .render() function.
How React Renders the code?
createRoot method is available in the ReactDom library to create the root React element. The createRoot method takes an argument, which is the DOM element where the React component will be rendered. In this case, it uses document.getElementById('root') to select the DOM element with the id of 'root'.
The render method is called on the root React element created in the previous step. It takes a single argument, which is the JSX code representing the code to be rendered. In this case, it is a simple paragraph element <p>Hello World!!</p>.
And finally we can see the text on the browser using http://localhost:5173
 |
Comments
Post a Comment