ReactJS - Status

Stateadalah tempat asal data. Kita harus selalu berusaha membuat keadaan kita sesederhana mungkin dan meminimalkan jumlah komponen yang stateful. Jika kita memiliki, misalnya, sepuluh komponen yang membutuhkan data dari negara bagian, kita harus membuat satu komponen penampung yang akan menyimpan status untuk semuanya.

Menggunakan State

Kode contoh berikut menunjukkan cara membuat komponen stateful menggunakan sintaks EcmaScript2016.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Ini akan menghasilkan hasil sebagai berikut.