Bagaimana Memulai Belajar Bereaksi: Panduan Berita AS |  Pendidikan
Education

Bagaimana Memulai Belajar Bereaksi: Panduan Berita AS | Pendidikan

Setelah diperkenalkan pada tahun 2013, tidak butuh waktu lama bagi React untuk menjadi framework yang dominan untuk aplikasi berbasis JavaScript. Markupnya yang intuitif dan deklaratif untuk front end (dikenal sebagai JSX) dan komunitas dukungannya yang kuat menjadikan React platform stabil yang dapat dibangun oleh siapa saja. Perusahaan seperti Facebook, Instagram, Netflix, dan Airbnb memercayai React untuk membangun front end yang dapat diskalakan dan stabil untuk aplikasi mereka.

Apa itu React dan Mengapa Mempelajarinya?

Dua rekan belajar cara membuat kode di kantor.

(Gambar Getty)

Pada 2010, internet menjadi lebih interaktif. Aplikasi web bermunculan di mana-mana, berkat kekuatan JavaScript dan HTML5. Segera, pengembang mendorong amplop tentang berapa banyak aplikasi yang perlu ditambah HTML dengan JavaScript, sebagai lawan dari JavaScript dengan sendirinya, tanpa HTML.

Sekitar waktu ini, pengembang di Facebook membuat React. Meskipun ini bukan framework JavaScript pertama yang muncul, pendekatan unik React untuk membangun komponen dengan JSX, menggunakan model objek dokumen bayangan dan memiliki antarmuka yang merespons perubahan data, masih merupakan salah satu poin terkuatnya. Shadow DOM seperti salinan halaman web yang disimpan komputer di memori sehingga dapat memindai dan memodifikasinya lebih cepat.

Kemahiran dengan React adalah salah satu keterampilan kerja yang paling dicari di pasar.

Gianina Skarlett, seorang insinyur front-end di Forethought Technologies, mengatakan prospek pekerjaan itu adalah alasan utama untuk melihat React. “Ada begitu banyak pekerjaan untuk pengembang React,” kata Skarlett. “React baru ada di industri… sekitar lima atau enam tahun. Anda tidak bersaing dengan seseorang yang memiliki pengalaman 20 tahun dengan React, jadi saya pikir poin itu sangat berharga.”

Karena sangat populer, ada banyak sumber untuk mempelajari React. Semuanya, mulai dari video YouTube hingga kursus online berbayar dan dokumentasi React resmi dapat memberikan titik awal yang kuat untuk pendidikan Anda.

Bereaksi dan JavaScript

Sebelum menggali terlalu dalam, penting untuk diketahui bahwa React hanyalah JavaScript. Pemula sering melompat ke React karena tampaknya sangat sederhana dibandingkan dengan JavaScript, hanya untuk segera menemukan diri mereka terjebak karena mereka tidak memahami dasar-dasar JS. Sebelum mempelajari kerangka kerja apa pun, penting untuk menyelami esensi pemrograman secara keseluruhan.

“Jika Anda mempelajari pengembangan web, React adalah teknologi yang mungkin pernah Anda dengar. Tapi apa yang saya lihat secara pribadi dari orang-orang yang melompat ke dalamnya terlalu cepat adalah mereka bingung tentang di mana React dimulai dan di mana JavaScript berakhir,” kata Joe Karlsson, seorang advokat pengembang di MongoDB. “Banyak orang berpikir bahwa hal-hal di dalam React adalah apa itu JavaScript, dan mereka terkejut ketika ternyata tidak.”

Apa Langkah-Langkah Memulai Belajar React?

Mari kita lihat beberapa langkah terbaik untuk mulai mempelajari React dan ekosistem JavaScript modern secara keseluruhan.

Sebelum Anda Memulai React…

Mungkin tergoda untuk terjun langsung dengan React sebelum Anda memahami dasar-dasar JavaScript. Tetapi ada lebih banyak kerangka kerja daripada hanya bahasa, dan Anda memerlukan beberapa alat penting untuk memulai.

Hal pertama yang perlu Anda ketahui adalah JavaScript. Dasar yang kuat dalam bahasa dan konvensinya akan sangat membantu Anda saat Anda mulai belajar React. Semuanya, mulai dari manajer paket hingga konfigurasi hingga komponen dan logika bisnis di React adalah JavaScript, jadi mengetahuinya dengan baik adalah langkah pertama.

Karlsson mengatakan langkah selanjutnya adalah membangun sesuatu dari awal. “Cobalah untuk membuat aplikasi web sederhana … yang tidak menggunakan kerangka kerja apa pun,” katanya. “Anda ingin memiliki beberapa fungsi dasar dengan JavaScript … sebelum Anda terjun.”

Selanjutnya, Anda perlu memahami sedikit tentang paket dan manajemen paket, yaitu dengan NPM atau Yarn. Keduanya adalah pengelola paket JavaScript yang memungkinkan Anda mendeklarasikan dependensi, atau bit kode yang membantu Anda mencapai fungsionalitas tertentu tanpa harus menulisnya dari awal.

Sumber Daya dan Referensi untuk Memulai

Mempelajari JSX, State dan React Hooks

Setelah Anda terbiasa dengan JavaScript dan paket, Anda siap untuk mulai belajar React.

Pertama, selami komponen JSX dan React. Komponen adalah blok bangunan dari setiap aplikasi React. Anda dapat menganggap komponen sebagai potongan kode yang dapat digunakan kembali yang mungkin berisi konten yang berbeda, atau memiliki sedikit perbedaan visual, tetapi pada akhirnya merupakan ide yang sama.

Misalnya, gambar header besar dengan teks di atasnya di bagian atas halaman – biasanya disebut pahlawan – adalah contoh komponen. Anda mungkin memiliki beberapa halaman di situs atau aplikasi Anda yang menyertakan pahlawan, tetapi semuanya memiliki gambar dan teks yang berbeda. Memahami bagaimana membagi aplikasi Anda menjadi komponen adalah penting, dan mengetahui bagaimana menulis komponen fungsional menggunakan komposisi komponen, komponen tingkat tinggi dan pola lainnya adalah penting untuk menulis kode React yang baik. Anda juga perlu mempelajari bagaimana props – kependekan dari “properties” – digunakan untuk menyediakan data ke komponen dan memvariasikan penampilannya.

React juga dapat memberikan interaktivitas. Kode “logika bisnis” ini biasanya ditangani di Bereaksi dengan cara kait, yang memanggil kode untuk dijalankan pada waktu tertentu, untuk mengontrol data yang mengontrol aplikasi – yang dikenal sebagai status – dan banyak bagian logika bisnis lainnya.

“Cara saya (mempelajari hook) hanyalah dokumentasi React,” kata Skarlett. “Ini trial and error, proyek kecil, aplikasi yang harus dilakukan. Dari sana, akhirnya hanya klik.”

Bagian penting ketiga untuk mempelajari React adalah memahami status, objek data yang menyebabkan antarmuka aplikasi Anda “bereaksi” sebagai respons terhadap perubahan.

Contoh yang baik adalah penghitung. Anda memiliki sejumlah besar di layar. Di sebelahnya ada tombol yang menambah jumlah saat Anda mengkliknya. Anda akan menggunakan pengait untuk membuat bagian status untuk hitungan saat ini, dan fungsi untuk meningkatkan status hitungan saat tombol diklik.

Manajemen Negara

Semakin besar aplikasi Anda, semakin banyak status yang dibutuhkan aplikasi Anda untuk berfungsi. Semua keadaan ini bisa menjadi rumit, terutama ketika banyak komponen membutuhkan “pengetahuan” tentang bagian tertentu dari keadaan itu. Contohnya adalah ketika pengaturan pengguna, dasbor, dan bagian lain dari suatu aplikasi perlu mengetahui pengguna mana yang masuk. Anda dapat membuat status itu hidup di bagian atas aplikasi dan kemudian diturunkan dari komponen ke komponen melalui alat peraga, tetapi semua yang berlalu dengan cepat menjadi berantakan.

Hari-hari ini, banyak orang menggulirkan sistem manajemen negara mereka sendiri menggunakan kait, dengan hasil yang baik. Meskipun tidak ada yang salah dengan pendekatan ini, ada beberapa perpustakaan lain untuk manajemen status, seperti Redux dan MobX. Pustaka ini memungkinkan Anda membuat “toko” status yang kemudian diperbarui dan diakses dari mana saja di aplikasi – tidak perlu melewati alat peraga.

Skarlett mengatakan rahasia untuk aplikasi yang besar dan bersih adalah manajemen keadaan yang baik – tetapi jangan berlebihan. “Pada titik tertentu … Anda perlu memahami keadaan Anda … Hanya karena Anda memiliki beberapa keadaan tidak berarti Anda membutuhkan (Redux). Beberapa status digunakan hanya oleh satu komponen, dan itu benar-benar tidak perlu dibagikan.”

Mampu mengelola sejumlah besar status di aplikasi besar akan membawa Anda dari pengembang Bereaksi pemula ke pengembang menengah dengan cepat.

Selami Pembelajaran React Tingkat Lanjut

Setelah Anda menguasai dasar-dasar dan beberapa konsep menengah dalam React, hampir tidak ada akhir untuk konsep lanjutan yang dapat Anda pelajari. Tetap mengikuti praktik terbaik akan membantu Anda terus belajar setiap hari.

Di React, Anda akan paling sering mengambil data Anda dari sumber eksternal yang dikenal sebagai antarmuka pemrograman aplikasi – API – umumnya RESTful API. Mempelajari cara mendapatkan data dari sumber ini menggunakan pustaka pengambilan asli atau pustaka eksternal lanjutan seperti Axios akan membawa pengembangan Anda ke tingkat berikutnya.

GraphQL adalah jenis lain dari API dan metode kueri yang mengembalikan data yang lebih tepat. Menggunakan perpustakaan seperti Apollo untuk mendapatkan dan memanipulasi data dalam API GraphQL dapat berguna di berbagai proyek berbasis React.

Bagi Karlsson, hal terpenting yang harus dipahami oleh pengembang React tingkat lanjut adalah shadow DOM. “Memahami DOM … yaitu bagaimana browser berinteraksi dengan antarmuka pengguna … React memiliki representasi ujung depan di memori sehingga dapat membuat operasi cepat di atasnya, tetapi orang menulis kode yang tidak memanfaatkannya, ” dia berkata.

React vs. Angular vs. Vue: Apa Bedanya?

Jika Anda masih bertanya-tanya framework apa yang harus mulai dipelajari, Anda mungkin mencoba memilih antara React, Angular, dan Vue. Secara pribadi, saya merekomendasikan untuk mempelajari beberapa dari semuanya. Masing-masing menawarkan kerangka kerja JavaScript-pertama untuk membuat antarmuka pengguna sambil memiliki kekuatan dan kelemahannya sendiri.

React mengklaim komunitas yang kuat dan perpustakaan pihak ketiga dalam jumlah besar untuk membantu Anda bangun dan berjalan dengan cepat. Vue menawarkan pendekatan kerangka kerja yang lebih sederhana, memungkinkan Anda untuk menggunakan kode sebanyak atau sesedikit yang Anda suka. Angular umumnya lebih kompleks, dan kurang diadopsi secara luas, tetapi sangat andal.

“Alat terbaik untuk pekerjaan itu adalah yang paling efisien bagi Anda. Itu harus menyelesaikan masalah yang Anda coba selesaikan, ”kata Karlsson. “Kebanyakan kerangka kerja front-end melakukan hal yang sama … Saya lebih suka Bereaksi karena itu yang saya tahu.”

Bagaimana Sukses dalam Studi React

Jika Anda ingin benar-benar mempelajari React dan mempersiapkan diri untuk berkarir sebagai pengembang React, berikut beberapa hal yang dapat membantu Anda:

  • Bergabunglah dengan komunitas online. Ada banyak grup online untuk orang-orang yang bekerja keras untuk belajar React. Komunitas ini sebagian besar positif dan mendorong orang baru.
  • Gunakan Twitter. Ini penuh dengan pengembang profesional dan merupakan aliran pengetahuan yang konstan tentang teknik terbaru untuk pengembangan React.
  • Berlatihlah setiap minggu. Temukan ide baru untuk dipelajari setiap minggu melalui proyek. Bangun proyek sederhana seperti daftar tugas dan penghitung, dan kerjakan hingga aplikasi web lengkap. Gunakan API gratis dan publik seperti Open Movie Database atau PokéAPI untuk membangun aplikasi untuk menampilkan informasi yang bersumber dari sumber eksternal.
  • Cari mentor. Memiliki seseorang untuk menjawab pertanyaan, memberikan umpan balik pada kode Anda dan membantu Anda melalui masalah sulit sangat berharga. Jika Anda tidak dapat menemukan siapa pun di dekat Anda, cari orang yang bersedia membantu secara online.
  • Jangan menyerah. Mempelajari sesuatu yang baru memang sulit. Bahkan pengembang JavaScript berpengalaman pun bisa frustrasi ketika mempelajari kerangka kerja baru, dan React tidak berbeda. Teruslah melakukannya, terus belajar dan jangan pernah menyalahkan diri sendiri atas apa yang Anda lakukan kemarin. Selalu bekerja untuk menjadi lebih baik setiap hari.

Posted By : keluar hk