Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Write a code to render a button in ReactJS

  • Last Updated : 22 Oct, 2021

React is a UI library . It renders components written in JSX .  You can build and render any components as per your usage. 

Approach: Let us create a React project and then we will create a UI which renders a button . User can interact with the UI and click on the button to trigger an event through this. 

Creating React Project:

Step 1: To create a react app you need to install react modules through npx command. “Npx” is used instead of “npm” because you will be needing this command in your app’s lifecycle only once.

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: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new components user makes or the code changes we will be performing will be done in the source folder.

Project_Structure

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

App.js




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: Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the image. Click on the button to see the welcome message.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!