In this tutorial we are going to create a React Element from scratch. This will show us a little bit about why we first import React and ReactDOM as well as how a JSX expression gets converted to an Object for the Browser to use. We are making use of the Create React App, however we will delete the welcome component and start at the beginning. We are going to write some React code from scratch so the first thing we need to do is delete everything in the
src folder. Here goes!
The next thing to do is to add a blank index.js file in the
src folder like so.
With that, we have this exciting blank slate from which to begin coding.
Importing React and ReactDOM
The first thing we want to do is to import a couple of modules at the top of the file. We are to import React and ReactDOM using these two lines.
import React from 'react'; import ReactDOM from 'react-dom';
Defining An Element In React
import React from 'react'; import ReactDOM from 'react-dom'; const element = <h2>Hello React!</h2>;
Inspecting Our Element
Now let’s log out that element which contains the JSX expression from above.
import React from 'react'; import ReactDOM from 'react-dom'; const element = <h2>Hello React!</h2>; console.log(element);
What we see is an Object. This object is the result of the JSX expression once it has been compiled down by Babel for use in the Browser. It is a React Element. This brings us to the virtual dom. The virtual dom is a lightweight, in-memory version of the real user interface. So this Object we see here is part of the virtual dom. Any time the state of this object changes, React will get a new React Element and compare the two in order to determine any changes. Once this is complete, the real DOM (the UI), gets updated automatically. This all happens in a split second.
Rendering To The Real DOM
Now we can render this React Element to the real DOM. This is the purpose of importing ReactDOM the way we did on-line 2. To render our element, we use this code highlighted here.
import React from "react"; import ReactDOM from "react-dom"; const element = <h2>Hello React!</h2>; ReactDOM.render(element, document.getElementById("root"));
The first argument to the ReactDOM.render() function is the element that we want to render. The second argument is the location in the real DOM where we want the element to be rendered. Now, we did delete all of the files in the src folder but we did not delete the contents of the public folder. In that public folder is an index.html file that has the root element of a react application. We can see it here.
The div with the id of root is the container for the react application. Hence, this is where our element is going to be rendered. In fact, let’s look at the browser now and see our new element!
We can look inside of developer tools to look a little more closely at how this react element is rendered to the browser. Notice the div with the id of root, and inside of that div is the element we created with JSX. We see the h2 element with the text set to Hello React!
- Beginners guide to Custom React Renderers
- React from Scratch – Noteworthy – The Journal Blog
- How to Start Building a Web App Using React – OPTASY
- Introduction To React
Create A React Element From Scratch
Start by importing React and ReactDOM. The next step is to define an element and assign a JSX expression to that element. After this, add a call to the ReactDOM.render() function to insert the element into the real DOM. Take a look at your browser and developer tools and profit from your brand new React Element created from Scratch!