Pengertian State

State adalah data private sebuah component. Data ini hanya tersedia untuk component tersebut dan tidak bisa di akses dari component lain

Pengertian Props

Prop singkatan dari Property , Property yaitu data-data yang ada di dalam class, dan kebalikan dari state, yaitu  bisa diakses dari Luar

untuk lebih jelasnya mari kita implementasi mengenai state dan props dari pada cuma teori yang bikin bingung,

Ok kita lanjut ke TKP, untuk teman teman mari kita instal lagi recat js nya

Untuk Proses instalasinya seperti di bawah ini: buka cmd dan saya saranin untuk Proses instalasinya silahkan simpan di drive D Aatu I,

Jika cmd atau terminal sudah terbuka selanjutnya paste perintah berikut di terminal masing masing

npx create-react-app state dan props

Jika proses instalasi sudah selesai silahkan buka folder Project  statedanprops di text editor masing masing

Untuk struktur folder nya silahkan sesuaikan dengan gambar diatas

Jika sudah selanjutnya buat file State.jsx didalam folder state dan masukan script seperti yang ada di bawah ini:

import React, {Component} from 'react';

class Kursus extends Component {
  constructor(props) {
    super(props);
    this.state = {
      paket: "kursus programing",
      materi: "Raeact js",
      desc: "belajar react js",
      Harga: 200000
    };
  }
  render() {
    return (
      <div>
        <h1>Nama Paket      : {this.state.paket}</h1><br/>
        <h1>Jenis Materi    : {this.state.materi}</h1><br/>
        <h1>Deskripsi paket : {this.state.desc}</h1><br/>
        <h1>Nama Paket      : {this.state.Harga}</h1><br/>

      </div>
    );
  }
}

export default Kursus;

 

Penjelas dan dari script diatas

1. Constructor adalah spesial method untuk membuat dan meng-inisialisasi sebuah objek yg  dibuat dengan kelas
2. sedangkan Props merujuk ke konstruktor kelas induk. Untuk kelas induk yaitu Component

Jika sudah buka kembali file App.js

import React from 'react';
import Kursus from './state/State';

function App() {
  return (
    <div className="wraperapp">
        <Kursus/>
        <p>contoh state</p>
       
    </div>
  );
}


export default App;

Kemudian jalankan npm start di terminal

 

Ok utnuk pembahsan state saya rasa bisa mengikutis slanjutnya kita akan implementasi dengan Props

Didalam folder src buat folder dengan nama props dan buat file dengan nama props.jsx

import React from 'react';
import './style.css';

const Materi = (props) => {
   return(
       <div className="wrraper">
            <div className="content">
                <div className="gambarpaket">
                   <img src={props.img} className="imagesliderr"/>
                   
                </div>
                <p className="des">{props.des}</p>
                <p className="des">{props.harga}</p>
            </div>
            
           
       </div>
      
   )
}


export default Materi;

Jika sudah selanjutnya kita akan mempercantik tampilanya dengan css buat file style.css didalam folder props

.wrraper{
    height: 600px;
    display: inline-block;
    margin-right: 20px;
}
.content{
    width: 350px;
    float: left;
    background-color: cornflowerblue;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(25,38,171,1);
    -moz-box-shadow: 10px 10px 5px 0px rgba(25,38,171,1);
    box-shadow: 10px 10px 5px 0px rgba(25,38,171,1);
}
.imagesliderr{
    width: 350px;
    border-bottom: 2px dashed gainsboro;
}
.des{
    text-align: center;
    font-weight: bold;
}

.wraperapp{
    width: 1200px;
    margin: auto;
}

 

kemudian buka kembali file App.js dan tambahkan script berikut:

import React from 'react';
import Kursus from './state/State';
import Materi from './props/Prop';
import './props/style.css';

function App() {
  return (
    <div className="wraperapp">
        <Kursus/>
        <p>contoh state</p>
        <hr/>
        <Materi img={require('./props/kursus-seo-offline.png')} des="belajar seo" harga="120000"/>
        <Materi img={require('./props/kursuse.jpg')} des="belajar google adword" harga="400000"/>
        <Materi img={require('./props/kursus-seo-offline.png')} des="belajar React js" harga="50000"/>

       
    </div>
  );
}


export default App;

kemudian ok selanjutnya kita cek hasil kerja keras kita caranya buka kembali cmd nya  dan jalankan npm start