In this tutorial, we are creating a simple React JS CRUD application.
To create this we will use React CLI, but we don’t use Redux.
Before we start to create this CRUD app if you want to see a demo of this application then watch the below video.DEMO
Screenshot
Getting started
Before starting you need to install Node JS on you Machine / Computer.
After installing Node js then you need to install one more thing it’s create-react-app.
create-react-app is a tool it’s built by Facebook to help you build React Application.
How to install Create React App?
After installing Node JS, open your Terminal / Command Promptand run this command – npm install -g create-react-app.
This command will install create-react-app tool Globally on your Machine.
After installing the create-react-app then follow the below steps.
Step – 1
Open your Terminal or command prompt and go to the folder or desktop, using cd path where you want to create your Very first React Application.
Now type on your terminal create-react-app crud. crud is our app name or you can also give another name.
Step – 2
Now go inside the crud folder using cd crud and then run npm start command on your terminal for checking that your app is running correctly or not.
After that, inside the crud folder, we are seeing some files and folders, here you can see the src folder, go inside this folder and delete some files such as App.js, App.test.js, App.css, and logo.svg.
Step – 3
Before creating those files, go inside the public folder and open the index.html file on your editor.
In the head section of the index.html, you have to add the Materialize CSS CDN link to create an attractive user interface.
Now we will create our files
Inside the components folder, we will create three files – App.js, Users.js, and AddUser.js.
App.js
import React, { Component } from 'react';
import Users from './Users';
import AddUser from './AddUser';
class App extends Component{
// Default dummy data
state = {
users:[
{name:"Travis Jackson", age:18, isEditing:false},
{name:"Linda Moorhouse", age:22, isEditing:false},
{name:"Jeffrey Delgado", age:21, isEditing:false}
]
}
// (newUser) is received from AddUser.js
addUser = (newUser) => {
let users = [...this.state.users, newUser];
this.setState({
users
});
}
// when press edit button
// (i) is received from Users.js
pressEditBtn = (i) => {
let users = this.state.users;
users[i].isEditing = true;
this.setState({
users
});
}
// (i, name, age) is received from Users.js
updateUser = (i, name, age) => {
let users = this.state.users;
users[i].name = name;
users[i].age = age;
users[i].isEditing = false;
this.setState({
users
});
}
// (i) is received from Users.js
pressDelete = (i) => {
let users = this.state.users.filter((u,index)=>{
return index !== i;
});
this.setState({
users
});
}
render(){
return(
<div className="container">
<h1>CRUD with React CLI</h1>
<Users allUsers={this.state.users} pressEditBtn={this.pressEditBtn} updateUser={this.updateUser} pressDelete={this.pressDelete} />
<AddUser addUser={this.addUser}/>
</div>
);
}
}
export default App;
After that, inside the src folder, we’ll create a new folder called components and inside this components folder, we’ll create some files. To see which files we will create, see the image below.
