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.
