How to create a Button in React app?

February 14, 2022

Buttons allow users to take action, and make choices, with a single tap. It communicates actions that users can take. So, in this article, we will see how to create a Button in React app.

They are typically placed throughout your UI, in places like Dialogs, Modal windows, Forms, Cards, and Toolbars. Creating a Button in react native is very simple. First, we have to import the button component from React Native.

import React, { Component } from 'react'
import { Button } from 'react-native'
  const Test = () => {
    return(
      <Button 
        // Define Button property
      />
    )
  }
export default Test

The above syntax shows how a button is used in react native. It involves defining an XML tag with a button element. Also, according to our requirements, different properties can be defined for a button. There are five types of Buttons which are listed below:

1) Basic Types: These fall into the basic category and can be of the following types:

Button: It is used for defining click buttons.
Submit: This type of button is used along with a form to submit details.
Reset: It is used to clear field contents on click of it.

2) Flat Button: It has a style of no background color. To create a flat button in react, set CSS class to e-flat.

3) Outline Button: This type of button contains a border with a transparent background. To create this type of button, set the CSS class as an e-outline.

4) Round Button: This button is in a circular shape. To create a round button set CSS class to e-round.

5) Toggle Button: Toggle button is a button whose state can be changed. Let us consider an example of a play and pause button. On Click of this button, its state is changed and after another click, it regains its original state. This state change function is achieved by click the event of the button. To create a toggle we need to set the isToggle property to true.

Steps to create Buttons:

Write and export the code to make the button and put it in a reusable component.
Import that component into the App.js file.
Put that button in your file the same as any other component.
Add some styling in the button file.

import React from 'react';

// Import the essential components from react-native
import {
  StyleSheet, Button, View, SafeAreaView,
  Text, Alert
} from 'react-native';

// Function for creating button
export default function App() {
  return (
    <View style={styles.container}>

      // Create a button
      <Button

        // Some properties given to Button
        title="Geeks"
        onPress={() => Alert.alert(
          'BOSC Tech Labs!')}
      />
    </View>
  );
}

// Some styles given to button
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#71EC4C',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Steps to Run Project:

Go to your project folder and type the following command on the terminal. The following command creates your project.

react-native init MyAppName

Select the App.js file and Paste the project code (complete code of project given above) then save the file. Start an emulator to run the project. The following command will launch the emulator.

emulator -avd MyAVD

Now, use run the project using the following command.

react-native run-android

Another approach to Run Project:

Open the terminal and jump into your project folder.

cd ProjectName

To run the project on Expo type the following command in your terminal.

expo start

Scan the Expo App Bar Code in your Expo App on your Mobile.

Conclusion:

So, in this article, we have been through how to create a Button in React app. Also, feel free to comment with your suggestions and feedback. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced React JS developers.

Article Source: https://bosctechlabs.com/create-a-button-in-react/

Search This Blog

bosctech