LAPORAN PENGENALAN REACT JS

Nama : Ahmad Rizal Priyono

Kelas : XI RPL 1
No. Absen : 04
 Latihan
1.

import './App.css';
import React, { Component } from 'react';
class App extends Component {
    render() {
        return ( 
            <div className = "App" >
            <h3 className="judul"> Ini Project Pertama React JS </h3> 
            <p className="subbjudul"> Belajar React JS itu mudah </p> 
            </div>
        );
    }
}
export default App;

2.

.judul{
    color: maroon;
    font-family: Tahoma;
    font-size: 25px;
}
.subjudul{
    color: navy;
    font-family: serif;
    font-size: 15px;
}

3. Menambahkan Bootstrap pada React JS

import './App.css';
import React, { Component } from 'react';
class App extends Component {
    render() {
        return ( 
            <div className="App container">
                <div className="alert alert-info">
                    <h3 className="text-danger">Ini Project Pertama React JS</h3>
                    <p>Belajar React JS itu mudah</p>
                    <button className="mr-1 btn btn-success">Setuju</button>
                    <button className="btn btn-info">Iya Dong</button>
                </div>
            </div>
        );
    }
}
export default App;

4. Membuat Custom Element

import React, {Component} from 'react';

class Alert extends Component {
    render(){
        return(
            <div className="alert alert-success">
                <h4>Info</h4>
                Belajar React JS itu menyenangkan
            </div>
        );
    }
}
export default Alert;

5. Membuat Custom Element menggunakan Props

-Alert

import React, {Component} from 'react';

class Alert extends Component {
    render(){
        return(
            <div className={"alert alert-"+ this.props.type}>
                <h4>{this.props.header}</h4>
                {this.props.children}
            </div>
        );
    }
}
export default Alert;
-Api

import './App.css';

import React, { Component } from 'react';

import Alert from './Components/alert.js';

class App extends Component {
    render() {
        return ( 
            <div className="App container col-sm-6">
                <Alert type="danger" header="Fatal Error">
                    Ini adalah alert dengan tipe danger
                </Alert>
                <Alert type="success" header="Berhasil">
                    Ini adalah alert dengan tipe success
                </Alert>
                <Alert type="warning" header="Warning">
                    Ini adalah alert dengan tipe warning
                </Alert>
            </div>
        );
    }
}
export default App;

6. Membuat Custom Element dengan Prop #2

-Media.js

import React, {Component} from 'react';
class Media extends Component {
    render(){
        return(
            <div className="media my-3">
                <img src={process.env.PUBLIC_URL+"/image/"+this.props.image} className="mr-3" 
alt="media" width="100"/>
                <div className="media-body text-left">
                    <h5 className="mt-0">{this.props.title}</h5>
                    {this.props.children}
                </div>
            </div>
        );
    }
}
export default Media;
-Api.js

import './App.css';
import React, { Component } from 'react';
import Media from './Components/Media.js';
class App extends Component {
    render() {
        return ( 
            <div className="App container col-sm-6">
                <Media image="IMG_1563.jpg" title="Gambar 1">
                Biar topan menghantam baja
                Mara hebat menembus rantai
                Namun tegak menentang masa
                Benteng kita menantang badai
                </Media>
                <Media image="IMG_1564.jpg" title="Gambar 2">
                Biar topan menghantam baja
                Mara hebat menembus rantai
                Namun tegak menentang masa
                Benteng kita menantang badai
                </Media>
            </div>
        );
    }
}
export default App;

7. Membuat Elemen dengan State dan Props

import './App.css';
import React, { Component } from 'react';
import Alert from './Components/alert.js';
class App extends Component {
    render() {
        return ( 
            <div className="container text-center">
            <Alert type={this.state.type} header={this.state.header}>
                {this.state.content}
            </Alert>
            <Alert>
                <h4>Alert Control</h4>
                <b className="text-left">Tipe Alert</b>
                <select className="form-control" name="type" value={this.state.type}
                onChange={this.changeTypeAlert}>
                    <option value="success">Succses</option>
                    <option value="warning">Warning</option>
                    <option value="danger">Danger</option>
                    <option value="info">Info</option>
                </select>
                <b className="text-left">Header Alert</b>
                <input
                type="text" name="header" className="form-control" value={this.state.header}
                onChange={this.changeHeaderAlert} />
                <b className="text-left">Content Alert</b>
                <input
                type="text" name="header" className="form-control" value={this.state.content}
                onChange={this.changeContentAlert} />
            </Alert>
            </div>
        );
    }
    constructor(){
        super();
        this.state = {
            type: "success",
            header: "React JS itu ...",
            content: "seru dan menyenangkan"
        }
    }
    changeTypeAlert = (event) => {
        this.setState({type: event.target.value});
    }
    changeHeaderAlert = (event) => {
        this.setState({header: event.target.value});
    }
    changeContentAlert = (event) => {
        this.setState({content: event.target.value});
    }
}
export default App;
 Praktikum
1. Body Miss Index

import './bmi.css'
import React, {Component} from 'react';
class Bmi extends Component {
  state = {
    hasil: 'Masukan Nilai!',
    bahan: {
      berat: 0,
      tinggi: 0
  }
  } 
  data = (event) => {
    let bahanNew = {...this.state.bahan}
    bahanNew[event.target.name] = event.target.value
    this.setState({
      bahan: bahanNew
    }, () => {
      console.log('value : ', this.state.bahan)
    }
    )
  }
  hitung = () => {
    let bahanNew = {...this.state.bahan}
    let bmi = bahanNew.berat / ((bahanNew.tinggi/100) ** 2)
    console.log(bmi)
    if(bmi >= 30){
      this.setState({
        hasil: 'Kegemukan (Obesitas)'
      })
    }else if (bmi >= 25){
      this.setState({
        hasil: 'Kelebihan Berat Badan'
      })
    }else if (bmi >= 18.5){
      this.setState({
        hasil: 'Normal (Ideal)'
      })
    }else {
      this.setState({
        hasil: 'Kekurangan Berat Badan'
      })
    }
  }
  render(){
    return(
        <center>
        <div className="card">
        <div className="card-header">
        Body Miss Index
        </div>
        <div className="card-body">
        <table>
        <tr>
          <td>Berat</td>
          <td><input className="form-control" name="berat" onChange={this.data}/></td>
        </tr>
        <tr>
          <td>Tinggi</td>
          <td><input className="form-control" name="tinggi" onChange={this.data}/></td>
        </tr>
        </table>
        <button href="" className="btn btn-dark" onClick={this.hitung}>Hitung</button>
        </div>  
        <div class="alert alert-info" role="alert">
        {this.state.hasil}
        </div>
        </div>
        </center>
    );
  }
}
export default Bmi;
 2. Cicilan Bank

import './bank.css'
import React, {Component} from 'react';
class Bank extends Component {
    state ={
        hasil: 0,
        bahan: {
            nominal: 0,
            bunga: 10/100,
            periode: 0
        }
    }
    changeBahan = (event) =>{
        let bahanNew = {...this.state.bahan}
        bahanNew[event.target.name]= event.target.value
        console.log(bahanNew)
        this.setState({
            bahan: bahanNew
        }, () => {
            console.log(this.state.bahan)
        }
        )
    }
    hitungNilai= () => {
        let bahanNew = {...this.state.bahan}
        let bunga = bahanNew.nominal * bahanNew.bunga
        let bungaAkhir = bahanNew.nominal*1 + bunga
        let cicilan = bungaAkhir / bahanNew.periode
    
        this.setState({
            hasil: cicilan
        })
    }
    render(){
        return(
            <center>
            <div className="layer1">
                <div className="titlelayer">
                    <h6>Cicilan Bank</h6>
                </div>
                <table>
                    <tr>
                        <td>Nominal</td>
                        <td><input className="form-control" name="nominal" onChange={this.changeBahan} /><
/td>
                    </tr>
                    <tr>
                        <td>Bunga</td>
                        <td><input className="form-control" name="bunga" value="10%" disabled /></td>
                    </tr>
                    <tr>
                        <td>Periode</td>
                        <td>
                        <select className="form-control" name="periode" onChange={this.changeBahan}>
                        <option>Pilih Periode -</option>
                        <option name="periode" value="6">6 Bulan</option>
                        <option name="periode" value="12">12 Bulan</option>
                        <option name="periode" value="18">18 Bulan</option>
                        <option name="periode" value="24">24 Bulan</option>
                        </select>
                        </td>
                    </tr>
                </table>
                
                <button className="btn btn-dark" onClick={this.hitungNilai}>Hitung</button>
                <hr/>
                <input className="form form-control" name="hasil" value={this.state.hasil} disabled />
            </div>
            </center>
        );
    }
}
export default Bank;

3. Harga Akhir
import './harga.css'
import React , {Component} from 'react';
class Harga extends Component {
    state = {
        hasil:'Hasil!',
        bahan: {
            hargaAwal: 0,
            ppn: 0,
            diskon: 0
        }
    }
    changeNilai = (event) => {
        let bahanNew = {...this.state.bahan}
        bahanNew[event.target.name] = event.target.value
        this.setState({
            bahan: bahanNew
        }, () => {
            console.log(this.state.bahan)
        }
        )
    }
    hitungNilai = ()=> {
        let bahanNew = {...this.state.bahan}
        let diskon = bahanNew.diskon / 100 * bahanNew.hargaAwal
        let ppn = bahanNew.ppn / 100 * bahanNew.hargaAwal
        let hargaakhir = bahanNew.hargaAwal*1 + ppn - diskon

        this.setState({
            hasil: hargaakhir
        })
    }
    render(){
        return(
               <center>
            <div className="layer1">
                <div className="titlelayer">
                    <h6>Hitung Harga Akhir</h6>
                </div>
                <table>
                    <tr>
                        <td>
                            <div class="form-group">
                            <label >Harga Awal</label>
                            <input name="hargaAwal" class="form-control" onChange={this.changeNilai} />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label >PPN</label>
                            <div class="input-group mb-3">
                            <input name="ppn" class="form-control" onChange={this.changeNilai} />
                            <div class="input-group-append">
                            <span class="input-group-text">%</span>
                            </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label >Diskon</label>
                            <div class="input-group mb-3">
                            <input name="diskon" class="form-control" onChange={this.changeNilai} />
                            <div class="input-group-append">
                            <span class="input-group-text">%</span>
                            </div>
                            </div>
                        </td>
                    </tr>                  
                </table>             
                <button className="btn btn-dark" onClick={this.hitungNilai}>Hitung</button>
                <hr/>
                <input className="form form-control" name="hasil" value={this.state.hasil} disabled />
            </div>
            </center>
        ); 
    }
}
export default Harga;

4. Konversi

import './bilangan.css'
import React, {Component} from 'react';
class Bilangan extends Component {

    state = {
        hasilAkhir: '',
        bahanAw: {
        pilihan: '',
        konversi: '',
        nilaiAwal: 0    
    }
}
    changeType = (event) => {
        let bahanAwN = {...this.state.bahanAw}
        bahanAwN[event.target.name]= event.target.value
        this.setState({
            bahanAw: bahanAwN
        }, () => {
            console.log(this.state.bahanAw)
        }
        )
    }
    hitungNilai = () => {
        let bahanNew = {...this.state.bahanAw}
        if(bahanNew.pilihan == 10){
            if(bahanNew.konversi == 10){
                this.setState({
                    hasilAkhir: bahanNew.nilaiAwal
                })
            }else if(bahanNew.konversi == 2){
                let decimal = bahanNew.nilaiAwal*1
                let bin = decimal.toString(2)
                this.setState({
                    hasilAkhir: bin
                })
            }else if(bahanNew.konversi == 8){
                let decimal = bahanNew.nilaiAwal*1
                let oct = decimal.toString(8)
                this.setState({
                    hasilAkhir: oct
                })
            }else if(bahanNew.konversi == 16){
                let decimal = bahanNew.nilaiAwal*1
                let hex = decimal.toString(16).toUpperCase()
                this.setState({
                    hasilAkhir: hex
                })
            }
        }else if (bahanNew.pilihan == 2){
            let bin = bahanNew.nilaiAwal*1
            let dec = parseInt(bin , 2)
            if(bahanNew.konversi == 10){ 
                this.setState({
                    hasilAkhir: dec
                })
            }else if(bahanNew.konversi == 2){
                this.setState({
                    hasilAkhir: bahanNew.nilaiAwal
                })
            }else if(bahanNew.konversi == 8){
                let oct = dec.toString(8)
                this.setState({
                    hasilAkhir: oct
                })
            }else if(bahanNew.konversi == 16){
                let hex = dec.toString(16).toUpperCase()
                this.setState({
                    hasilAkhir: hex
                })
            }
        }else if (bahanNew.pilihan == 8){
            let oct = bahanNew.nilaiAwal*1
            let dec = parseInt(oct , 8)
            if(bahanNew.konversi == 10){ 
                this.setState({
                    hasilAkhir: dec
                })
            }else if(bahanNew.konversi == 2){
                let bin = dec.toString(2)
                this.setState({
                    hasilAkhir: bin
                })
            }else if(bahanNew.konversi == 8){
                let oct = dec.toString(8)
                this.setState({
                    hasilAkhir: oct
                })
            }else if(bahanNew.konversi == 16){
                let hex = dec.toString(16).toUpperCase()
                this.setState({
                    hasilAkhir: hex
                })
            }
        }else if (bahanNew.pilihan == 16){
            let hex = bahanNew.nilaiAwal
            let dec = parseInt(hex , 16)
            if(bahanNew.konversi == 10){ 
                this.setState({
                    hasilAkhir: dec
                })
            }else if(bahanNew.konversi == 2){
                let bin = dec.toString(2)
                this.setState({
                    hasilAkhir: bin
                })
            }else if(bahanNew.konversi == 8){
                this.setState({
                    hasilAkhir: bahanNew.nilaiAwal
                })
            }else if(bahanNew.konversi == 16){
                this.setState({
                    hasilAkhir: bahanNew.nilaiAwal
                })
            }
        }
    }
    render(){
        return(
            <center>
            <div className="layer1">
                <div className="titlelayer">
                <h6>Konfersi Bilangan</h6>
                </div>
                <table>
                    <tr>
                        <td>
                            <div class="form-group">
                            <label >
                            <select className="form-control" name="pilihan"  onChange={this.changeType}>
                                <option>Pilih Bilangan </option>
                                <option name="pilihan" value="10">Decimal</option>
                                <option name="pilihan" value="2">Binner</option>
                                <option name="pilihan" value="8">Octal</option>
                                <option name="pilihan" value="16">Hexadecimal</option>
                            </select>
                            </label>
                            <input name="nilaiAwal" class="form-control" onChange={this.changeType} />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="form-group">
                            <label >Pilihan Konversi</label>
                            <select className="form-control" name="konversi" onChange={this.changeType}>
                                <option>Pilih Koversi -</option>
                                <option name="konversi" value="10">Decimal</option>
                                <option name="konversi" value="2">Binner</option>
                                <option name="konversi" value="8">Octal</option>
                                <option name="konversi" value="16">Hexadecimal</option>
                            </select>
                            </div>
                        </td>
                    </tr>
                                    
                </table>             
                <button className="btn btn-dark" onClick={this.hitungNilai}>Hitung</button>
                <hr/>
                <input className="form form-control" name="hasil" value={this.state.hasilAkhir} disabled />
            </div>
            </center>
        );
    }
}
export default Bilangan;
Sedikit Penjelasan : Konversi Bilangan saya sedikit berbeda dari apa yang di praktikum, soalnya saya mencari yang lebih
simple dan ya begini yang saya bisa

Link Github : https://github.com/AhmadRizalP/pengelananreact/