Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Mengenal React.js
Sebuah Organisme yang tidak suka ngopi.
23 Mei 2018

Halo teman-teman, ketemu lagi nih. pada artikel kali ini saya akan mengenalkan secara singkat tentang library yang keren dan cukup hype nih.

oh iya ini library di tulis dengan javascript. kita akan mengenal secara singkat mengenal react.js.

Apa sih itu react.js ?? , ituh tuh...., yang dipakai facebook. yups bener!!. singkatnya sebuah library untuk membantu kita nih dalam membangun antarmuka web biar interaktif dan tentunya cepat, mudah di pelajari dan enak pokoknya. enak ?? emang nasi bungkus bang :v . hehehe

oh iya si react ini sensitive case, jadi perluh perhatian...,, hmm, gaya penulisannya bisa CamelCase (kapital pada huruf depan) atau yang lain tergantung sih.

Mengenal Components

woke pertama sih, kita akan membahas komponen. dalam pengembangan antarmuka kita harus memahami komponen - komponen. yups komponen. di tata sistem sisi server atau bahasa kerennya backend. wkwk, sok keren lah. kita sering pakai oop lah atau konsep mvc. nah di pengembangan sisi client pakai react ini temen-temen harus paham tatanan life cycle si komponen tersebut.

Di react.js ini pengembangan aplikasi dibangun berdasarkan komponen. dan bukan template yak. bukan kayak rumput sebelah. eh tetangga sebelah. tapi intinya sama sih. temen-temen bisa bikin tuh si komponen dengan memanggil method "createClass" untuk buat si komponen pada object.

contohnya..,,,

 var Tombol = React.createClass({
         render: function(){
                 return (
                         <input type="submit" />
                 );
        }
 }); 

method "createClass" ini berisi suatu argumen untuk si komponennya. temen-temen lihat function render() digunakan agar bisa memasukan komponen lain atau object pada komponen tersebut.

Mengenal JSX (Javascript Syntax Extension)

Kalau kenalan react.js gk afdol kalau gk kenal apa itu jsx, ea...., jsx itu ibarat kerangka pada web..., ala-ala html gituh tapi tidak html ya..,. intinya sebuah ektension yang mana kita dapat menulis pada kerangka tersebut kode javascript. hmm,, menurutku mirip" XML sih tags-tags nya.

Mengenal Multiple Component

React.js ini, kita bisa memakai fitur nasted komponen yang mana terdapat komponen dalam komponen. ya seperti mainan lego kayak anak kecil gituh. untuk membangun sebuah mobil. kita pakai beberapa komponen misal balok ada rodanya dan balok biasa. contoh sederhananya pada antarmuka web.

var Roda = React.createClass({
    render: function(){
        return (
            <div>
                <h3>Ini Komponen Roda</h3>
            </div>
        );
    }
});
var App = React.createClass({
    render: function(){
        return (
            <div>
                <h1> Mobil cuyy</h1>
                <Roda />
            </div>
        );
    }
});
React.render(<App />,  document.getElementById("content"));

Didalam kode tersebut anda bisa melihat method "React.render()" , si doi itu digunakan untuk mendaftarkan kedua komponen tersebut agar ter-render pada halaman web. dia meload komponen sebagai root komponen.

Mengenal Props & State

hmm, ada dua type sebuah data pada library react.js yaitu props dan state. terkadang saya sering kebalik dalam penggunaannya. wkwkw, nasib noob :) . yang saya pahami. maaf kalau salah, mungkin bisa komentar dibawah untuk membenarkan. heheh

ok, state itu penggunaannya lebih ke private pada komponen itu sendiri(maksudnya perubahannya pada komponen itu sendiri). kalau props itu dipakai untuk pemanggilan pada komponen lebih mengarah ke ekternal/luar dan tidak bisa di kontrol oleh komponen itu sendiri.

Props

kita memahami sebuah alur data pada react.js ini. ok, pada props berfungsi sebagai storing data atau untuk passing data, kita harus membuat isi data untuk dimuat ke sebuah komponen menggunakan props.

Pada alur data pada react.js atau library lain kita biasanya mengambil data melalui service dari grab data pada server bisa menggunakan ajax atau library lainnya untuk fetch data tersebut dari API. saya memiliki contoh sederhana penggunaan props.

var BUTTONTEXT = "ini datanya yg dimuat props";
    var ButtonForm = React.createClass({
        render: function(){
            return (
                <div>
                    <h3>{this.props.text}</h3>
                    <input type="submit" />
                </div>
            );
        }
    });
    var App = React.createClass({
        render: function(){
            return (
                <div>
                    <h1>App</h1>
                    <ButtonForm text={this.props.text} />
                </div>
            );
        }
    });
    React.render(<App text={BUTTONTEXT} />,  document.getElementById("content"));

jadi alur datanya, props akan memuat nilai dari isi text tersebut dan di passing ke app komponen dan terakhir komponen tersebut akan dirender pada method React.render() , agar kita dapat mengakses nilai dari variable "BUTTONTEXT" pada tags .

State

berbeda dengan props, state ini lebih mengarah management perubahan data. perubahan tersebut melalui trigger atau intraksi pengguna dan menghasilkan sebuah nilai data.

State ini bersifat private dan hanya dimiliki oleh tiap komponen itu sendiri. tidak bisa di passing ke komponen lain. kalau ingin mempassing ke komponen lain menggunakan props. ada beberapa state misalnya.

Initializing state

state ini digunakan untuk memulai aktifitas state itu sendiri. caranya cukup simple dengan memasukan method getInitialState() pada komponen dan kita masukan nilai pada return {}.

Changing state

state ini digunakan untuk menghandle perubahan pada komponen. untuk merubah nilai pada komponen dengan memanggil method this.setState() , dan kita passing state baru dengan kode contoh seperti berikut.


var App = React.createClass({
    getInitialState: function(){
        return {
            active: true
        }
    },
    handleClick: function(){
        this.setState({
            active: !this.state.active
        });
    },
    render: function(){
        var buttonSwitch = this.state.active ? "On" : "Off";
        return (
            <div>
                <p>Click the button!</p>
                <input type="submit" onClick={this.handleClick} />
                <p>{buttonSwitch}</p>
            </div>
        );
    }
});
React.render(<App />,  document.getElementById("content"));

pada kode tersebut disisipkan method Initializing state & Changing state untuk merubah sebuah data melalui function yang kita buat. nantinya kumpulan dari komponen ini dan event" akan membentuk sebuah aplikasi web.

https://reactjs.org/docs/events.html

sekian dulu penjelasannya, saya rasa kurang lengkap. terimakasih mau membaca

Blog ini telah dibaca sebanyak 203 kali
javascript react.js

Sekilas Tentang Penulis

Febrian Dwi Putra
Sebuah Organisme yang tidak suka ngopi.

KOMENTAR

blog comments powered by Disqus
Tidak ada blog terkait.