Build A ReactJS Powered CRUD Application

React was first deployed on Facebook's Newsfeed in 2011. After a full year of testing, it was next deployed on Instagram in 2012.

React was first deployed on Facebook's Newsfeed in 2011. After a full year of testing, it was next deployed on Instagram in 2012.

ReactJS is a popular option for creating Javascript powered UI. It is commonly used for building the UI of single-page apps. In the app's architecture, it is used to develop and handle the View layer. The best thing about React is that you could create reusable components that could be used in similar projects.

React is mainly used to create web applications in which data is changed without reloading the page. In effect, React is simple to use, scalable and fast enough for all major web apps. The library ensures that the View component of the MVC model and works vry well with all other libraries at this layer such as Angular.

In this article , I will demonstrate the simple CRUD application using React.

Prerequisites

For the purpose of this tutorial, I assume that you have a PHP application installed on a web server. My setup is,

• PHP 7.1
• Node.js with NPM
• React

To make sure that that I don’t get distracted by server level issues, I decided to host my PHP Cloud on Cloudways managed servers because it takes care of server level issues and has a great devstack right out of the box. You can try out Cloudways for free by signing up for an account .

Install Node.js with NPM

The first step is the installation of Node.js with NPM.

For this, first install Node.js. Next go to the project’s folder and type the following command in the terminal:

1. npm init
2. npm install

Create the React Application

After successfully installing npm, I will go to the SSH terminal, and type the following command to create the React app folder.

1. create-react-app my-app
2. cd my-app
3. npm start

Constructor

Let’s open App.js and put the following code in the App class,

constructor(props) {
    super(props);
    this.state = {
        title: 'Simple React curd Apps',
        act: 0,
        index: '',
        datas: []
    }
}

 

Create the View

First, I will create the view. In this case, I will create a basic form structure that contains the Name and Information fields. Next, open the App.js file, and paste the following code in return()

<div className="App">
    <header className="App-header"> <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">{this.state.title}</h1>
    </header>
    <form ref="myform" className="myForm"> <input type="text" ref="name" placeholder="Your Name" className="formfield" /> <input type="text" ref="address" placeholder="Your Information" className="formfield" /> <button onClick={this.fSubmit} className="myButton"> Submit</button> </form>
    <pre>
{datas.map((data , i) =>
<li key={i} className="myList">
{i + 1} . {data.name} , {data.address}
<button onClick={() =>this.fEdit(i)} className="myListButton">Edit</button>
<button onClick={() =>this.fRemove(i)} className="myListButton">remove</button>
</li> )}
</pre> </div>

 

 In the above code, I created a basic form and then called the title. I also mapped the concepts around the usage of the “map” method to traverse and display a list of similar objects representing a component in ReactJS.

 

CSS File

For styling the application , I wrote my own css that you could add to app.css file. If you have your own ideas about styling, you could easily add your own css.

.App {
    text - align: center;
    margin: auto;
    width: 50 % ;
}.myForm {
    width: 95 % ;
    background - color: #dfee;
    border - radius: 5 px;
    padding: 20 px;
}.App - logo {
    animation: App - logo - spin infinite 20 s linear;
    height: 80 px;
}.App - header {
    background - color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
.formfield{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid # ccc;
    border - radius: 5 px;
    box - sizing: border - box;
}.myButton {
    width: 100 % ;
    background: #14d182;
color:white;
padding: 14px 20;
margin: 8px 0px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.myList{
list-style: none;
}
.myListButton{
display: inline-block;
height: auto;
width:auto;
border-radius: 5px;
border:0;
padding:1%;
margin:1%;
background-color:# 14 d182;
    color: white
}
@keyframes App - logo - spin {
    from {
        transform: rotate(0 deg);
    }
    to {
        transform: rotate(360 deg);
    }
}

 

Add Component

To add components, I first use ComponentDidMount because it is executed after the first render, only on the client side. This is also the area where AJAX requests and/or state updates (DOM) happens. This method is also used for adding integration with other JavaScript frameworks and any functions that offer delayed functionality execution (for instance for setTimeoutor setInterval).

In this case, I need focus() on name. Thus, I have used it inside ComponentDidMount this.refs.name.focus().

componentDidMount() {
    this.refs.name.focus();
}
fSubmit = (e) => {
    e.preventDefault();
    console.log('try');
    let datas = this.state.datas;
    let name = this.refs.name.value;
    let address = this.refs.address.value;
    if (this.state.act === 0) { //new
        let data = {
            name,
            address
        }
        datas.push(data);
    } else {
        let index = this.state.index;
        datas[index].name = name;
        datas[index].address = address;
    }
    //datas.push(data);
    this.setState({
        datas: datas,
        act: 0
    });
    this.refs.myform.reset();
    this.refs.name.focus();
}

 

This is how the application will look at this point:

 

Edit Component

For the Edit component, just copy the following code and paste it into the app.js file,

fEdit = (i) => {
    let data = this.state.datas[i];
    this.refs.name.value = data.name;
    this.refs.address.value = data.address;
    this.setState({
        act: 1,
        index: i
    });
    this.refs.name.focus();
}

 

Just edit and click the Submit button to update your records.

 

Remove Component

For the Remove component, paste the following code in the app.js file .

fRemove = (i) => {
    let datas = this.state.datas;
    datas.splice(i, 1);
    this.setState({
        datas: datas
    });
    this.refs.myform.reset();
    this.refs.name.focus();
}

 

I have remove the first record and you can see the result.

 

Conclusion

React is very a simple and lightweight library that only deals with the view layer. It is not a beast like other MVC frameworks such as Angular or Ember. Any Javascript developer can understand the basics and start developing an awesome web application after only a couple of days reading tutorials.