ReactJS - React Without ES6 ECMAScript

Halo sana, para pemrogram yang berbakat! Hari ini, kita akan memulai perjalanan menarik ke dunia ReactJS, tapi dengan perubahan - kita akan melakukannya tanpa ES6. Jangan khawatir jika Anda belum tahu apa itu ES6; kita akan menjelaskan segala sesuatunya saat kita teruskan. Bayangkan kita membangun mesin waktu untuk membawa kita kembali ke hari-hari awal React. Siap? mari kita masuk ke dalam!

Apa Itu React dan Mengapa Kita Belajar Cara "Lama"?

React adalah pustaka JavaScript yang populer untuk membangun antarmuka pengguna. Itu seperti LEGO bagi pengembang web - Anda menciptakan piece kecil, yang dapat digunakan kembali (komponen) dan menggabungkannya untuk membangun aplikasi kompleks.

Sekarang, Anda mungkin berpikir, "Mengapa kita belajar React tanpa ES6?" Well, teman-teman saya, itu seperti belajar mengemudi mobil manual sebelum otomatis. Itu memberikan Anda pengetahuan yang mendalam tentang bagaimana hal-hal bekerja di bawah kap mesin. Selain itu, Anda mungkin akan menemukan basis kode lama yang menggunakan sintaks ini, jadi baiklah untuk familiar dengan itu.

Create React Class (create-react-class)

Dalam dunia React sebelum ES6, kita menggunakan sesuatu yang disebut createReactClass untuk menciptakan komponen. Mari kita lihat contoh sederhana:

var React = require('react');
var createReactClass = require('create-react-class');

var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});

mari kitauraikan ini:

1. Kita meminta (mengimpor) React dan paket create-react-class.
2. Kita menciptakan komponen yang disebut Greeting menggunakan createReactClass.
3. Dalam komponen, kita tentukan fungsi render yang mengembalikan JSX (sintaks yang mirip HTML).

Jika kita menggunakan ES6, komponen ini akan terlihat seperti ini:

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Lihat perbedaannya? Cara createReactClass mungkin tampak lebih panjang, tetapi itu memiliki beberapa fitur unik yang akan kita jelajahi selanjutnya.

Set Default Value for Props (getDefaultProps)

Dalam React, kita sering ingin menentukan nilai default untuk props. Dengan createReactClass, kita menggunakan metode khusus yang disebut getDefaultProps. Ini adalah cara kerjanya:

var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'World'
};
},
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});

Dalam contoh ini:

1. Kita tentukan fungsi getDefaultProps yang mengembalikan objek.
2. Objek ini berisi nilai default untuk props kita.
3. Jika tidak ada prop name yang diberikan saat menggunakan komponen ini, itu akan default ke 'World'.

Jadi, jika kita menggunakan <Greeting />, itu akan menampilkan "Hello, World!". Tetapi jika kita menggunakan <Greeting name="Alice" />, itu akan menampilkan "Hello, Alice!".

Dalam ES6 React, kita akan mencapai hal yang sama menggunakan properti statis:

class Greeting extends React.Component {
static defaultProps = {
name: 'World'
};
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Set Initial State (getInitialState)

State adalah seperti penyimpanan data pribadi komponen. Dengan createReactClass, kita menentukan state awal menggunakan getInitialState:

var Counter = createReactClass({
getInitialState: function() {
return {
count: 0
};
},
incrementCount: function() {
this.setState({
count: this.state.count + 1
});
},
render: function() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
});

mari kitauraikan ini:

1. getInitialState mengembalikan objek yang menentukan state awal.
2. Kita menentukan count awal 0.
3. Kita memiliki fungsi incrementCount yang memperbarui state.
4. Dalam metode render, kita menampilkan count dan tombol untuk mengincrementnya.

Dalam ES6 React, biasanya kita menentukan state awal dalam constructor:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// ... sisanya komponen
}

Perbandingan Metode

Berikut adalah tabel perbandingan metode yang kita diskusikan:

createReactClass	ES6 Class	Tujuan
getDefaultProps	static defaultProps	Set default prop values
getInitialState	constructor	Set initial state
render	render	Render the component

Kesimpulan

Dan begitulah, teman-teman! Kita telah melakukan perjalanan kembali dalam waktu untuk mengeksplor React tanpa ES6. Ingat, memahami konsep ini akan membuat Anda menjadi pengembang React yang lebih lengkap. Itu seperti mengetahui sejarah suatu bahasa - itu memberikan Anda apresiasi yang mendalam bagi fitur modern.

Saat kita mengakhiri, saya teringat cerita. Suatu kali, saya sedang bekerja di proyek warisan yang menggunakan sintaks ini. Teman kerja saya bingung, tetapi karena memahami dasar-dasar ini, saya dapat datang seperti superhero React dan menyelamatkan hari!

Teruslatih, tetap curiga, dan sebelum Anda mengetahui, Anda akan membangun hal-hal menakjubkan dengan React - baik itu dengan sintaks lama atau baru. Selamat coding, dan semoga komponen Anda selalu render dengan sempurna!

Credits: Image by storyset