Write code to render a button in React JS
Last Updated :
12 Dec, 2023
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() {
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
Share your thoughts in the comments
Please Login to comment...