Open In App

Write code to render a button in React JS

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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:

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.

Javascript




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


Last Updated : 12 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads