Scribd
Unggah
25 tayangan7 halaman

Tugas Besar Web Modern

Diunggah oleh

wahyudinidrus906
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
25 tayangan7 halaman

Tugas Besar Web Modern

Diunggah oleh

wahyudinidrus906
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

1

“Web Modern”

1. Unduh dan Install Node.Js dari situs web resminya


https://nodejs.org/en

2. Buka Command Promt, ketik : `cd c:\`

3. Ketik : `npx create-react-app nama_aplikasi --template typescript`


2

4. Tunggu sampai instalasi selesai

5. Uji apakah Instalasi sudah berhasil ketik : `cd tugasku` kemudian `npm start`
3

6. Jika sudah muncul pada browser seperti gambar di bawah ini, Instalasi telah berhasil, jika tidak
muncul ketik http://localhost:3000 pada browser.

7. Unduh dan instal Visual Studio Code dari situs web resminya
https://code.visualstudio.com/

8. Buka Aplikasi Visual Code dan Instal ekstension “ES7+ React/Redux/React-Native/JS snippets”.
4

9. Buka folder Tugasku atau project yang telah di buat pada Visual Code, menu : File -> Open Folder
Hasilnya seperti di bawah ini

10. Buka lembar kerja dengan nama file `App.tsx`


Rubah menjadi seperti di bawah ini :
5

11. Buat file dengan nama : `DataMahasiswa.tsx`


Tuliskan code seperti di bawah ini :

12. Buat File dengan nama `DaftarMahasiswa.tsx`


Tuliskan code seperti di bawah ini :
6

13. Rubah kembali Code pada file `App.tsx`, menjadi seperti di bawah ini :

14. Hasil dari Aplikasi Anda Harusnya Seperti ini :


7

Catatan :

1. Daftar Nama Mahasiswa pada tugas harus berbeda setiap tugas mahasiswa
2. Menyelesaikan langkah-langkah di atas sudah mendapatkan Nilai Default
3. Menambah fitur/componen lainnya pada Aplikasi di atas (mengembangkan aplikasi)
mendapatkan Nilai Tambahan
4. Tugas yang di kirim adalah capture hasil Aplikasi yang di buat dengan ekstensi JPG dan Folder
File `src` pada project (tidak perlu mengirim semua folder project karena kapasitas yang di
hasilkan sangat besar).
5. Tugas di kirimkan ke google drive dengan membuat folder masing-masing dengan NIM – NAMA
sebagai nama folder. Link URL akan di kirimkan ke Ketua Tingkat

Referensi untuk anda yang bisa di pelajari :

https://www.youtube.com/results?search_query=step+by+step+react+typescript

Anda mungkin juga menyukai