CRUD dengan React JS

Assalamualaikum wr,wb

     Pada hari ini saya akan memberi contoh tentang membuat web dengan basis CRUD menggunakan React JS.

Darimana memulai belajar react js?

     Pada saat pertama kali belajar react saya bingung bagaimana memulainya? saya mulai belajar tentang babel dan webpack, dan ini memakan waktu. jika anda pemula saya sarankan untuk memulainya dengan menginstall Create-react-app dari facebook. create-react-app adalah semacam commandline tool yang akan membantu kita membuat aplikasi reactjs secara mudah.

npm install -g create-react-app

     Setelah terinstall kita bisa mencoba membuat aplikasi yang kita inginkan, sebagai contoh saya ingin membuat aplikasi dalam folder react-tuts

create-react-app react-tuts

     Setelah selesai kita masuk kefolder react-tuts dan menginstall paket dependenciesnya

cd react-tuts
npm install
npm start

     Ok jika step diatas sudah berhasil dan anda bisa melihat hasilnya di browse maka anda sudah berhasil menginstall reactjs skeleton. Buka browser anda dan search localhost:3000, maka anda akan mendapat tampilan seperti ini :

     Kali ini saya akan membuat tutorial membuat CRUD menggunakan React JS tanpa menggunakan database, jadi nantinya saya akan mendeklarasikan variabel yang nanti nya dapat isi agar dapat di tampilkan.

     Ini lah kiranya isi source code dari projek saya.
  /src/App,js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './App.css';

class App extends Component {

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

  componentDidMount(){
    this.refs.name.focus();
  }

  fshoot() {
  alert("Great Shot!");
}

const myelement = (
  <button onClick={shoot}>Take the shot!</button>
)   

  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{                      //update
      let index = this.state.index;
      datas[index].name = name;
      datas[index].address = address;
    }    

    this.setState({
      datas: datas,
      act: 0
    });

    this.refs.myForm.reset();
    this.refs.name.focus();
  }

  fRemove = (i) => {
    let datas = this.state.datas;
    datas.splice(i,1);
    this.setState({
      datas: datas
    });

    this.refs.myForm.reset();
    this.refs.name.focus();
  }

  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();
  }  

  render() {
    let datas = this.state.datas;
    return (
      <div className="App">
        <h2>{this.state.title}</h2>
        <form ref="myForm" className="myForm">
          <input type="text" ref="name" placeholder="your name" className="formField" />
          <input type="text" ref="address" placeholder="your address" className="formField" />
          <button onClick={(e)=>this.fSubmit(e)} className="myButton">submit </button>
        </form>
        <pre>
          {datas.map((data, i) =>
            <li key={i} className="myList">
              {i+1}. {data.name}, {data.address}
              <button onClick={()=>this.fRemove(i)} className="myListButton">remove </button>
              <button onClick={()=>this.fEdit(i)} className="myListButton">edit </button>
            </li>
          )}
        </pre>
      </div>
    );
  }
}

     export default App;
   /src/App.tes.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);

});

Daftar Pustaka :
1. https://medium.com/@raidenz/tutorial-react-untuk-pemula-1-27207e8b38e3
2.https://www.youtube.com/watch?v=3vauM7axnRs