Article

How To Create React Element

In this Article, we will learn about How To Create React Element? How to render Elements?

Elements are the basically smallest building blocks of React apps. An element generally specifies what should be shown in our UI.

In this article we will learn How To Create React Element by using JSX.
First we will learn about How to create React Element using JSX.

Project Structure
how-to-create-react-element

Open index.css File from src folder
Write this css for style and It is mandatory to Import this index.css file into index.js fie.

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }
  input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

Open Index.js File from src folder
write this code in Index.js File. We are creating an Object of different type like h1 and passed it to a variable called as const element. This element will be rendered into the Browser DOM, and for that we need a container.

Here I have created an Element which contains div and div have a h1,label and input tag. we render this element to the div container

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const element=(
<div>
<h1>The input element</h1>

  <label for="fname">First name:</label>
  <input type="text" placeholder="Enter First Name" id="fname" name="fname"></input><br></br>
  <label for="lname">Last name:</label>
  <input type="text" placeholder="Enter Second Name" id="lname" name="lname"></input><br></br>
  <input type="submit" value="Submit"></input><br></br>
</div>
);
ReactDOM.render(element,document.getElementById('root1'));

Open Index.html file from Pubic folder

Open Index.html and there is a div with id as “root1”, and we will use this div as container. Yoc can give any name of div id according to your choice.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>welcome React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root1"></div>
    
  </body>
</html>

Lets save these changes and run the project.
Output

how-to-create-react-element

Leave a Reply

Your email address will not be published. Required fields are marked *