crud operation react js

Crud Operation React JS#

When building a web application, it's essential to have the ability to perform CRUD operations on your data. CRUD stands for Create, Read, Update, and Delete. ReactJS is a popular JavaScript library used for building web applications. It provides efficient tools and techniques for developing scalable and dynamic user interfaces.

Create operation#

Creating new data in a ReactJS application is a straightforward process. You can use the React state to store the form data entered by the user. Then, you can use an HTTP POST request to send the data to the server for storage. Here's an example:

constructor(props) {
  super(props);
  this.state = {
    name: '',
    email: '',
    phone: ''
  };
}

handleSubmit(event) {
  event.preventDefault();
  const { name, email, phone } = this.state;
  axios.post('/api/users', { name, email, phone })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.log(error);
    });
}

Read operation#

Reading data from a server in ReactJS is also easy. You can use an HTTP GET request to retrieve data from the server and store it in the component's state. Here's an example:

constructor(props) {
  super(props);
  this.state = {
    users: []
  };
}

componentDidMount() {
  axios.get('/api/users')
    .then(response => {
      this.setState({ users: response.data });
    })
    .catch(error => {
      console.log(error);
    });
}

Update operation#

Updating data in a ReactJS application involves sending an HTTP PUT request to the server with the updated data. Here's an example:

handleUpdate(id, data) {
  axios.put(`/api/users/${id}`, data)
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.log(error);
    });
}

Delete operation#

To delete data from a ReactJS application, you can use an HTTP DELETE request to remove the data from the server. Here's an example:

handleDelete(id) {
  axios.delete(`/api/users/${id}`)
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.log(error);
    });
}

These are the basic CRUD operations in ReactJS. There are many libraries and tools available that can simplify the process of creating a web application that performs CRUD operations. You can choose the one that fits your needs and requirements.