4. apa itu props | belajar react js untuk pemula

4. apa itu props | belajar react js untuk pemula
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web react

apa itu props

pada tutorial kali ini kita akan belajar apa itu props pada react js dan bagaimana cara menggunakannya. props adalah sebuah properti("variabel") yang dimiliki component react yang berfungsi untuk menyimpan data atau juga untuk melempar data ke component lainya, tepatnya dari component perent ke component child.

cara menggunakan props, misalkan saya mempunya component perent yang ingin melempar data ke component child ke component anak yang saya berinama adalah Welcome

import React, { Component } from 'react';
import Welcome from "./Welcome"

class App extends Component {
  render() {
    return (
       <div classname="App">
        <welcome name="andi"/>
       </div>
     );
  }
}

export default App;

ini component childnya

import React, { Component } from 'react';
class Welcome extends Component {
  render() {
    return (
      <h1>Welcome back,{this.props.name}</h1>
    );
  }
}
export default Welcome;

teman-teman juga bisa memberikan default props pada component react, default props ini juga akan digunakan juga component perentnya tidak mengirimkan atau melempar props.

Welcome.defaultProps={
  name:'eka'
}

bisa juga dengan keyword static

static defaultProps={
  name:'eka'
}

selain memberikan nilai defaul pada props kita juga bisa memvalidasi type props yang dilempar ke component anak, cara memvalidasi props yang pertama harus dilakukan adalah dengan cara menginstall satu package yang namanya prop-types. cara install prop-types

npm install prop-types --save

jika ingin menggunakan prop-types tinggal import saja

import PropTypes from 'prop-types';

untuk menggunkan prop-types

Welcome.propsType={
    name:PropType.string
}

jika props itu wajib dikirim oleh perentnya tambahkan keyword .isRequired

Welcome.propsType={
    name:PropType.string.isRequired
}

berikut beberapa validasi yang bisa dilakukan oleh prop-types

• PropTypes.any — untuk type prop apapun
• PropTypes.bool — untuk type prop boolean 
• PropTypes.number — untuk type prop number 
• PropTypes.string — untuk type prop string 
• PropTypes.func — untuk prop berupa function 
• PropTypes.array — untuk type prop berupa array 
• PropTypes.object — untuk type prop berupa object 
• PropTypes.symbol — untuk type prop berupa symbol 

ada banyak cara yang bisa dilakukan untuk memvalidasi props menggunakan prop-types,silahkan di explore lagi jika ada yang di tanyakan silahkan lampirkan pada colom comentar
App.js

class App extends Component {
  render() {
    return (
       <div classname="App">
        <welcome name="andi"/>
       </div>
     );
  }
}

export default App;

Welcome.js

import React, { Component } from 'react';
import PropType from "prop-types"
class Welcome extends Component {
  render() {
    return (
      <h1>Welcome back,{this.props.name}</h1>
    );
  }
}
 Welcome.defaultProps={
  name:'eka'
  }
 Welcome.propsType={
    name:PropType.string
  }
export default Welcome;

Mau liat atau download source code aplikasi premium bisa disini.

Tweet