A. Install package manager

  1. Kita buka terminal kemudian jalankan perintah berikut ini untuk melakukan instalasi $ npm install -g create-react-app .
  2. Setelah proses instalasi package create-react-app selesai, kita bisa langsung memulai membuat aplikasi react pertama kita.
  3. Jalankan perintah berikut $ create-react-app my-app
  4. Jika proses create react app berhasil langkah selanjutnya Masuk kedalam folder nama aplikasi, kemudian jalan kan $ npm start.
  5. Jika proses compile berhasil maka akan tampil pada browser yaitu halaman localhost:3000.

Setelah Instalasi Package Manager kita akan mengistal material ui karena kita memakai material ui untuk style pada app reactjs

  1. Buka terminal pada visual studio kemudian ketik $ npm install @material-ui/core
  2. Setelah selesai kita bisa memilih component/style apa yang akan kita gunakan pada reactjs

 

B. Struktur direktori pada project React

  1.  node_modules berisi paket-paket modul Nodejs.
  2.  public berisi file untuk publik seperti HTML, CSS, icon, dan gambar.
    •  index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen
  3.  src berisi kode dari aplikasi Reactjs, di sinilah kita akan membuat komponen:
    •  components berisi kode untuk routing dan juga menempatan component/style pada materal ui.
    •  App.js berisi kode untuk komponen App atau komponen inti dari aplikasi.
    •  App.test.js berisi kode untuk testing komponen App.
    •  index.js berisi kode untuk render komponen App ke Real DOM. 
    • serviceWorker.js berisi kode untuk service worker, ini kita butuhkan nanti saat membuat aplikasi PWA (Progressive Web Apps).
    •  setTests.js berisi kode untuk testing aplikasi.

4. .gitignore berisi kode-kode yang akan diabaikan oleh Git.

5.  package.json file JSON yang berisi keterangan proyek dan daftar modul-modul yang dibutuhkan.

C. Cara routing pada Reactjs

  1. Kita buat file component terus didlam folder component kita buat folder terserah namanya kita ambil contohnya home didalam folder home buat file bernama Home.js berisikan code.

 

  1. Kita beralih ke app.js disini kita akan meng import file yang ada di folder componets dan juga routing.

  1. Jika sudah kita perintahkan npm start maka akan muncul pada browser kita localhost:3000.

SMK BINA NUSANTARA SEMARANG adalah sekolah menenengah kejuruan yang berdiri pada tanggal 18 mei 2010 dibawah Yayasan Bina Nusantara

SMK BINA NUSANTARA SEMARANG beralamat di jl.Kemantren No.5 wonosari Ngaliyan Semarang. Dengan luas lokasi  4004 m2, sarana dan prasarana yang memadai, suasana belajar yang nyaman karena berada di tengah perkamampungan masyarakat yang jauh dari kebisingan.

Sekolah

Sejarah

Kontak

Galeri

Berita Kampus

Quick Link

 PPDB

 Ujian

 Pengumuman

 Kelas Industri

Alamat

Jl. Kemantren Raya No.5, RT.02/RW.04, Wonosari, Kota Semarang

Copyright © 2020 Binusa Semarang

Made with ❤️ at Binusa Semarang