Post
Ask Question

Creating React Component Without Babel

In this article, I am going to create a simple React application with and without Babel. Often, for creating React applications, we need to install some packages and tools, like NPM, Webpack, and Babel. Here, the question is, why do we require all these packages? Can’t we create a React application without them? What is the role of these packages in React applications?
 
So, while going through this article, we will find the answers to all of the above questions. First of all, I am introducing the packages and tools required by a React application.
 

npm

 
npm stands for Node Package Manager, which is a command line interface program to manage the node.js libraries. We use npm in React applications because they allow us to install JavaScript libraries.
 

Webpack

 
Webpack is a static module bundler for modern JavaScript applications. When Webpack processes our application, it internally builds a dependency graph which maps every module our project needs and generates one or more bundles. When we create a React application, there is a chance of creating more than one module in the application. So, Webpack is used to bundle all these modules with their dependencies.
 

Babel

 
Babel is a tool that is mainly used to convert the ECMA Script 2015+ code into a backward compatible version of JavaScript in current and older browser or environment. So, Babel converts our React application's code (if it is written in ECMAScript) into JavaScript so that it can be rendered by all the browsers.
 
I hope now it is understood what kind of packages are required for React applications and what is the role of these packages in a React application.
 
Interestingly, these are not the must-have requirements for creating a React application. We can create a React application without using these packages. It’s true. For creating React applications, the least requirements are React and the ReactDOM package.
  • React package helps us in creating a component.
  • ReactDOM package helps us to render the component.
Let’s understand with a simple project.
 
Create an HTML file called “ReactWithoutBabel.html” which simply contains the following code.
  1. <html>      
  2. <head>    
  3.     <title>React App Without Babel</title>    
  4. </head>   
  5. <body>    
  6. </body>    
  7. </html>     
Now, for creating the React app, the basic requirement is to have a React package. For this, we use 2 CDN links, one for React and the second for ReactDOM. Below are the CDN link.
  1. <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>  
  2. <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>  
Use these two CDN links into HTML page. Copy and paste it below the title tag. After this, create a div inside the <body> tag with “id” attribute and give a specific id to it, like I have given below.
  1. <div id=”test”></div>  
Now, we will be creating a React component. Since React is a JavaScript library, we write the React code inside the <script> tag. 
  1. <script>  
  2.         class YourComponentName extends React.Component {  
  3.             render() {  
  4.                   
  5.             }  
  6.         }  
  7. </script>  
In the above code, change “YourComponentName” as per our component name. For example, we can create a component having the name “First”.
 
So, our component looks like below.
  1. <script>  
  2.         class First extends React.Component {  
  3.             render() {  
  4.    
  5.             }  
  6.         }  
  7. </script>  
 As we see, for creating a component, we require the Component class, and to use this class, we need to extend it. Inside the component class, there is a render() method which is responsible for creating React elements.
  1. <script>  
  2.         class First extends React.Component {  
  3.             render() {  
  4.                 return React.createElement('div', null, 'C# Corner');  
  5.             }  
  6.         }  
  7. </script>  
In the above code, we used createElement() for creating an element. It takes three arguments -
  • type - type of the HTML element or component like div, h1,h2,p, button etc.
  • props - it is used for properties of object like style, class name or event handler etc.
  • children - anything which we need to pass between the DOM elements.
A component with elements is created. Now, let us render it into DOM. For this, we use ReactDOM.render().
  1. <script>  
  2.         class First extends React.Component {  
  3.             render() {  
  4.                 return React.createElement('div', null, 'C# Corner');  
  5.             }  
  6.         }  
  7.         ReactDOM.render(  
  8.             React.createElement(Test, null), document.getElementById("test")  
  9.         )  
  10. </script>  
It takes two arguments -
  • The first argument tells us which component or element needs to be rendered in the DOM.
  • The second argument tells us where to render in the DOM.
In the above code, we didn’t use Babel. So, we created another element where our component is rendered.
 
Now, our HTML page looks like below.
  1. <html>  
  2.   
  3. <head>  
  4.     <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>  
  5. <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>  
  6.     <title>React App Without Babel</title>  
  7. </head>  
  8.   
  9. <body>  
  10.     <div id="test"> </div>  
  11.     <script>  
  12.         class First extends React.Component {  
  13.             render() {  
  14.                 return React.createElement('div', null, 'C# Corner');  
  15.             }  
  16.         }  
  17.         ReactDOM.render(  
  18.             React.createElement(First, null), document.getElementById("test")  
  19.         )  
  20.     </script>  
  21.   
  22. </body>  
  23.   
  24. </html>  
And if we run this program, the output will be something like below.
 
Creating React Component Without Babel
 
I hope you understood how a React application without Babel can be created; however, with the help of Babel, the code is very simple to write. Let's have a look.
  1. <html>    
  2.     
  3. <head>    
  4.     <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>    
  5.     <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>    
  6.     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>    
  7.     <title>React App With Babel</title>    
  8. </head>    
  9.     
  10. <body>    
  11.     <div id="test"> </div>    
  12.     <script type="text/babel">    
  13.         class First extends React.Component {    
  14.             render() {    
  15.                 return(    
  16.                     <div>    
  17.                         React Application with Babel    
  18.                     </div>    
  19.                 );    
  20.             }    
  21.         }    
  22.         ReactDOM.render(<First/>, document.getElementById("test"));    
  23.     </script>    
  24.     
  25. </body>    
  26.     
  27. </html>    
 First, import the CDN for Babel and add the type attribute inside the script, i.e., type =”text/babel”. After that, we can see that there are a lot of changes in the “First” component as well as in the ReactDOM.render() method. Now, we simply used JSX format in the component and Babel will convert it into simple JavaScript.
 
And the output of the above code is shown below.
 
Creating React Component Without Babel
 

Conclusion

 
Now, we have learned how can we create a React component with and without Babel and other packages. For practice purposes, I have attached "ReactSample" which contains two HTML files - “ReactWithBabel” and “ReactWithoutBabel” - with this article. The files cover all the pieces of the code mentioned in this article. You can download and modify this as per your different requirements.
 
All the queries related to this article and sample files are always welcome. Thanks for reading!!!


Similar Articles