Advertisement
  1. Code
  2. React

Mengatur React Environment, Bagian 1

Scroll to top
Read Time: 7 min
This post is part of a series called Set Up a React Environment.
Set Up a React Environment, Part 2

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

React adalah sebuah pustaka JavaScript untuk membangun antarmuka pengguna (UI). Dia dijaga dan dikembangkan oleh Facebook, dan dia adalah salah satu alat palng populer untuk membuat aplikasi web saat ini.

Namun, dia dikenal sulit untuk menyiapkan sebuah aplikasi React, terutama bagi pemula. Masalahnya muncul ketika React menjad populer, dan metode standar dari pembuatan aplikasi-nya yang melingkupi konfigurasi manual yang rumit dari keseluruhan berkas-berkas pengaturan.

Banyak panduan ditujukan untuk membantu pemula untuk menggunakan React dengan aneka pendekatan dan alat untuk membuat aplikasi yang bekerja. Bahkan hanya dengan sedikit perbedaan pada metode pembangunan yang disarankan, kebingungan tidak dapat dihindari.

Agar mampu mempersiapkan sebuah aplikasi Reat melalui mengaturan manual, dibutuhkan pemahaman yang baik mengenai beberapa macam teknologi.

The technologies used with ReactThe technologies used with ReactThe technologies used with React

Fleksibilitas dalam pengaturan ini sebenarnya adalah hal yang bagus. Kamu memiliki kebebasan penuh untuk memilih alat spesifik yang kamu inginkan untuk membangun aplikasi React-mu dan mengonfigurasinya seperlu-mu.

Ketika sudah nyaman dengan alat-alat ini, kamu akan memiliki percaya diri untuk menggunakan potensi penuh mereka dan membuat sebuah aplikasi yang rumit. Hingga saat itu, terdapat pintu penghalang pada banyak pengembang yang belum memiliki pengalaman cukup dengan alat-alat command-line yang dibutuhkan untuk membuat aplikasi React.

Untuk meringankan frustasi ini, seri panduan ini akan fokus pada aneka metode untuk mengatur aplikasi React. Kita akan mulai dengan pendekatan paling dasar lali membangun pengaturan yang lebih rumit. Mari klarifikasikan secara detil tipe-tipe pengaturan React yang akan kita bahas.

Apa yang Akan Kita Bahas

Pada akhir dari seri panduan ini, kamu akan bisa mengatur aplikasi React melalui empat cara utama:

  • Menggunakan editor code online (CodePen)
  • Pengatuan manual dasar tanpa Node.js maupun npm
  • Menggunakan create-react-app
  • Pengaturan dan konfigurasi manual secara keseluruhan

Metode pertama mendemonstrasikan cara menggunakan sebuah editor kode online seperti CodePen ntuk membuat aplikasi React dengan sangat cepat. Dengan metode ini, kamu bisa memprogram aplikasi pertama-mu benar-benar dalam hitungan detik!

Lalu, kita akan pindah untuk mengatur React dalam lingkup lokal, mulai dari menambakan skrip secara langsung ke berkas HTML tanpa menggunakan alat apapun. Dua pengaturan berikutnya akan fokus pada cara mengatur aplikasi React yang umum dalam pengembangan sehari-hari.

Seperti yang akan kamu lihar, menggunakan perkakas create-react-app membuat pembuatan aplikasi React menjadi sangat mudah hanya dengan satu baris perintah! Terakhir, kita akan membahas cara mengatur aplikasi React melalui command line secara lengkap dari awal, cara jadul.

Tiap metode pengaturan memiliki tempatnya masing-masing, dan tidak ada pendekatan yang lebih baik, hanya alternatif tergantung dengan kebutuhanmu.

React adalah pustaka yang luar biasa untuk mengembangkan aplikasi web, dan di sana terdapat banyak kesenangan juga! Mari perhatikan pandaun prasyarat untuk memastikan kamu siap untuk melaju.

Prasyarat

Metode paling sederhana untuk mengatur sebuah aplikasi React tidak membutuhkan apapun kecuali koneksi internet. Namun, saat kita berlanjut ke pengaturan yang lebih rumit, kita akan pindah ke pembuatan aplikasi React dari dasar. Maka, beberapa pengetahuan mengenai topik-topik berikut direkomendasikan.

Command Line

windows, macOS, dan Linux semuanya memberikan akses ke perkakas command0line. Mereka sangat digunakan dalam pengembangan situs modern untuk melengkapi tugas-tugas rumit secara cepat dan efisien. Jika kamu tidak memiliki pengalaman apapun menggunakan comman line untuk melakukan operasi seperti mengatur berkas atau folder, memasang peralatan, menjalankan skrip dan lainnya. Maka sebaiknya kamu mempelajarinya, setidaknya dasar-dasarnya.

Node.js dan NPM

Jika kamu pernah melakukan pengembangan web dalam rentang wktu apapun. Maka, mungkin kamu pernah mendengar Node.js dan npm. Node.js pada awalnya dibuat untuk menjalankan JavaScript di server tapi seakrang juga digunakan untuk mengembangkan aplikasi situs, menyederhanakan dan mengotomatisasi tugas-tugas umum, semua dalam satu environment.

Ada ratusan ribu modul Node.js yang tersedia, dan npm dikenalkan sebagai manajer package untuk membantu pemasangan, pengorganisasian, dan pengaturan aneka modul dalam aplikasi situsmu. Karena npm dibundel dengan Node.js yang perlu kamu lakukan adalah memasang versi terbaru dari Node.js di sistem-mu untuk membuatnya tersedia melalui command line-mu.

JavaScript

Pemahaman JavaScript dibutuhkan untuk mengatur dan mengembangkan aplikasi React. Jika tidak, kamu harus berusaha keras pada beberapa poin dari pembuatan aplikasi React pada tingkat kompleksitas tertentu. Ini termasuk beberapa fitur dari ES6 seperti arrow functions, classes, dan module. Saya rekomendasikan untuk mengasah kemampuan JavaScript-mu jika diperlukan sebelum berusaha untuk mengembangkan sebuah aplikasi React.

React

Seri panduan ini akan fokus pada mempersiapkan aplikasi React ketimbang mengembangkannya, jadi kita tidak akan mendalami terlalu dalam pada topik-topik spesifik React seperti komponen, props dan state. Adalah ide yang bagus untuk membahas fitur-fitur dasar dari React dan menelusuri bagaimana bagian-bagiannya bersatu membentuk sebuah aplikasi yang bekerja.

Struktur sebuah Aplikasi React

Sebelum kita mendalam pengaturan dari metode pertama kita, mari ambil sebuah tur cepat mengenai React itu sendiri.

Pada inti-nya terdapat tiga fitur dasar dari React yang biasa-nya dimiliki oleh aplikasi-nya. Mereka adalah:

  • komponen
  • props
  • state

Mereka adalah fitur-fitur kunci yang kamu harus kuasai untuk menulis sebuah aplikasi React yang efektif. Ketika kamu telah meraih tahapan tersebut, kamu akan sangat siap untuk mendalami lebih React lebih dalam dan mengembangkan aplikasi yang lebih rumit.

Kamu mungkin akan terkejut saat mengetahui bahwa komponen, props, dan state React tidaklah sulit untuk dipahami. Pengalaman pribadi saya mengatakan bahwa proses pengaturan React jauh lebih sulit daripada mempelajari React itu sendiri!

Komponen

Blok-blok pembangun dari aplikasi React apapun adalah komponen. Anggaplah mereka sebagai blok-blok kode yang daapat digunakan kembali dengan markup, perilaku dan style yang telah dienkapsulasi. Mereka juga bisa disarangkan ke dalam satu sama lainnya yang mebuat mereka sangat dapat digunakan kembali. Contohnya, kamu mungkin memiliki komponen <Book /> yang mewakili data dan UI yang terhubung dengan sebuah buku. Lalu kamu bisa juga memiliki kpmponen <BookIndex /> yang merender banyak komponen <Book /> dan seterusnya.

Untuk membuat pengkontstruksiannya menjadi lebih mudah, JSX dibuat untuk memberikan komponen struktur seperti HTML. Jika kamu familiar dengan HTML atau XML kamu akan merasa nyaman dengan JSX pada pembuatan komponen. Penting untuk diingat bahwa kamu tidak harus menggunakan JSX sama sekali dalam React, namun sekarang itu menjadi cara standar yang diterima untuk mendefinisikan komponen.

Props

Props mengizinkanmu untuk melewatkan informasi antarkomponen. Dan di dalam React, infomasi hanya bisa dilewatkan melalui prop dari komponen induk ke komponen anak-nya.

Jika kamu memutuskan untuk menggunaka JSX untuk mendefinisikan komponen-mu (dan saya sangat merekomenddasikannya) maka pendefinsian props pada sebuah sangat mirip dengan menambahkan atribut-atribut HTML. Inilah salah satu alasan mengapa JSX menjadi sangat populer! Bisa menggunakan sintaks seperti HTML untuk komponen dan props React membuatnya menjadi sangat mudah untuk merancah keluar aplikasi-mu.

Mari lihat lebih dekat ke komponen React contoh <BookIndex /> kita dan lihat cara kita mendefinisikannya dengan banyak komponen <Book /> bersarang. Pada saat yang sama, kita akan memberikan informasi ke tiap komponen <Book /> dari <BookIndex />

Pertama, ini adalah definisi komponen <BookIndex />:

1
class BookIndex extends React.Component {
2
    render() {
3
        return (
4
            <div className="books">
5
                <h2>List of all books</h2>

6
                <Book title="Through the Looking-Glass" author="Lewis Carroll" published="1871" />
7
                <Book title="The Time Machine" author="H. G. Wells" published="1895" />
8
                <Book title="A Tale of Two Cities" author="Charles Dickens" published="1859" />
9
            </div>

10
        )
11
    }
12
}

Lalu, di dalam tiap komponen <Book />, kita bisa mengakses props yang dilewatkan seperti ini:

1
class Book extends React.Component {
2
    render() {
3
        return (
4
            <div className="book">
5
                <h2>{this.props.title}</h2>

6
                <p>Author: {this.props.author}</p>

7
                <p>Published: {this.props.published}</p>

8
            </div>

9
        )
10
    }
11
}

Jangan khawatir jika sintaks untuk membuat komponen React di atas terlihat asing - ini cukup mudah. Sebuah class ES6 memperluas class komponen dasar, lalu sebuah metode render (yang dibutuhkan) menangani keluaran dari komponen-nya.

State

State mengizinkan kita untuk melacak semua data dalam sebuah aplikasi React. Kita harus bisa memperbaharui antarmuka-nya ketika sesuatu berubah, dan state menangani ini untuk kita. Kapanpun state berubah, React cukup pintar untuk tahu bagian mana yang perlu diperbaharui. Ini membuat React sangat cepat karena dia hanya akan memperbaharui bagian yang harus berubah.

State biasa-nya diterapkan pada komponen tingkat atas dari aplikasi React-mu, jadi dia tersedia pada setiap anak komponen untuk menggunakan data state seperlunya.

Begitulah tur singkat React kita. Ini memang tidak dibuat komprehensif, dan masih banyak yang perlu kamu pahami sebelum bisa membuat sebuah aplikasi yang benar-benar matang. Tapi pemahaman mengenai komponen, props, dan state akan memberikanmu permulaan yang solid.

Kesimpulan

Dalam panduan ini, kita telah meletakkan dasar dari pembelajaran cara mempersiapkan sebuah React environment. Sisa dari panduan ini akan berfokus pada metode-metode spesifik yang diperlukan untuk melakukannya. Kita akan membahas metode persiapan dari yang paling sederhana hingga ke metode yang lebih kompleks dan membutuhkan konfigurasi manual.

Pada panduan berikutanya, kita akan mulai dengan melihat cara menggunakan CodePen, sebuah editor kode online, untuk memperisapkan aplikasi React hanya dalam beberapa klik. Sejauh ini, ini adalah metode paling sederhana dan cepat untuk menulis kode di React!

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.