¿Cómo hacer operaciones crudas en ReactJS?

CRUD significa Crear, Leer, Actualizar y Eliminar. En ReactJS todo está alineado en forma de componente y cada componente tiene su propia forma y característica para hacerlo.

React js es una de las bibliotecas de JavaScript más utilizadas para el desarrollo de frontend. Es muy importante tener la funcionalidad básica de las operaciones CRUD con react-js. En este artículo, no usamos ningún servidor JSON o Axios para realizar la operación CRUD. Usaremos un objeto JavaScript simple para hacerlo. 

Para conocer el funcionamiento de CRUD con ReactJS y NodeJS, consulte ¿Cómo crear una aplicación CRUD básica con Node.js y ReactJS?

• Crear: crear una publicación o agregar la fila de la tabla, agregar datos a la página web o crear contenido.
• Leer: leer o recuperar datos de una página web
• Actualización: Actualización o edición de contenido existente en la página web
• Eliminar: eliminar y eliminar la entrada o el contenido/publicación de la página web

En este artículo, aprenderemos a agregar el nombre y la edad de un usuario y realizar operaciones CRUD en él.

Paso 1: Configuración de un proyecto

Asegúrese de tener node-js instalado en su computadora para crear la aplicación de reacción. Ingrese estos comandos para crear la aplicación de reacción

npx create-react-app crud_app
or
yarn create react-app crud_app

Después de instalaciones importantes, ingrese estos comandos en terminal/cmd

cd crud_app
npm start or yarn start

Esto iniciará la aplicación.

Paso 2: Estructura del proyecto

Puede deshacerse de otros archivos como el logotipo y otros archivos de prueba y eliminarlos. Aquí hay 4 archivos en componentes que son el núcleo de esta aplicación en la carpeta de origen.

1. array.js: este archivo no es un archivo de reacción sino un archivo de objeto de JavaScript simple (nuestra fuente de datos temporal). Este objeto tiene 3 valores-clave id, nombre y edad.
2. Create.js: este archivo consiste en lógica para crear la publicación o agregar una fila de tabla en la aplicación.
3. Edit.js: este archivo es responsable de editar la entrada existente.
4. Home.js: este archivo es un archivo de lectura y es responsable de mostrar información/datos.

Paso 3: Instalar la dependencia

En primer lugar, descargue esta dependencia:

Ahora, después de las instalaciones, cree una carpeta make dentro de una carpeta src que nombra los componentes. Luego haz 4 archivos js

Create.js
Edit.js
Home.js
array.js

Paso 4: Archivos de componentes: creación de archivos

// Javascript object named array with 3 key-values
const array = [
    {
        id:'1', 
        Name:'Shivansh',
        Age:'23'
    },
    {
        id:'2', 
        Name:'Simran',
        Age:'22'
    },
    {
        id:'3',
        Name:'Aakash',
        Age:'23'
    }
]
  
export default array

app.js: este archivo se usa para administrar todos los demás archivos de componentes y proporcionar enrutamiento a todos los demás componentes.

// important imports
import React from 'react'
import { BrowserRouter as Router,Route, Routes }
    from 'react-router-dom';
import './App.css';
import Create from './components/Create';
import Edit from './components/Edit';
import Home from './components/Home';
  
function App() {
  return (
    <div className='App'>
  
     <Router>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/create' element={<Create/>}/>
        <Route path='/edit' element={<Edit/>}/>
      </Routes>
    </Router>
  </div>
);
  
}
  
export default App;

Paso 5: Crear componente

import React, { useState } from 'react' 
import { Button, Form } from 'react-bootstrap' 
import 'bootstrap/dist/css/bootstrap.min.css';
import array from './array';
import { v4 as uuid } from 'uuid';
import { Link, useNavigate } from 'react-router-dom';
  
function Create() {
  
    // Making usestate for setting and
    // fetching a value in jsx
    const [name, setname] = useState('');
    const [age, setage] = useState('');
  
    // Using useNavigation for redirecting to pages
    let history = useNavigate();
  
    // Function for creating a post/entry
    const handelSubmit = (e) =>{
        e.preventDefault();  // Prevent reload
  
        const ids = uuid() // Creating unique id
        let uni = ids.slice(0,8) // Slicing unique id
  
        // Fetching a value from usestate and 
        // pushing to javascript object
        let a = name, b=age
        array.push({id:uni,Name:a,Age:b})
  
  
       // Redirecting to home page after creation done
       history('/')
         
    }
  
  return (
    <div >
        <Form className="d-grid gap-2" style={{margin:'15rem'}}>
  
  {/* Fetching a value from input textfirld 
   in a setname using usestate*/}
  <Form.Group className="mb-3" controlId="formBasicName">
    <Form.Control onChange={e => setname(e.target.value)} 
                  type="text"
                  placeholder="Enter Name" required/> 
  </Form.Group>
  
  
    {/* Fetching a value from input textfirld in
     a setage using usestate*/}
  <Form.Group className="mb-3" controlId="formBasicAge">
    <Form.Control onChange={e => setage(e.target.value)} 
                  type="text"
                  placeholder="Age" required/>
  </Form.Group>
  
    {/* handing a onclick event in button for
     firing a function */}
  <Button
  onClick={e => handelSubmit(e)}
    variant="primary" type="submit">
    Submit
  </Button>
  
  {/* Redirecting back to home page */}
  <Link className="d-grid gap-2" to='/'>
    <Button variant="info" size="lg">
      Home
    </Button>
  </Link>
  
</Form>
    </div>
  )
}
  
export default Create

Producción:

import React from 'react'
import { Button,Table } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'; 
import array from './array'; 
import { Link, useNavigate } from 'react-router-dom';
  
function Home() {
  
  let history = useNavigate()
  
  // You may skip this part if you're
  // using react-context api or redux
  function setID(id,name,age){
    localStorage.setItem('id', id);
    localStorage.setItem('Name', name);
    localStorage.setItem('Age', age);
  }
  
  // Deleted function - functionality 
  // for deleting the entry
  function deleted(id){
      
    var index = array.map(function(e) { return e.id; }).indexOf(id);
  
    // deleting the entry with index
    array.splice(index,1)
  
    // We need to re-render the page for getting 
    // the results so redirect to same page.
    history('/')
  }
  
  return (
    <div  style={{margin:'10rem'}}>
        <Table striped bordered hover size="sm">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
  
    {/* Mapping though every element in the array
    and showing the data in the form of table */}
    {array.map((item) => {
return(
<tr>
      <td>{item.Name}</td>
      <td>{item.Age}</td>
        
      {/* getting theid,name, and age for storing these
          value in the jsx with onclick event */}
      <td><Link to={`/edit`}><Button onClick={(e) =>
      setID(item.id,item.Name,item.Age)} variant="info">
        Update</Button></Link></td>
  
      {/* Using thr deleted function passing
       the id of an entry */}
      <td><Button onClick={e => deleted(item.id)} 
      variant="danger">Delete</Button></td>
    </tr>
)})}
  </tbody>
</Table>
  
{/* Button for redirecting to create page for
   insertion of values */}
<Link className="d-grid gap-2" to='/create'>
  <Button variant="warning" size="lg">Create</Button>
</Link>
    </div>
  )
}
  
export default Home

Aquí, había usado el almacenamiento local para almacenar un valor y usar los valores en otras páginas. Puede omitir esto si usa react-context-api o redux, por ejemplo.

Producción:

import React, { useEffect, useState } from 'react'
import { Button, Form } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import array from './array';
import { Link} from 'react-router-dom';
import {useNavigate} from 'react-router-dom';
  
  
function Edit() {
  
    // Here usestate has been used in order
    // to set and get values from the jsx
    const [name, setname] = useState('');
    const [age, setage] = useState('');
    const[id,setid] = useState('');
  
    // used for navigation with logic in javascript
    let history = useNavigate()
      
    // getting an index of an entry with an id
    var index = array.map(function(e) { return e.id; }).indexOf(id);
  
    // function for handling the edit and 
    // pushing changes of editing/updating
    const handelSubmit = (e) =>{
        e.preventDefault(); // preventing from reload
          
        let a = array[index] // getting an index of an array
  
        // putting the value from the input textfield and
        // replacing it from existing for updation
        a.Name = name
        a.Age = age
  
        // redirecting to main page
        history('/')
    }
  
  
    // Useeffect take care that page will be rendered only once
    useEffect(() => {
        setname(localStorage.getItem('Name'))
        setage(localStorage.getItem('Age'))
        setid(localStorage.getItem('id'))
    }, [])
      
  return (
    <div>
        <Form className="d-grid gap-2" style={{margin:'15rem'}}>
  
            {/* setting a name from the input textfiled */}
            <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Control value={name} 
                              onChange={e => setname(e.target.value)}  
                              type="text" placeholder="Enter Name" />
            </Form.Group>
  
            {/* setting a age from the input textfiled */}
            <Form.Group className="mb-3" controlId="formBasicPassword">
                <Form.Control value={age} 
                              onChange={e => setage(e.target.value)} 
                              type="text" placeholder="Age" />
            </Form.Group>
  
            {/* Hadinling an onclick event running an edit logic */}
            <Button
            onClick={e => handelSubmit(e)}
            variant="primary" type="submit" size="lg">
                Update
            </Button>
  
            {/* Redirecting to main page after editing */}
            <Link className="d-grid gap-2" to='/'>
              <Button variant="warning" size="lg">Home</Button>
            </Link>
        </Form>
    </div>
  )
}
  
export default Edit

Producción: