Write code to render a button in React JS

React is a UI library. It renders components written in JSX.  You can build and render any components as per your usage. In this article, we will see how to render a button in React JS.

Prerequisites:

• NodeJS or NPM
• React JS
• JSX Syntax

Approach to render a button:

Let us create a React project and a UI that renders a button. Users can interact with the UI and click on the button to trigger an event through this. It features a button in the display that, upon clicking, activates the call method to show an alert with the message "Welcome to Geeks for Geeks!" This component is exported as the default, ready for use elsewhere in the application.

Steps to Create the React Application:

Step 1: To create a react app, install react modules through npx command.

npx create-react-app project_name

Step 2: After creating your react project move into the folder to perform different operations.

cd project_name

Project Structure:

The updated dependencies in package.json file will look like:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
  }

Example: We will create an button that sends a Welcome message i.e. Alert whenever you click the button.

import React from "react";

class App extends React.Component {
    call() {
        alert("Welcome to Geeks for Geeeks!");
    }
    render() {

        // Rendering a button
        return (
            <button onClick={this.call}>Click the button!</button>
        );
    }
}

export default App;

Step to Run the application: Open the terminal and type the following command.

npm start

Output: localhost running on http://localhost:3000