
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.
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.
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.
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
- AddForm.js
- List.js
AddForm.js
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
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
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.
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