Belajar Kilat ReactJS

Akhi Syabab

7 years ago

Kali ini kita akan belajar kilat tentang ReactJs. Sebelumnya saudara install dulu aplikasi React yang telah di buatkan oleh facebook. Jika belum dapat melihat langkah-langkah di
Link ini (Single page ReactJs)

npm start

maka akan muncul seperti ini

1. Component

Component merupakan ciri dari ReactJs, karena aplikasi yang dibangun menggunakan ReactJs adalah kumpulan dari komponen-komponen app kecil.
Buka App.js kemudian pecah menjadi beberapa komponen seperti berikut:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
          <Header />
          <Content />
      </div>
    );
  }
}
 
class Header extends Component {
    render() {
        return (
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
        );
    }
}
 
class Content extends Component {
    render() {
        return (
            <p className="App-intro">
              kali ini telah dipecah menjadi beberapa components
            </p>
        );
    }
}
 
export default App;

2. State

State merupakan tempat dimana data berasal. buka kembali file App.js kemudian ubah seperti berikut:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            header: "Ini Header dari State",
            content: "Ini Konten dari State"
        }
    }
  render() {
    return (
      <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>{this.state.header}</h2>
          </div>
          <p className="App-intro">
            {this.state.content}
          </p>
      </div>
    );
  }
}
 
export default App;

3.Props

Berbeda dengan state, Props merupakan properti dari komponen. Lebih jelasnya perhatikan contoh berikut:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
          <Header textHeader="Welcome to React" />
          <Content textContent="kali ini telah dipecah menjadi beberapa components" />
      </div>
    );
  }
}
 
class Header extends Component {
    render() {
        return (
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>{this.props.textHeader}</h2>
            </div>
        );
    }
}
 
class Content extends Component {
    render() {
        return (
            <p className="App-intro">
              {this.props.textContent}
            </p>
        );
    }
}
 
export default App;

Di dalam class Header, returnya terdapat ” this.props.textHeader ” dimana kode ini mengambil properti dari komponen tag Header

Mari kombinasikan Props dengan state

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            header: "value Header properti dari state",
            content: "value Header properti dari state"
        }
    }
  render() {
    return (
      <div className="App">
          <Header textHeader={this.state.header} />
          <Content textContent={this.state.content} />
      </div>
    );
  }
}
 
class Header extends Component {
    render() {
        return (
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>{this.props.textHeader}</h2>
            </div>
        );
    }
}
 
class Content extends Component {
    render() {
        return (
            <p className="App-intro">
              {this.props.textContent}
            </p>
        );
    }
}
 
export default App;

4. PropTypes

Apa itu PropTypes?
PropTypes merupakan library untuk menvalidasi props. Ini sangat membantu dalam meminimalkan bugs saat mengembangkan App besar. Jika props tidak benar type nya maka akan muncul warning.

import React, { Component, PropTypes } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
          <Header textHeader="Welcome to React" />
          <Content textContent="kali ini telah dipecah menjadi beberapa components" />
      </div>
    );
  }
}
 
class Header extends Component {
    render() {
        return (
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>{this.props.textHeader}</h2>
            </div>
        );
    }
}
 
Header.propTypes = {
    textHeader: PropTypes.string.isRequired
}
 
class Content extends Component {
    render() {
        return (
            <p className="App-intro">
              {this.props.textContent}
            </p>
        );
    }
}
Content.propTypes = {
    textContent: PropTypes.string.isRequired
}
 
export default App;

Code diatas kita menambahkan validasi kalau properti textHeader dan textContent berupa string. Coba ganti PropTypes.func.isRequired, maka di console browser akan ada warning seperti ini

5. Component API

Kita akan mempelajari 3 methods yaitu setState(), forceUpdate, dan ReactDOM.findDOMNode(). Kita akan mengikatnya dengan this.methods.bind(this)

Set State

setState() kita gunakan untuk update suatu state. metode ini tidak mengganti state namun hanya menambah perubahan dari semula

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
    constructor() {
        super();
        this.state = {
            header: "Ini Header dari State",
            content: "Ini Konten dari State"
        }
        this.setStateHandler = this.setStateHandler.bind(this)
    }
    setStateHandler() {
        var headerBaru = "Header Baru"
        this.setState({header: headerBaru})
    }
 
  render() {
    return (
      <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>{this.state.header}</h2>
            <button onClick={this.setStateHandler}>Klik</button>
          </div>
          <p className="App-intro">
            {this.state.content}
          </p>
      </div>
    );
  }
}
 
export default App;

Force Update

Kali ini kita coba menggunakan methods forceUpdate()

import React from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends React.Component {
   constructor() {
      super();
      super();
      this.state = {
          header: "Ini Header dari State"
      }
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
 
   forceUpdateHandler() {
      this.forceUpdate();
   };
 
   render() {
      return (
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>{this.state.header}</h2>
          </div>
          <h4 className="App-intro">
              <button onClick={this.forceUpdateHandler}>FORCE UPDATE</button>
              Random number: {Math.random()}
          </h4>
        </div>
 
      );
   }
}
 
export default App;

Find Dom Node

Kita akan memanipulasi DOM.

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
 
 
class App extends React.Component {
   constructor() {
      super();
      super();
      this.state = {
          header: "Ini Header dari State"
      }
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
 
   findDomNodeHandler() {
       var myDiv = document.getElementById('myDiv');
       ReactDOM.findDOMNode(myDiv).style.backgroundColor = 'blue';
    }
 
   render() {
      return (
        <div className="App" id="myDiv">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>{this.state.header}</h2>
          </div>
          <h4 className="App-intro">
              <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
          </h4>
        </div>
 
      );
   }
}
 
export default App;

6. Form

Kali kami tampilkan bagaimana contoh simple react bekerja menggunakan form

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            header: "Ini Header dari State",
            content: "Ini Konten dari State"
        }
        this.updateState = this.updateState.bind(this);
    }
    updateState(e) {
      this.setState({content: e.target.value});
   }
  render() {
    return (
      <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>{this.state.header}</h2>
          </div>
          <p className="App-intro">
            {this.state.content}
          </p>
          <input type="text" value={this.state.content} onChange={this.updateState}/>
      </div>
    );
  }
}
 
export default App;

Cukup sekian postingan kali ini. semoga bermanfaat, sampai jumpa di postingan selanjutnya.

written by @akhi_syabab

Akhi Syabab

Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency