Getting Started with ReactJS Button

2 Sep 20213 minutes to read

This section explains briefly about how to create a Button in your application with ReactJS.

You can create a React JS application and add necessary scripts and styles with the help of the given link

Define an HTML element to rendering as the Button in the application and refer the JSX file. Please check with the below code example,

HTML

<body>	
    <!--Add React JS components-->
    <div id="btn"></div>

    <!-- Button.jsx created in previous step-->
    <script type="text/babel" src="Button.jsx">
    </script>
   </body>

Control Initialization with react js

Control can be initialized in two ways.

Using JSX Template.
Without using JSX Template

Using JSX Template

With the JSX template concept, we need to create the html file and JSX file. The .jsx file can be convert to .js file and it can be referred in html page.
Create a JSX file for rendering Button component with below code.

HTML

ReactDOM.render(   
		  <EJ.Button id="btn" text="Button">
</EJ.Button>,
document.getElementById('btn')
);

Run the above code to render the following output.

getting-started_images1

Configuring Button

This section encompasses the details on how you can configure the Button control in your application and customize it with various properties such as various size, resize the Button and rounded corner according to your requirement.
To render the text and size properties add the following code example in your JS file.

HTML

ReactDOM.render(   
		  <EJ.Button id="btn" text="Button" showRoundedCorner={true} size="large" text="Click here">

</EJ.Button>,
document.getElementById('btn')
);

The following screenshot illustrates the Button control with text, size and rounded corner properties.

Create a Button without using JSX template

The Button can be created from a normal script section without using JSX template file also. Please check with the below code example,

HTML

<script>
    ReactDOM.render(
    React.createElement(EJ.Button, { id: "container",text:"Button" }
    ),
    document.getElementById('container')
    );
</script>

Configure Properties

This section encompasses the details on how you can configure the Button control in your application and customize it with various properties such as various size, rename and rounded corner for Button according to your requirement.
To render the text, size and rounded corner properties add the following snippet in your HTML file.

JAVASCRIPT

<script>
    ReactDOM.render(
    React.createElement(EJ.Button, { id: "container",text:"Button",showRoundedCorner:true,size:"large",text:"Click here" }
    ),
    document.getElementById('container')
    );
</script>