Scribd
Unggah
20 tayangan7 halaman

Modul React JS 1 - 2

Modul ini membahas tentang instalasi React JS pada komputer Windows, membuat komponen-komponen pada React, dan menambahkan gambar pada komponen React. Langkah-langkahnya meliputi menginstal Node JS dan Create React App, membuat proyek baru, membuat beberapa komponen seperti Home.js dan mengimpornya di index.js, serta menambahkan gambar pada komponen dengan menyertakan tag img.

Diunggah oleh

Panji Dwi Saputro
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 DOCX, PDF, TXT atau baca online di Scribd
20 tayangan7 halaman

Modul React JS 1 - 2

Modul ini membahas tentang instalasi React JS pada komputer Windows, membuat komponen-komponen pada React, dan menambahkan gambar pada komponen React. Langkah-langkahnya meliputi menginstal Node JS dan Create React App, membuat proyek baru, membuat beberapa komponen seperti Home.js dan mengimpornya di index.js, serta menambahkan gambar pada komponen dengan menyertakan tag img.

Diunggah oleh

Panji Dwi Saputro
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 DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

MODUL REACT JS : BAGIAN 1

INSTALASI REACT PADA KOMPUTER WINDOWS

Penginstalan React Js Pada computer Windows


1. Download Node JS pada situs nodejs.org kemudian install pada computer
2. Cek melalui CMD (Command Prompt). Dengan mengetikkan perintah npm -v seperti pada
gambar dibawah ini :

3. Jika muncul versi dari node js nya maka node js sudah terinstall pada computer kemudian
arahkan ke drive c: xampp/htdocs dengan perintah cd c:/ kemudian cd xampp/htdocs

4. Proyek React baru dengan struktur dan konfigurasi proyek yang direkomendasikan. Untuk
menginstal Create React App secara global, buka command prompt dan jalankan perintah
berikut:
npm -g create-react-app

5. cara “ Create a New React Project “ ketikkan perintah create-react-app latihan-react

keterangan : latihan-react adalah nama projectnya bisa diganti dengan nama lain

6. jika tertulis happy hacking ! maka project react berhasil di install di computer anda lihat gambar
bawah :

7. selanjutnya arahkan ke folder yang sudah dibuat tadi dengan perintah cd latihan-react kemudian
enter lalu ketikkan npm start untuk menjalankan di browser , jika muncul notifikasi windows
defender running node Js Klik tombil Allow Access
8. copy http://localhost:3000 ke browser (chrome)

9. jika tampil seperti diatas maka react berhasil dijalankan.


MODUL REACT JS : BAGIAN 2
KOMPONEN PADA REACT

1. Komponen adalah bagian-bagian yang menyusun aplikasi React.


2. Buka vs code kemudian open folder “buka project yang sudah dibuat pada modul
pertama “.

3. Kemudian akan muncul tampilan di bawah ini

Keterangan :
- Folder Public berisi file index.html yang dirunning oleh system react , selain itu pada
folder bisa digunakan menaruh asset-aset seperti gambar dsb
- Folder src terdiri dari index .js dimana file inilah yang dirunning oleh dokumen
index.html , kemudian App.js adalah salah satu komponen pembentuk yang
digunakan di file index.js

4. Coba buka file index.js di dalam file tersebut terdapat kode <App /> dimana kode tersebut
adalah salah satu komponen pembentuk tampilan utama react.js
5. Buka App.js kemudian rubah scriptnya menjadi seperti dibawah ini :

Kemudian buka browser lagi maka secara otomatis akan menjadi tampilan seperti
dibawah ini
6. Kemudian kita akan membuat komponen lagi yang akan kita panggil di index.js yakni
komponen: Home.js, Berita.js, Materi,js, About.js buat folder baru dengan nama
pages di dalam folder src terlihat pada gambar dibawah ini :

7. Didalam folder pages buat file baru dengan nama Home.js pastikan huruf awalan menggunakan
huruf kapital/ huruf besar

8. Buka folder tersebut dan isikan script / copikan script dari App.js dan edit sehingga
menjadi seperti dibawah ini :
9. Kemudian buka file index.js tambahkan script import Home from ‘./pages/Home’;

10. Dan juga tambahkan <Home /> di bagian dalam <React.Strictmode>

11. Kemudian buka tampilan di browser chrome dengan perintah npm start

12. Untuk Berita.js , Materi.js, About.js ulangi Langkah-langkah pada nomor 7 – 11

TUGAS

Dari Modul diatas buatlah instalasi baru react dengan nama “tugas-modul2”
Kemudian tambahkan komponen berikut ini (Home.js, Jurusan.js, Bkk.js dan
Ppdb,js) kedalam project anda
MODUL REACT JS : BAGIAN 3
MENAMBAHKAN GAMBAR

1. Buka folder project sebelumnya kemudian pada folder public buat folder dengan nama
images dan tambahkan gambar di dalam folder images

2. Kemudian buka salah satu komponen disini dicontohkan komponen Materi.js


Kemudian tambahkan code <img src=’images/logo.png’ alt=’logo’ /> seperti gambar
dibawah ini :

3. jgn lupa untuk running projectnya dan lihat tampilan dibrowser localhost:3000

Anda mungkin juga menyukai