For enquiries call:

Phone

+1-469-442-0620

HomeBlogWeb DevelopmentReact Create Element - React Without JSX

React Create Element - React Without JSX

Published
05th Sep, 2023
Views
view count loader
Read it in
10 Mins
In this article
    React Create Element - React Without JSX

    React has taken the top spot among all other JS frameworks and libraries, according to the StackOverflow survey, 2021. The reason might be anything from being open-source to flexible (it can work with any other package or library to create an outstanding app) or having JSX as its syntax which is very popular due to its ease of access.  

    But, JSX is not the only syntax that React has. We can also make apps without using JSX with  React.createElement() which can be declared as the only syntax of React. 

    React is an open-source library and there are many things that it has to offer to a developer like virtual DOM, Props, etc, but the thing is it can be a little difficult while learning React for the first time due to its diverse nature. This is a main reason why a comprehensive syllabus for React JS is crucial to your learning experience and can help you learn React in a structured way. 

    In this blog, we will first uncover the reason why React.createElement has been called the original Syntax of React and then we will dive deep into the topic of React without JSX or React with createElement. 

    Let's start! 

    What is React.createElement?

    React.createElement can be considered as the original syntax of React because it allows us to write codes in React with just plain JS which the browser can understand and we don't need additional bundlers like webpack, Flux, ES6, React-Router, etc.

    But with JSX, we need things like ES6 classes and the Babel webpack to convert these ES6 g into ES5 so that our browser can easily understand them. 

    Then Why JSX?

    JSX stands for JavaScript Syntax Extension which means that it is just an extension of the original syntax that has made the code readable, understandable and editable with the help of ES6 classes. 

    We can also say that it is nothing more than a syntactic form of the syntax that makes it easy to use and understand with the help of ES6 classes, and Babel that converts these classes back into ES5 for our browser to understand. 

    Every code written in JSX is first converted into createElement syntax and then sent to the browser.  

    The image given below will help you understand this concept easily. 

    Converting a code written in JSX to React.createElement using Babel 

    React.createElement Syntax

    As React developers we have a basic idea of how to write codes in React with JSX with its syntax that allows us to write both HTML and JS codes simultaneously

    Does createElement,have the same syntax as JSX? The answer is no, not by a long shot. It has its proper syntax that is as follows -  

    React.createElement(type,{props},children); 

    Where:  

    • type – the type of HTML tag we are using. 
    • props – represent properties like id, class, onClick, etc. 
    • children – represents the line that needs to be printed or displayed on the screen with the respective HTML tag and property. 

    Let us see an example of the famous Hello World! which we all have built as the very first program of any programming language, library, or framework. 

    import React from "react"; 
    const Example = () => { 
      return React.createElement("h1", { style: { color: "black" } }, "Hello World"); 
    }; 
    ReactDOM.render(React.createElement(Example), document.getElementById("root"));

    In the above example, the first argument is the H1 tag followed by its styling which can also be done by giving it an id or a className and doing the styling in a separate CSS file and as for the last attribute, we have the text that needs to be printed - Hello World!.

    Let us understand this concept in depth by making a contact list with React.createElement, but first, let's discuss each of the three arguments that the syntax has in detail. 

    React.createElement Arguments

    1. Type Argument 

    • It is very clear by the name itself that it tells React what type of HTML tag we want our output to have. 
    •  It can be h1, div, input, or any other HTML tags as long as they are written as a string.  
    • This argument can also be used to make components in React, we just have to pass it as a variable that the component is assigned to rather than as a string. 

    2. Props Argument 

    • We all know what React props are and how useful they are in the world of React. In JSX, we can only pass the state variables and certain functions as props to the child component. 
    • But here, props are used for styling the HTML tag using the style attribute, or we can give it a className or an id to keep our code clean and less confusing. 
    • It is also used to specify other properties which you might want your HTML tag to have like onClick event handler, attributes like ‘value’, ‘mailto’, etc. 
    • We can also give our app the key property which React is concerned about and there is a reason for the concern.  
    import React from "react"; 
    const Example = () => { 
      return React.createElement("h1", { key: "contact.id" }, "Hello World"); 
    }; 
    ReactDOM.render(React.createElement(Example), document.getElementById("root"));

    3. Child Argument

    • This argument is used for displaying texts in our apps like Hello World, or any other text with the prop attribute and the type of HTML tag specified. 
    • Another thing that we can do with this attribute other than displaying text is we can make nested elements like the h1 tag inside a div tag.  

    See the below image where on one side we have written code in JSX and the other without it:  

    Difference between JSX and React.createElement syntax  

    It should be quite clear from the above image how to write different lines of code in a nested form in our React app without JSX.

    As you can see, we have used the href attribute of the <a> tag as a prop argument and printed the email address with that.

    Understanding the Render Method

    The render statement of ReactDOM takes two arguments as well-  

    • React Element  
    • Container Element

    Putting it simply -  

    ReactDOM.render(React Element, Container Element); 

    Where - 

    • React Element - specifies what to render. 
    • Container Element - specifies when to render. 

    Sometimes the React Element in the ReactDOM.render can also have children of its own. 

    See the example below from the React documentation:

    import React from "react"; 
    const Example1 = () => { 
      return React.createElement("div"null, `Hello ${props.toWhat}`); 
    }; 
     
    ReactDOM.render( 
      React.createElement(Example1, { toWhat: "World" }, null), 
      document.getElementById("root") 
    ); 

    What is the first thing that comes to mind after seeing the above code? PROPS - we are sharing data between elements or components to give our app a dynamic touch.  

    But don’t forget the basic rule of React that props can be passed only from the Parent Component to the Child Component. 

    Notice that we're using React.createElement with Example as a parameter to ReactDOM.render. This is because we need an instance of the Example Component to render it. 

    That's what it does, it makes an instance out of it for rendering. 

    Understanding the React.createElement with the help of an example

    The above sections only explained parts of the process. Let us now take a real-world example so that we can understand things better.  

    "The createElement syntax is not very commonly used as told already but using JSX does not mean that we have learnt how to properly use React. Their is a structured way to learn every programming language and Reatc is no exception. For that check out this online web development certification. It will help and guide you in learning React JS the proper way” 

    Let's make a contact list as an example. 

    import React from "react";
    const Example = () => { 
      return React.createElement( 
        "div", 
        {}, 
        React.createElement("h1", {}, "Contacts") 
      ); 
    }; 
     
    ReactDOM.render( 
      React.createElement(Example), 
      document.getElementById("react-app") 
    ); 

    Our contact list will have parent components and several child components, and we will understand them as we move on.  

    import React from "react";
    const Example = () => { 
      return React.createElement( 
        "div", 
        {}, 
        React.createElement("h1", {}, "Contacts"), 
        React.createElement( 
          "ul", 
          {}, 
          React.createElement( 
            "li", 
            {}, 
            React.createElement("h2", {}, "James Nelson"), 
            React.createElement( 
              "a", 
              { href: "mailto:james@jamesknelson.com" }, 
              "james@jamesknelson.com" 
            ) 
          ) 
        ) 
      ); 
    }; 
     
    ReactDOM.render( 
      React.createElement(Example), 
      document.getElementById("react-app") 
    ); 

    In the above code, we have made our first child component - li under the parent component - ul that contains the name in h2 tag and an email id inside the <a> tag with href as its attribute that falls under the category of props arguments. 

    We will create a set of 4 contacts with their name and email id in this way.

    import React from "react"; 
    const Example = () => { 
      return React.createElement( 
        "div", 
        {}, 
        React.createElement("h1", {}, "Contacts"), 
        React.createElement( 
          "ul", 
          {}, 
          React.createElement( 
            "li", 
            {}, 
            React.createElement("h2", {}, "James Nelson"), 
            React.createElement( 
              "a", 
              { href: "mailto:james@jamesknelson.com" }, 
              "james@jamesknelson.com" 
            ) 
          ), 
          React.createElement( 
            "li", 
            {}, 
            React.createElement("h2", {}, "Joe Citizen"), 
            React.createElement( 
              "a", 
              { href: "mailto:joe@example.com" }, 
              "joe@example.com" 
            ) 
          ), 
          React.createElement( 
            "li", 
            {}, 
            React.createElement("h2", {}, "Zoe Clara"), 
            React.createElement( 
              "a", 
              { href: "mailto:zoe@exxample.com" }, 
              "zoe@exxample.com" 
            ) 
          ), 
          React.createElement( 
            "li", 
            {}, 
            React.createElement("h2", {}, "Albert Sharma"), 
            React.createElement( 
              "a", 
              { href: "mailto:sharma.A@example.com" }, 
              "sharma.a@example.com" 
            ) 
          ) 
        ) 
      ); 
    }; 
    ReactDOM.render( 
      React.createElement(Example), 
      document.getElementById("react-app") 
    ); 

    The output is as follows -

    Adding Attributes or Properties 

    We have a Prop Argument in the syntax which  allows us to add custom properties or attributes or even styling, and that‘s what we will be doing in this section. We will define some custom coloring to the names of our contact list. 

    import React from "react";
    const Example = () => { 
      return React.createElement( 
        "div", 
        {}, 
        React.createElement("h1", {}, "Contacts"), 
        React.createElement( 
          "ul", 
          {}, 
          React.createElement( 
            "li", 
            {}, 
            React.createElement("h2", { style: { color: "red" } }, "James Nelson"), 
            React.createElement( 
              "a", 
              { href: "mailto:james@jamesknelson.com" }, 
              "james@jamesknelson.com" 
            ) 
          ), 
          React.createElement( 
            "li", 
            {}, 
            React.createElement("h2", { style: { color: "green" } }, "Joe Citizen"), 
            React.createElement( 
              "a", 
              { href: "mailto:joe@example.com" }, 
              "joe@example.com" 
            ) 
          ), 
          React.createElement( 
            "li", 
            {}, 
            React.createElement("h2", { style: { color: "orange" } }, "Zoe Clara"), 
            React.createElement( 
              "a", 
              { href: "mailto:zoe@exxample.com" }, 
              "zoe@exxample.com" 
            ) 
          ), 
          React.createElement( 
            "li", 
            {}, 
            React.createElement( 
              "h2", 
              { style: { color: "brown" } }, 
              "Albert Sharma" 
            ), 
            React.createElement( 
              "a", 
              { href: "mailto:sharma.a@example.com" }, 
              "sharma.a@example.com" 
            ) 
          ) 
        ) 
      ); 
    }; 
    ReactDOM.render( 
      React.createElement(Example), 
      document.getElementById("react-app") 
    ); 

    This time our contact list will look like this:

    There are endless possibilities even with this syntax as we have seen in the above code. We can use any HTML tag, attribute, event handler, custom styling, etc.  

    Don’t forget to use the proper naming conversion and reserved keywords as they are part of React documentation and apply to both JSX and createElement. 

    An Alternate Way

    We have seen many codes in such a small blog, but there was one thing common that might have become responsible for the decline of createElement in React, the use of React.createElement(). 

    We have to write this whenever we have to define or make a parent or child component, just like in the above code where we have made the contact list.

    React developers also came up with a solution to handle this problem. Check out the code below and tell me which syntax is better to use. 

    import React from "react"; 
    const e = React.createElement();  
    const Example = () => { 
      return e("li"null"Todo Item"); 
    };  
    ReactDOM.render( 
      e(Example), 
      document.getElementById("react-app") 
    ); 

    If we use this method and update the code of our contact list, it will look something like this -   

    import React from "react"; 
    const e = React.createElement; 
    const Example = () => { 
      return e( 
        "div", 
        {}, 
        e("h1", {}, "Contacts"), 
        e( "ul",{}, 
          e( "li", {}, 
            e("h2", { style: { color: "red" } }, "James Nelson"), 
            e("a",{ href: "mailto:james@jamesknelson.com" }, "james@jamesknelson.com") 
          ), 
          e("li", {}, 
            e("h2", { style: { color: "green" } }, "Joe Citizen"), 
            e("a", { href: "mailto:joe@example.com" }, "joe@example.com") 
          ), 
          e("li", {}, 
            e("h2", { style: { color: "orange" } }, "Zoe Clara"), 
            e("a", { href: "mailto:zoe@exxample.com" }, "zoe@exxample.com") 
          ), 
          e( "li", {}, 
            e("h2", { style: { color: "brown" } }, "Albert Sharma"), 
            e("a", { href: "mailto:sharma.a@example.com" }, "sharma.a@example.com") 
          ) 
        ) 
      ); 
    }; 
    ReactDOM.render(e(Example)document.getElementById("react-app")); 

    Writing code in React with createElement syntax in the above way is easier than writing React.createElement every time while making a new element. 

    Wrapping It Up

    With this blog, we have only scraped the upper layer of React without JSX, and there is much more to learn.

    We did manage to learn many things like React.createElement is the original syntax of React as the browser understands code written in this format, and JSX is just a way to simplify and beautify things up as we have seen the code of React.createElement in action.  

    Looking for a Python programming course near me? Unleash your coding potential with Python, the versatile language that powers everything from AI to web development. Join us and unlock endless possibilities!

    The Route Most Taken

    React.createElement is the initial syntax of React using which we can write codes in React which can be easily understood and implemented by the browser. 

    But when it comes to JSX, it uses ES6 classes to make the code more readable, editable, and understandable by everyone which is then converted by Babel back to React.createElement syntax as we have seen in the blog which is the language that browsers understand pretty well and show us our desired results. 

    React is one of the many Libraries and Frameworks out there which are in high demand by companies as they make development easier and are efficient too. If you want to know more about these other libraries and frameworks and want a certificate that showcases your skill, consider signing up for an React JS syllabus by Knowledgehut. 

    Profile

    Ateev Duggal

    Blog Author

    "I am Ateev Duggal, a front-end web developer, and a blogger. I write blogs mainly on React JS and have an experience of over 1.5 years of freelancing. I have worked on both static and dynamic projects again using React JS like a table to show clients data which was fetched using API, a review slider, pagination component, etc, and many websites like Parent, landing pages for Ataota, and many more.
    Some of my blogs have been published on freecodecamp, dev.to, Medium, Hashnode, and many other blogging platforms and developer's communities.
    My Primary skills not only include React JS but HTML5, CSS3, JS, Jquery, Git, and Bootstrap also. You can visit my GitHub Profile and LinkedIn profile for more information about me or you can visit my Website at tekolio.com".

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Select
    Your Message (Optional)

    Upcoming Web Development Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon