React Router

-

 


 


Menyiapkan Project  React JS

1.    Pada folder utama toko-komputer, tambahkan folder bernama frontend

2.    Pada folder frontend, buat project ReactJs menggunakan perintah berikut

npx create-react-app admin-toko-komputer

3.    Install library yang dibutuhkan dengan perintah berikut

npm install  bootstrap dotenv react-router-dom --save

2.    Cek file package.json untuk melihat keberhasilan instalasi, library yang telah berhasil diinstall akan ditampilkan pada dependencies




 

Note: Praktikum ini menggunakan setting port 4000




Membuat Halaman dengan react-router-dom

1.    Pada file index.js (dalam folder src) import bootstrap dan react-router-dom kemudian ubah code seperti berikut>

    2.Dalam folder src, tambahkan folder component

  Di dalam folder component, tambahkan file Navbar.js kemudian tuliskan code seperti berikut


 

4. dalam folder src, tambahkan folder pages

Di dalam folder pages, buat 6 file  seperti berikut

Login.js

Home.js
Product.js
Customer.js
Transaction.js
Admin.js

Pada App.js import semua pages yang telah dibuat pada Langkah 3, kemudian atur path seperti code berikut


Cek apakah setiap path menampilkan halaman yang tepat, contohnya seperti halaman berikut





Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat CRUD dengan Node.js, sequlize, MySQL dan API

-
Gambar
  Dalam tutorial kali ini, saya akan sharing bagaimana membuat aplikasi CRUD (Create Read Update Delete) menggunakan node.js dan mysql. Persiapan Database   1. Buatlah sebuah database MYSQL dengan nama “crud” lalu untuk tabel dan isinya akan dibuat dengan menggunakan Library Sequelize.   2. Di bawah adalah tabel yang akan dibuat   Persiapan Project BackEnd NodeJS   1. Siapkan folder project bernama “CRUD”. 2. Lakukan inisiasi dengan menggunakan command npm init –y 3. Lakukan install Library Sequelize secara global dengan command npm install -g sequelize-cli 4. Install library yang dibutuhkan yaitu sequelize, mysql2, express, dengan command npm install sequelize mysql2 express, cors, 5. Eksekusi perintah berikut untuk mengijinkan pemberian perintah sequelize Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted   6. Lakukan inisiasi sequelize dengan command     sequelize init   7. Kemudian siapka...
Baca selengkapnya

Session Storage Local Storage, jquery, bootsrtap use React js

-
Gambar
  A.    Session Storage Session Storage adalah sebuah fitur untuk menyimpan data pada web browser ( client side ). Struktur dari session storage berupa key dan value di mana value hanya dapat disimpan dengan tipe String . Jika data yang akan disimpan berupa array atau object, kita harus mengonversi data tersebut ke bentuk JSON menggunakan fungsi JSON.stringify() . Data yang disimpan pada session storage hanya berlaku dan dapat diakses pada satu tab saja. Oleh karena itu data pada session storage tidak dapat diakses pada tab atau window lain meskipun membuka halaman yang sama. Selain itu data pada session storage akan expired atau hilang saat tab atau window ditutup. Untuk membuka isi dari session storage dengan membuka Inspect Element pada web browser kemudian membuka tab Application à Session Storage. A.    Local Storage Local Storage adalah sebuah fitur untuk menyimpan data pada web browser ( client side ). Struktur dari local storage berupa ke...
Baca selengkapnya