Advertisement
  1. Code
  2. React

Kursus Kilat React untuk Pemula, Bagian 3

Scroll to top
Read Time: 12 min
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 2
React Crash Course for Beginners, Part 4

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Sejauh ini dalam serial React ini, kita telah membuat aplikasi sampel yang berfungsi sebagai titik awal untuk aplikasi galeri 'Movie Mojo' kita, dan kita telah melihat bagaimana menggunakan props yang memungkinkan kita menyesuaikan tampilan komponen dengan mengirimkan data daripada mengkode manual.

Pada bagian ketiga kita akan membuat komponen khusus pertama kita, lalu menambahkan status ke aplikasi kita. Ini akan memungkinkan kita mengelola data aplikasi dengan mudah tanpa khawatir memperbarui DOM secara manual. Sebagai gantinya kita akan melihat bagaimana cara agar React menangani semua pe-render-an DOM mulai sekarang.

Satu set dari empat film akan ditampilkan di galeri kita pada pemuatan halaman, dan empat lainnya akan dimuat dan ditampilkan saat tombol Load more... diklik.

Mari kita atasi dulu menambahkan komponen <Movie /> yang akan menampilkan informasi tentang film individual.

Menambahkan Komponen Movie

Komponen <Movie /> akan menampilkan informasi tentang film individual. Beberapa komponen <Movie /> akan ditampilkan bersamaan untuk membentuk galeri film dari beberapa film yang bagus. Makanya nama aplikasi React kita, 'Movie Mojo "!

Sebelum menambahkan komponen <Movie />, mari memperbarui CSS di App.js untuk menata film individual di galeri. Buka App.css dan ganti gayanya dengan:

1
.App {
2
  text-align: center;
3
}
4
5
.App-logo {
6
  animation: App-logo-spin infinite 20s linear;
7
  height: 80px;
8
}
9
10
.App-header {
11
  background-color: steelblue;
12
  height: 70px;
13
  padding: 20px;
14
  color: white;
15
}
16
17
.App-intro {
18
  font-size: large;
19
}
20
21
/* new css for movie component */
22
* {
23
  box-sizing: border-box;
24
}
25
26
.movies {
27
  display: flex;
28
  flex-wrap: wrap;
29
}
30
31
.App-header h2 {
32
  margin: 0;
33
}
34
35
.add-movies {
36
  text-align: center;
37
}
38
39
.add-movies button {
40
  font-size: 16px;
41
  padding: 8px;
42
  margin: 0 10px 30px 10px;
43
}
44
45
.movie {
46
  padding: 5px 25px 10px 25px;
47
  max-width: 25%;
48
}

Ini menata galeri agar menampilkan film dalam formasi grid dan memperbaiki jarak di sekitar elemen visual lainnya.

Juga, di /public/posters/, saya telah menambahkan 12 poster film untuk kenyamanan yang dapat Anda gunakan dalam proyek Anda sendiri, jika Anda mengikuti. Anda bisa mengunduhnya sebagai bagian dari proyek jadi untuk bagian 4. Cukup salin di folder posters ke folder public aplikasi React Anda sendiri.

Anda juga bisa mengunduh poster film Anda sendiri dari situs web aslinya. Untuk tutorial ini, saya menggunakan cinematerial.com untuk semua poster film. Ada sedikit biaya untuk mengunduh poster, tapi mungkin ada banyak sumber poster lain jika Anda ingin mencoba di tempat lain.

OK, kembali ke komponen <Movie /> kita. Di dalam folder /src/components/, buat file Movie.js baru, buka di editor, dan tambahkan yang berikut ini:

1
import React, { Component } from 'react';
2
3
class Movie extends Component {
4
  render() {
5
    return (
6
      <div className="movie">
7
        <h2>{ this.props.title }</h2>

8
      <div><img width="200" src={ this.props.poster } /></div>
9
        <p>({ this.props.year })</p>

10
        <p>{ this.props.description }</p>

11
      </div>

12
    );
13
  }
14
}
15
16
export default Movie;

Ini sangat mirip dengan komponen <Header /> kecuali kita merujuk beberapa props alih-alih hanya satu. Mari kita gunakan komponen <Movie /> untuk menampilkan beberapa film.

Di App.js tambahkan empat komponen <Movie /> di dalam pembungkus <div> agar mudah menerapkan gaya hanya elemen film. Berikut adalah kode App.js lengkap:

1
import React, { Component } from 'react';
2
import '../App.css';
3
import Header from './Header';
4
import Movie from './Movie';
5
6
class App extends Component {
7
  render() {
8
    return (
9
      <div className="App">
10
        <Header text="Discover Your Movie Mojo!" />
11
        <p className="App-intro">Sharing a few of our favourite movies</p>

12
        <div className="movies">
13
          <Movie title="50 First Dates" year="2004" description="Henry Roth is a man afraid of commitment up until he meets the beautiful Lucy. They hit it off and Henry think he's finally found the girl of his dreams." poster="./posters/50-first-dates.png" />
14
          <Movie title="Ferris Bueller's Day Off" year="1986" description="A high school wise guy is determined to have a day off from school, despite what the principal thinks of that." poster="./posters/ferris.png" />
15
          <Movie title="Matilda" year="1996" description="Story of a wonderful little girl, who happens to be a genius, and her wonderful teacher vs. the worst parents ever and the worst school principal imaginable." poster="./posters/matilda.png" />
16
          <Movie title="Dirty Dancing" year="1987" description="Spending the summer at a Catskills resort with her family, Frances 'Baby' Houseman falls in love with the camp's dance instructor, Johnny Castle." poster="./posters/dirty-dancing.png" />
17
        </div>

18
      </div>

19
    );
20
  }
21
}
22
23
export default App;

Perhatikan bagaimana kami mengimpor komponen <Movie /> secara eksplisit, seperti yang kami lakukan untuk <Header />, agar tersedia dalam kode. Setiap komponen movie menggunakan props untuk title, year, description, dan poster.

Hasilnya adalah empat komponen <Movie /> yang ditambahkan ke galeri kita.

Manually adding Movie componentsManually adding Movie componentsManually adding Movie components

Ini sangat membosankan untuk menambahkan film secara manual satu per satu di App.js. Dalam prakteknya, data aplikasi kemungkinan akan berasal dari database dan disimpan sementara dalam objek JSON sebelum ditambahkan ke objek status di aplikasi Anda.

Mengelola Status React

Apa yang dimaksud dengan status di aplikasi React? Anda dapat menganggapnya sebagai objek JavaScript tunggal yang mewakili semua data di aplikasi Anda. Status dapat didefinisikan pada komponen apapun, namun jika Anda ingin berbagi status di antara komponen maka lebih baik mendefinisikannya pada komponen tingkat atas. Status kemudian dapat diturunkan ke komponen anak dan diakses sesuai kebutuhan.

Meskipun status adalah satu objek utama, objek tersebut dapat berisi beberapa sub-objek yang terkait dengan berbagai bagian aplikasi Anda. Misalnya, di aplikasi keranjang belanja, Anda mungkin memiliki objek status untuk item dalam pesanan Anda, dan objek lain untuk memantau inventaris.

Dalam aplikasi 'Movie Mojo' kami, kami hanya memiliki satu objek sub-status untuk menyimpan film di galeri kita.

Gagasan inti di balik penggunaan status adalah bahwa setiap kali data dalam aplikasi Anda berubah, React memperbarui bagian DOM yang relevan untuk Anda. Yang harus Anda lakukan adalah mengelola data, atau status, di aplikasi Anda, dan React menangani semua pembaruan DOM.

Menambahkan Film via Status

Demi kesederhanaan, kita akan melupakan langkah database dan berpura-pura data film kita telah diambil dari database dan disimpan dalam format JSON.

Untuk menunjukkan penambahan item pada status awal, serta memperbarui status saat sebuah peristiwa terjadi (seperti tombol tekan), kita akan menggunakan dua objek JSON, masing-masing berisi data tentang empat film.

Di folder src, tambahkan file movies.js baru, buka di editor, dan tambahkan kode berikut untuk menentukan dua objek JSON kita:

1
// some sample movies

2
const initialMovies = {
3
  movie1: {
4
    title: "Ferris Bueller's Day Off",
5
    year: "1986",
6
    description: "A high school wise guy is determined to have a day off from school, despite what the principal thinks of that.",
7
    poster: "./posters/ferris.png"
8
  },
9
  movie2: {
10
    title: "Bridget Jones' Diary",
11
    year: "2001",
12
    description: "A British woman is determined to improve herself while she looks for love in a year in which she keeps a personal diary.",
13
    poster: "./posters/bridget-jones.png"
14
  },
15
  movie3: {
16
    title: "50 First Dates",
17
    year: "2004",
18
    description: "Henry Roth is a man afraid of commitment up until he meets the beautiful Lucy. They hit it off and Henry think he's finally found the girl of his dreams.",
19
    poster: "./posters/50-first-dates.png"
20
  },
21
  movie4: {
22
    title: "Matilda",
23
    year: "1996",
24
    description: "Story of a wonderful little girl, who happens to be a genius, and her wonderful teacher vs. the worst parents ever and the worst school principal imaginable.",
25
    poster: "./posters/matilda.png"
26
  }
27
};
28
29
const additionalMovies = {
30
  movie5: {
31
    title: "Dirty Dancing",
32
    year: "1987",
33
    description: "Spending the summer at a Catskills resort with her family, Frances 'Baby' Houseman falls in love with the camp's dance instructor, Johnny Castle.",
34
    poster: "./posters/dirty-dancing.png"
35
  },
36
  movie6: {
37
    title: "When Harry Met Sally",
38
    year: "1989",
39
    description: "Harry and Sally have known each other for years, and are very good friends, but they fear sex would ruin the friendship.",
40
    poster: "./posters/when-harry-met-sally.png"
41
  },
42
  movie7: {
43
    title: "Elf",
44
    year: "2003",
45
    description: "After inadvertently wreaking havoc on the elf community due to his ungainly size, a man raised as an elf at the North Pole is sent to the U.S. in search of his true identity.",
46
    poster: "./posters/elf.png"
47
  },
48
  movie8: {
49
    title: "Grease",
50
    year: "1978",
51
    description: "Good girl Sandy and greaser Danny fell in love over the summer. When they unexpectedly discover they're now in the same high school, will they be able to rekindle their romance?",
52
    poster: "./posters/grease.png"
53
  }
54
};
55
56
export {initialMovies};
57
export {additionalMovies};

Sebelum kita bisa mereferensi objek JSON di komponen <App /> kita, kita perlu mengimpornya. Tambahkan ini ke atas App.js:

1
import {initialMovies} from '../movies';
2
import {additionalMovies} from '../movies';

Setiap objek JSON sekarang tersedia melalui variabel initialMovies dan additionalMovies. Sejauh ini, kita tidak memiliki status yang terkait dengan aplikasi kita. Mari kita perbaiki sekarang juga.

Komponen tingkat atas di aplikasi 'Movie Mojo' kita adalah <App />, jadi mari tambahkan objek status kita di sini. Kita perlu status untuk diinisialisasi bersama dengan kelas komponen, yang bisa kita lakukan melalui fungsi constructor.

Saat menggunakan fungsi constructor di kelas React, Anda harus memanggil super() terlebih dahulu sebagai objek Component yang perlu diperluas agar diinisialisasi sebelum hal lainnya. Plus, kata kunci this tidak akan tersedia di dalam constructor sampai setelah super() telah dikembalikan.

Untuk menginisialisasi objek state kita, tambahkan ini di dalam kelas komponen <App />:

1
constructor() {
2
  super();
3
4
  this.state = {
5
    movies: {}
6
  };
7
}

Ini akan membuat objek status kosong untuk aplikasi React kita. Dengan menggunakan alat pengembang React, kita dapat melihat objek state yang diinisialisasi langsung pada komponen <App />.

Adding empty stateAdding empty stateAdding empty state

Bagaimanapun, kami ingin menginisialisasi objek state dengan beberapa film sehingga menampilkan langsung pada pemuatan halaman. Untuk melakukannya, kita dapat menginisialisasi status objek movies dengan initialMovies bukan objek kosong.

1
constructor() {
2
  super();
3
4
  this.state = {
5
    movies: initialMovies
6
  };
7
}

Ini akan mengatur status awal aplikasi kami ke empat film yang tersimpan di objek JSON initialMovies, namun film di galeri masih ditampilkan melalui komponen <Movie /> yang dikode langsung yang kami tambahkan sebelumnya.

Adding movies to our initial stateAdding movies to our initial stateAdding movies to our initial state

Kita perlu mengeluarkan film di objek status movie sebagai gantinya, yang bisa kita lakukan dengan menggunakan satu perulangan untuk mengulangi setiap film.

Mulailah dengan menghapus komponen <Movie /> yang dikode langsung; dan ganti dengan:

1
{
2
  Object
3
    .keys(this.state.movies)
4
    .map(key => <Movie key={key} meta={this.state.movies[key]} />)

5
}

Kode ini membutuhkan beberapa penjelasan. Objek status movie berisi film individual yang tersimpan sebagai objek, namun untuk melakukan perulangan, akan lebih mudah untuk bekerja dengan sebuah array.

Jadi kita menggunakan Object.keys() untuk meraih semua key untuk objek film dan menyimpannya dalam array. Ini kemudian diulang menggunakan .map(), dan komponen <Movie /> dikeluarkan untuk setiap film di objek status movies.

Ada beberapa perubahan dari cara sebelumnya kami menambahkan <Movie />. Pertama, kami menyampaikan semua informasi untuk film individual melalui satu meta prop. Ini sebenarnya lebih mudah dari sebelumnya, di mana kami menentukan prop terpisah untuk setiap atribut film.

Juga, perhatikan bahwa kita juga menentukan key prop. Ini digunakan secara internal oleh React untuk melacak komponen yang telah ditambahkan oleh perulangan. Ini tidak benar-benar tersedia untuk digunakan oleh komponen, jadi sebaiknya Anda tidak mencoba mengaksesnya dengan kode Anda sendiri.

Tanpa key prop, React menimbulkan kesalahan, jadi penting untuk memasukkannya. React perlu mengetahui film baru mana yang telah ditambahkan, diperbarui, atau dihapus sehingga semuanya dapat disinkronkan.

Kita perlu melakukan satu hal lagi sebelum komponen-komponen kita dapat ditampilkan. Buka Movie.js, dan untuk masing-masing referensi ke prop, beri awalan dengan meta, sebagai berikut:

1
<div className="movie">
2
  <h2>{ this.props.meta.title }</h2>

3
  <div><img width="200" src={ this.props.meta.poster } /></div>
4
  <p>({ this.props.meta.year })</p>

5
  <p>{ this.props.meta.description }</p>

6
</div>
Movies initialized via stateMovies initialized via stateMovies initialized via state

Memuat Film Lainnya

Kita telah melihat bagaimana menampilkan film yang telah ditambahkan ke status saat aplikasi kita diinisialisasi, namun bagaimana jika kita ingin memperbarui galeri film kita?

Di sinilah React benar-benar bersinar. Yang harus kita lakukan adalah memperbarui film di objek status movie, dan React secara otomatis akan memperbarui semua bagian aplikasi kita yang menggunakan objek ini. Jadi, jika kita menambahkan beberapa film, React akan memicu metode render() komponen <App /> untuk memperbarui galeri film kita.

Mari kita lihat bagaimana kita bisa menerapkannya.

Mulailah dengan menambahkan tombol HTML di dalam pembungkus div penutup di App.js.

1
<div className="add-movies"><button onClick={this.loadAdditionalMovies}>Load more...</button></div>

Saat tombol diklik, metode kelas loadAdditionalMovies dipanggil. Tambahkan metode ini ke kelas komponen <App />:

1
loadAdditionalMovies() {
2
  var currentMovies = { ...this.state.movies };
3
  var newMovies = Object.assign( currentMovies, additionalMovies );
4
5
  this.setState({ movies: newMovies });
6
}

Memperbarui keadaan relatif sederhana asalkan Anda mengikuti metode yang disarankan, yaitu menyalin objek keadaan saat ini ke objek baru, dan memperbarui salinan itu dengan item baru. Kemudian, untuk mengatur keadaan baru, kita memanggil this.setState dan meneruskan objek keadaan baru kita untuk menimpa yang sebelumnya. Begitu keadaan diperbarui, React hanya memperbarui bagian-bagian DOM yang telah terpengaruh oleh perubahan keadaan.

Baris pertama di loadAdditionalMovies() menggunakan operator spread untuk menyalin semua properti objek this.state.movies ke objek currentMovies yang baru.

Setelah itu, kami menggunakan Object.assign untuk menggabungkan dua objek secara bersamaan, sehingga menghasilkan daftar film baru yang ditambahkan ke daftar saat ini.

Hanya ada satu langkah lagi yang perlu kita selesaikan sebelum metode loadAdditionalMovies() akan bekerja. Untuk referensi metode komponen kustom, pertama kita perlu secara manual mengikatnya ke kelas komponen.

Ini adalah permainan kata-kata khas React dan hanya sesuatu yang harus Anda ingat untuk dilakukan. Setiap saat sebuah metode diakses tanpa terikat secara manual, React akan mengeluh dan membuang kesalahan kompilasi.

Tambahkan ini ke constructor kelas di App.js:

1
this.loadAdditionalMovies = this.loadAdditionalMovies.bind(this);

Selama Anda ingat untuk menggunakan solusi ini untuk setiap metode kustom yang memerlukan penggunaan this, Anda tidak akan mengalami masalah.

Sekarang, coba klik tombol Load more.... Anda akan melihat empat film lagi yang ditambahkan ke galeri.

Loading more movies via updating stateLoading more movies via updating stateLoading more movies via updating state

Memuat lebih banyak film melalui pembaruan keadaanIni menunjukkan kekuatan kunci React. Artinya, membiarkan Anda berfokus pada data di aplikasi Anda dan membiarkan semua pembaruan DOM yang tidak biasa ke React. Untuk menambahkan film, yang harus kita lakukan adalah memperbarui data di objek status movie kita, dan React mengurus semuanya.

Contoh aplikasi kami masih cukup mendasar, tapi bayangkan aplikasi yang jauh lebih kompleks dengan banyak komponen dan beberapa objek keadaan. Cobalah memperbarui DOM secara manual karena data dalam perubahan aplikasi Anda akan menjadi tugas yang sangat besar (dan rawan kesalahan)!

Kesimpulan

Dalam tutorial ini, kita benar-benar membuat beberapa kemajuan dengan aplikasi 'Movie Mojo' kita. Kita menggunakan state React untuk membantu mengelola daftar film di aplikasi kita. Kita tidak hanya menambahkan film ke objek awal saat aplikasi kita diinisialisasi, namun kita juga memperbarui daftar film di galeri kita saat tombol Load more... diklik.

Pada bagian keempat, dan tutorial terakhir di seri ini, kita akan melihat bagaimana kita secara manual menambahkan sebuah film ke galeri kita melalui formulir kustom. Pengguna akan dapat mengisi formulir dan menambahkan rincian tentang sebuah film, yang akan ditambahkan ke daftar film yang ditampilkan di galeri.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.