Advertisement
  1. Code
  2. React

Kursus Kilat React untuk Pemula, Bagian 1

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

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Pada seri tutorial ini kita akan langsung menggunakan React saat kita membuat aplikasi yang berfungsi penuh untuk menampilkan galeri film.

Mempelajari cara membuat aplikasi dari awal adalah peluang besar untuk berlatih menggunakan semua fitur utama React sambil meningkatkan skill pengembanganmu. Semua metode yang disarankan dan praktik terbaik menyusul, yang terpenting adalah membuat aplikasi React yang modern.

Kita akan menyiapkan aplikasi baru React menggunakan tool create-react-app, yang dikembangkan oleh Facebook, serta mencakup topik React berikut secara terperinci:

  • Components
  • JSX
  • Props
  • State
  • Menata aplikasimu dengan benar
  • Menggunakan fitur ES6 untuk pengembangan aplikasi yang modern

Apa yang Akan Kita Buat

Untuk membuat pembelajaran tentang pengembangan React lebih menyenangkan, kita akan membuat aplikasi yang berfungsi penuh, dibanding menyajikan cuplikan kode yang umum ketika aspek-aspek baru React telah tercakup.

Bersama-sama kita akan membiat "Movie Mojo", sebuah aplikasi untuk menampilkan galeri film yang nyaman. Ketika selesai, aplikasi akan memuat beberapa film pada pemuatan halaman, dan kemudian akan memuat lebih banyak ketika tombol diklik. Akhirnya, kamu akan bisa memasukkan judul film-mu sendiri melalui formulir khusus, yang ketika di-submit, akan secara dinamis memasukkan film baru ke dalam galeri.

Finished Movie Mojo AppFinished Movie Mojo AppFinished Movie Mojo App

Prasyarat

Ini adalah tutorial tingkat menengah, sehingga kamu akan mendapatkan banyak manfaat jika kamu memiliki pengetahuan sebelumnya tentang topik berikut:

  • Fitur ES6 seperti arrow function, class, dan module.
  • Mengetahui apa yang dimaksud dengan component, prop, dan state React.
  • Beberapa pengalaman menggunakan Node.js dan NPM.
  • Setidaknya tingkat dasar kemampuan JavaScript.

Sebagian besar ini dibahas secara rinci saat kita berjalan, tetapi saya akan merekomendasikan mempelajarinya lagi pada area tertentu yang diperlukan.

Mari Bersiap

Kita akan menggunakan tool create-react-app untuk menyiapkan aplikasi React  kita. Ini sangat mudah digunakan dan akan memungkinkan kita untuk fokus pada pengkodean aplikasi kita secara langsung, tanpa harus mengarahkan melalui proses pengaturan yang rumit.

Untuk menggunakan create-react-app, kamu harus memiliki Node.js dan npm yang sudah terinstall. Kamu dapat memeriksa apakah keduanya tersedia dengan mengetikkan yang berikut ini di jendela command-line:

1
node -v

Lalu:

1
npm -v

Jika keduanya sudah terinstal maka kamu akan melihat nomor versi saat ini untuk masing-masingnya.

1
MacBook-Pro:~ davidgwyer$ node -v
2
v6.11.1
3
MacBook-Pro:~ davidgwyer$ npm -v
4
5.3.0
5
MacBook-Pro:~ davidgwyer$

Jika kamu perlu menginstal atau memperbarui Node.js dan npm maka cara paling sederhana adalah mengunduh Node.js dari halaman web resminya. Node.js dibundel dengan npm sehingga kamu tidak perlu melakukan instalasi secara terpisah.

Untuk menginstal create-react-app secara global, ketikkan ini ke jendela command-line mana pun:

npm install -g create-react-app

Sekarang kita dapat melanjutkan dan menggunakan create-react-app untuk mendorong pembautan aplikasi React baru kita. Ini juga akan membuat folder tingkat atas untuk memuat file proyek kita. Buka jendela command-line dan arahkan ke folder yang kamu inginkan untuk lokasi aplikasimu (semisal. /Desktop), dan ketikkan yang berikut ini:

create-react-app movie-mojo

Ini akan memakan waktu satu menit atau lebih untuk menyelesaikannya, tetapi ketika itu terjadi, kamu akan melihat pesan yang serupa dengan ini:

1
Success! Created movie-mojo at /Users/davidgwyer/Desktop/movie-mojo
2
3
Inside that directory, you can run several commands:
4
5
  yarn start
6
7
    Starts the development server.
8
9
  yarn build
10
11
    Bundles the app into static files for production.
12
13
  yarn test

14


15
    Starts the test runner.
16
17
  yarn eject
18
19
    Removes this tool and copies build dependencies, configuration files
20
    and scripts into the app directory. If you do this, you can’t go back!
21
22
We suggest that you begin by typing:
23
24
  cd movie-mojo
25
  yarn start
26
27
Happy hacking!

Folder movie-mojo baru akan dibuat dengan struktur file berikut:

Project file structureProject file structureProject file structure

Folder src adalah tempat kamu mengubah file proyekmu, dan ketika kamu ingin men-deploy aplikasimu, mereka akan dipaketkan dan ditambahkan ke folder publik, siap untuk didistribusikan.

Untuk melihat contoh aplikasi di browser-mu, mari manfaatkan server web mini yang disertakan dengan create-react-app. Kita harus berada di dalam folder proyek yang baru kita buat, jadi di jendela command line, ketikkan:

cd movie-mojo

Dan kemudian:

npm start

Perintah sederhana ini melakukan tiga hal utama. Yang Itu akan:

  • Mengkompilasi contoh aplikasi React kita.
  • Membuka jendela browser baru dan menampilkan aplikasi kita.
  • Memantau perubahan ke file proyek.

Setelah dikompilasi, kamu akan melihat output berikut:

1
Compiled successfully!
2
3
You can now view movie-mojo in the browser.
4
5
  Local: https://localhost:3000/
6
7
  On Your Network: http://192.168.0.15:3000/
8
9
Note that the development build is not optimized.
10
11
To create a production build, use yarn build.

Dan inilah contoh aplikasi yang berjalan di browser.

Sample appSample appSample app

Ketika ada perubahan yang dibuat ke aplikasimu, maka secara otomatis akan dikompilasi ulang dan dimuat ulang di jendela browser. Ini adalah fitur yang sangat keren dari create-react-app dan akan menghemat banyak waktu selama pengembangan!

Ini juga memungkinkanmu untuk fokus pada pengkodean aplikasimutanpa terganggu oleh keharusan mengkompilasi ulang secara manual dan terus menyegarkan jendela browser untuk melihat perubahan terbaru.

Boleh jadi menjadi alur kerja yang terbaik, jika kamu memiliki ruang layar yang tersedia, adalah dengan mengaktifkan browser dan editor teks secara berdampingan. Dengan cara itu, setiap kali kamu membuat perubahan ke salah satu file proyekmu, kamu akan melihat perubahan yang hampir seketika ditampilkan di jendela browser.

Mari mencoba mengubah proyek percobaan kita.

Di dalam folder src, buka App.js di editor teksmu. Coba ubah baris:

Untuk memulai, ubah <code>src/App.js</code> dan simpan untuk dimuat ulang.

menjadi:

Selamat datang di aplikasi React "Movie Mojo"!

Segera setelah kamu menyimpan perubahan, aplikasi React secara otomatis mengkompilasi ulang, dan jendela browser akan disegarkan. Jika kamu telah menata ulang ruang kerjamu seperti yang disarankan di atas maka kamu akan melihat betapa singkatnya ini.

Updated sample appUpdated sample appUpdated sample app

Menata Aplikasi Kita

Mari siapkan struktur aplikasi kita yang akan kita gunakan untuk sisa tutorial ini.

Tool create-react-app melakukan pekerjaan yang luar biasa untuk mendorong pembuatan aplikasi kita, tetapi kita masih memiliki fleksibilitas untuk menyesuaikannya agar sesuai dengan kebutuhan kita.

Pertama, mari kita hapus file yang tidak lagi kita perlukan dari folder src kita. Kita tidak membutuhkan service worker di aplikasi kita, jadi hapus file registerServiceWorker.js. Ini direferensikan di index.js, jadi buka di editor dan hapus semua referensi sehingga terlihat seperti ini:

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import './index.css';
4
import App from './App';
5
6
ReactDOM.render(<App />, document.getElementById('root'));

Selanjutnya, hapus file logo.svg dan ubah App.js untuk menghapus referensi untuk itu. Filemu yang diperbarui sekarang akan terlihat seperti ini:

1
import React, { Component } from 'react';
2
import './App.css';
3
4
class App extends Component {
5
6
  render() {
7
8
    return (
9
      <div className="App">
10
        <div className="App-header">
11
          <h2>Welcome to React</h2>

12
        </div>

13
        <p className="App-intro">
14
          Welcome to the 'Movie Mojo' React app!
15
        </p>

16
      </div>

17
    );
18
  }
19
}
20
21
export default App;

Kita juga dapat membuang file App.test.js. Ini akan menyisakan kita dengan file-file berikut di src:

  • index.js
  • index.css
  • App.js
  • App.css

Kita akan membuat beberapa komponen, jadi mari buat folder khusus untuk menyimpan semuanya. Di dalam src, buat folder components baru dan tambahkan file App.js ke sana. Aplikasi kkiys tidak dapat dikompilasi dengan benar hingga kita memperbarui beberapa referensi.

Di index.js, perbarui path untuk mengimpor komponen <App />

1
import App from './components/App';

Dan di App.js, perbarui path ke App.css:

1
import '../App.css';

Simpan perubahanmu dan pastikan aplikasimu berhasil dikompilasi ulang.

Kita sekarang hampir siap untuk mulai mengkode aplikasi "Movie Mojo" kita. Pertama, mari kita kenali bagaimana aplikasi kita ditampilkan.

Lihatlah pada index.js. Ini adalah file yang benar-benar me-render aplikasi kita ke DOM. Ini dilakukan melalui metode ReactDom.render(), yang mengambil dua argumen. Argumen pertama adalah komponen yang ingin kita render. Dalam kasus kita, ini adalah komponen <App /> , yang merupakan komponen level teratas (dan saat ini hanya) di aplikasi kita.

Argumen kedua menentukan elemen target DOM yang ingin kita pasangkan aplikasi React kita. Secara bawaan, 'create-react-app' membuat elemen ini secara otomatis. Jika kamu melihat ke dalam folder public, ada index.html yang berisi elemen <div> dengan id root.

Kamu dapat mengubah ini menjadi apa pun yang kamu inginkan, tetapi tidak mengapa membiarkannya pada bawaannya untuk tutorial ini.

index.js dimuat dalam komponen <App /> kita dari App.js, dan kita akan mengikuti pola desain ini dengan memisahkan setiap komponen yang terdapat dalam aplikasi kita ke dalam file miliknya.

App.js akan menjadi komponen tingkat atas kita yang akan berisi komponen lain, yang pada gilirannya dapat berisi referensi ke komponen lain. Anggaplah komponen mirip dengan tag HTML di mana kamu memiliki elemen <body> teratas yang mungkin berisi satu atau lebih elemen div, yang bisa berubah menjadi elemen menu nav, dan seterusnya.

Kesimpulan

Tutorial ini berisi semua dasar yang diperlukan untuk menyiapkan aplikasi React kita. Menggunakan create-react-app menjadikannya sangat mudah untuk membuat aplikasi percobaan yang berfungsi dengan semua konfigurasi yang ditangani untuk kita. Kita kemudian mengubah pengaturan bawaan agar sesuai dengan kebutuhan khusus kita.

Ikuti terus bagian 2, di mana kita akan mulai membuat komponen untuk aplikasi "Movie Mojo" kita dan lihatlah pada penambahan props untuk membuat komponen kita menjadi dinamis!

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.