Simple ReactJS CRUD Example

Simple ReactJS CRUD Example

React is a popular library nowadays. Start using to any Language, Library and Framework you need to know basic concept of them then you need to done a simple CRUD operation. CRUD operation mean you need to add data, read data, update data and delete data, These operation is CRUD operation and today in this example we will cover Reactjs CRUD operation without any database interactivity.

Simple ReactJS CRUD Example

First of all you need to create a React project by command line.

BashCopy
npx create-react-app react-crud

After all done you open react-crud folder in your terminal/Command prompt that you currently using and after that you install bootstrap css for better look.

BashCopy
cd react-crud

npm install --save [email protected]

Now open your project to any of your fav editor like VSCode, Sublime or Idea which you like.

Symlink Laravel Storage Folder on Shared Hosting

Now Open index.js file and add bootstrap css file.

JavaScriptCopy
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

After that you create a components folder in src folder and add two files

  1. AddForm.js
  2. List.js

AddForm.js

JavaScriptCopy
import {Component} from 'react';
import List from "./List";


class AddForm extends Component{
    constructor(props) {
        super(props);
        this.state = {
            dir: [],
            item:{
                name:"",
                tel:""
            },
            isEditing:false,
            temp_id:null
        }

        this.add = this.add.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.delete = this.delete.bind(this)
        this.edit = this.edit.bind(this)
        this.update = this.update.bind(this)
    }


    add(e){
        e.preventDefault();
        let dir = this.state.dir;
        dir.push(this.state.item)
        this.setState({dir :dir, item:{ name:"", tel:""}});
    }

    view(item){
        alert(
            `
            Name = ${item.name}\n
            Tel = ${item.tel}
            `
        )
    }

    edit(id){
        let item = this.state.dir[id]
        this.setState({isEditing:true, item:item, temp_id:id})
    }

    update(e){
        e.preventDefault();
        let dir = this.state.dir;
        dir[this.state.temp_id] = this.state.item;
        this.setState({
            dir :dir,
            item:{ name:"", tel:""},
            isEditing:false,
            temp_id:null
        });
    }

    delete(id){
        let dir = this.state.dir
        dir.splice(id, 1)
        this.setState({dir:dir})
    }

    handleChange(event){
        const name = event.target.name
        const value = event.target.value
        let item = this.state.item;
        item[name] = value;
        this.setState({item:item});
    }

    render() {
        return (
            <div className="col-md-6">
                <form onSubmit={this.state.isEditing ?this.update : this.add} method="POST">
                    <div className="mb-2">
                        <input type="text"
                               name="name"
                               className="form-control"
                               placeholder="Enter Name"
                               value={this.state.item.name}
                               onChange={this.handleChange}/>
                    </div>
                    <div className="mb-2">
                        <input type="text"
                               name="tel"
                               className="form-control"
                               placeholder="Enter Phone"
                               value={this.state.item.tel}
                               onChange={this.handleChange}/>
                    </div>
                    <input
                        type="submit"
                        className="btn btn-success"
                           value={this.state.isEditing ? "Update" : "Save"}/>
                </form>
                <List
                    dir={this.state.dir}
                    delete={this.delete}
                    edit={this.edit}
                    view={this.view}
                />
            </div>
        )
    }

}

export default AddForm;

List.js

JavaScriptCopy
import {Component} from 'react';


class List extends Component{
    render() {
        return (
            <div>
                <ul className="list-group mt-3">
                    {
                        this.props.dir.map((item, index)=>
                            (<li className="list-group-item" key={index}>{item.name} - {item.tel} <span className="float-right">
                                <button
                                    className="btn btn-success btn-sm mr-2"
                                    onClick={(e)=> this.props.view(item, e)}
                                >View</button>
                                <button
                                    className="btn btn-warning btn-sm mr-2"
                                    onClick={(e)=> this.props.edit(index, e)}
                                >Edit</button>
                                <button
                                    className="btn btn-danger btn-sm"
                                    onClick={(e)=> this.props.delete(index, e)}
                                >Delete</button>
                            </span></li>)
                        )
                    }
                </ul>
            </div>
        )
    }

}

export default List;

Now we need to add our AddForm Component in App.js file

App.js

JavaScriptCopy
import './App.css';
import AddForm from './components/AddForm'

function App() {
  return (
      <div className="row justify-content-center mt-3">
          <AddForm />
      </div>
  );
}

export default App;

That’s All.

Now run your project with start command.

BashCopy
npm start

After that open http://localhost:3000

You just created a CRUD operation using reactjs.

Still Confused what happen here? Check Our Video

Conclusion

React is powerful library that you can use to build reusable component and JSX also help to write html code in Javascript code. This is a simple example when you want to start your journey with REACTJS. So Keep Coding

Leave a Comment