Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Aplikasi React Satu Halaman Dengan Modul React-Router dan React-Transition-Group

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Ade Khairul Umam (you can also view the original English article)

Tutorial ini akan memandu Anda menggunakan modul react-router dan react-transisi-grup untuk membuat aplikasi React multi-halaman dengan animasi transisi halaman.

Mempersiapkan Aplikasi React

Menginstal Paket create-react-app

Jika Anda pernah memiliki kesempatan untuk mencoba React, Anda mungkin pernah mendengar tentang paket create-react-app, yang membuatnya sangat mudah untuk memulai dengan lingkungan pengembangan React.

Dalam tutorial ini, kita akan menggunakan paket ini untuk memulai aplikasi React kami.

Jadi, pertama-tama, pastikan Anda memiliki Node.js yang diinstal pada komputer Anda. Ini juga akan memasang npm untuk Anda.

Dalam terminal Anda, jalankan npm indtall -g create-react-app. Ini secara global akan menginstal create-react-app di komputer Anda.

Setelah selesai, Anda dapat memverifikasi apakah itu ada dengan mengetik create-react-app -V.

Membuat proyek React

Sekarang saatnya untuk membangun proyek React kita. Jalankan saja create-react-app multi-page-app. Anda tentu saja dapat mengganti multi-page-app dengan apa pun yang Anda inginkan.

Sekarang, create-react-app akan membuat folder bernama multi-page-app. Cukup ketik cd multi-page-app untuk mengubah direktori, dan npm strart untuk menginisialisasi server lokal yang menjalankan sekarang.

Itu saja. Anda memiliki aplikasi react yang menjalankan pada server lokal Anda.

Sekarang saatnya untuk membersihkan file default dan mempersiapkan aplikasi kita.

Dalam src folder, menghapus segala sesuatu kecuali App.js dan index.js. Kemudian buka index.js dan ganti konten dengan kode di bawah ini.

Saya pada dasarnya menghapus baris terkait registerServiceWorker dan juga impor './index.css'; baris.

Juga, ganti file App.js Anda dengan kode di bawah ini.

Sekarang kita akan menginstal modul yang diperlukan.

Di terminal Anda, ketik perintah berikut untuk menginstal modul react-router dan react-transition-group masing-masing.

npm install react-router-dom --save

npm install react-transition-group@1.x --save

Setelah menginstal paket-paket, Anda dapat memeriksa berkas package.json dalam direktori proyek utama Anda untuk memverifikasi bahwa modul termasuk di bawah dependensi.

Komponen router

Pada dasarnya ada dua pilihan router berbeda: HashRouter dan BrowserRouter.

Seperti namanya, HashRouter menggunakan hash untuk melacak link Anda, dan sangat cocok untuk server statis. Di sisi lain, jika Anda memiliki sebuah server yang dinamis, itu adalah pilihan yang lebih baik untuk menggunakan BrowserRouter, mengingat fakta bahwa URL Anda akan lebih cantik.

Setelah Anda memutuskan mana yang harus Anda gunakan, hanya pergi ke depan dan menambahkan komponen ke file index.js Anda.

Impor {HashRouter} dari 'react-router-dom'

Hal berikutnya adalah untuk membungkus komponen <App> kami dengan komponen router.

Jadi file index.js akhir Anda akan terlihat seperti ini:

Jika Anda menggunakan server yang dinamis dan lebih memilih untuk menggunakan BrowserRouter, satu-satunya perbedaan akan mengimpor BrowserRouter dan menggunakannya untuk membungkus <App> komponen.

Oleh pembungkus komponen <App> kami, kami melayani objek sejarah ke aplikasi kita, dan dengan demikian komponen react-router lain dapat berkomunikasi dengan satu sama lain.

Di dalam <App> komponen

Di dalam komponen <App> kita, kita akan memiliki dua komponen yang bernama <Menu> dan <Content>. Seperti nama-nama menyiratkan, mereka akan terus menu navigasi dan konten yang ditampilkan masing-masing.

Buat folder dengan nama "components" di direktori src, dan kemudian membuat file Menu.js dan Content.js.

Menu.js

Mari kita isi komponen Menu.js.

Ini akan menjadi komponen fungsional stateless karena kita tidak membutuhkan status dan kait siklus hidup.

Di sini kita memiliki tag <ul> dengan <li> Tag, yang akan menjadi link kami.

Sekarang tambahkan baris berikut ke komponen Menu Anda.

impor {Tautan} dari 'react-router-dom'

Dan kemudian bungkus konten tag <li> dengan komponen <link>.

Kmponen <link> pada dasarnya adalah komponen react-router yang bertindak seperti tag <a>, tetapi tidak memuat ulang halaman Anda dengan tautan target baru.

Juga, jika Anda menata tag a di CSS, Anda akan melihat bahwa <Link> komponen mendapat styling sama.

Perhatikan bahwa ada versi yang lebih canggih dari komponen <link>, yaitu <NavLink>. Ini menawarkan fitur tambahan sehingga Anda dapat mnata link aktif.

Sekarang kita perlu menentukan di mana setiap tautan akan bernavigasi. Untuk tujuan ini, komponen <link> memiliki to untuk menopang

Content.js

Di dalam <Content> komponen kami, kita akan menentukan Routes untuk mencocokkan link.

Kita perlu Switch dan Route komponen dari react-router-dom. Jadi, pertama-tama impor mereka.

Impor {Switch, rute} dari 'bereaksi-router-dom'

Kedua, impor komponen yang ingin kita rutekan. Ini adalah komponen Home , Works dan About untuk contoh kami. Dengan asumsi Anda telah membuat komponen-komponen itu di dalam folder komponen , kami juga perlu mengimpornya

Impor rumah dari '. / Home'

mengimpor Karya dari './Works'

impor About dari './About'

Komponen-komponen itu bisa apa saja. Saya hanya mendefinisikannya sebagai komponen fungsional stateless dengan konten minimum. Contoh template di bawah ini. Anda dapat menggunakan ini untuk ketiga komponen, tetapi jangan lupa untuk mengubah nama yang sesuai.

Beralih

Kami menggunakan komponen <Switch> untuk mengelompokan komponen <Route> kami. Beralih terlihat untuk semua rute dan kemudian kembali pertama yang cocok.

Route

Rute adalah komponen yang memanggil komponen target Anda jika cocok dengan path penyangga

Versi final file Content.js kami terlihat seperti ini:

Perhatikan bahwa prop ekstra tepat diperlukan untuk komponen Home , yang merupakan direktori utama. Menggunakan kekuatan yang exact , Rute untuk mencocokkan pathname yang tepat. Jika tidak digunakan, nama path lain yang dimulai dengan / juga akan dicocokkan dengan komponen Home , dan untuk setiap tautan, itu hanya akan menampilkan komponen Home .

Sekarang ketika Anda mengklik tautan menu, aplikasi Anda harus mengalihkan konten.

Animasi transisi rute

Sejauh ini, kami memiliki sistem router yang berfungsi. Sekarang kita akan menghidupkan transisi rute. Untuk mencapai ini, kita akan menggunakan modul react-transition-group .

Kami akan menjiwai status pemasangan setiap komponen. Ketika Anda merutekan komponen yang berbeda dengan komponen Rute di dalam Switch , Anda pada dasarnya memasang dan melepas komponen yang berbeda sesuai.

Kami akan menggunakan react-transition-group di setiap komponen yang ingin kami animasikan. Jadi Anda dapat memiliki animasi pemasangan berbeda untuk setiap komponen. Saya hanya akan menggunakan satu animasi untuk semuanya.

Sebagai contoh, mari kita gunakan <Home> komponen.

Pertama, kita perlu untuk impor CSSTransitionGroup.

Impor {CSSTransitionGroup} dari 'bereaksi-transisi-grup'

Maka kamu perlu membungkus content kamu dengannya.

Karena kita berhadapan dengan status pemasangan komponen, kami mengaktifkan transitionAppear dan menetapkan batas waktu untuk komponen itu. Kami juga menonaktifkan transisiEnter dan transisiLeave, karena ini hanya valid setelah komponen di-mount. Jika Anda berencana untuk menghidupkan anak-anak dari komponen ini, Anda harus menggunakannya.

Terakhir, tambahkan transitionName tertentu sehingga kita dapat menyebutnya dalam CSS file.

Kami juga impor file CSS, yang mana kita mendefinisikan transisi CSS.

Jika Anda me-refresh halaman, Anda akan melihat efek fade-in komponen Home .

Jika Anda menerapkan prosedur yang sama untuk semua komponen yang diarahkan lainnya, Anda akan melihat animasi masing-masing ketika Anda mengubah konten dengan Menu Anda .

Kesimpulan

react-router-dom dan react-transisi-grup. Namun, ada lebih banyak kedua modul daripada yang kita bahas dalam tutorial ini. Berikut ini adalah demo kerja dari apa yang dibahas.

Jadi, untuk mempelajari lebih banyak fitur, selalu pergi melalui dokumentasi modul yang Anda gunakan.

Selama beberapa tahun terakhir, bereaksi telah tumbuh dalam popularitas. Pada kenyataannya, kami memiliki sejumlah item di pasar yang tersedia untuk pembelian, meninjau, implementasi, dan sebagainya. Jika Anda sedang mencari sumber-sumber tambahan di sekitar bereaksi, jangan ragu untuk memeriksa mereka keluar.

Advertisement
Advertisement
Advertisement
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.