Tutorial Belajar Reactjs #6: Membuat Project React js full library

 

Materi Tutorial Kali ini kita akan membahas bagaimana cara membuat project dengan react js full library agar struktur penulisan koding lebih rapi. materi kali ini merupakan tutorial lanjutan dari materi sebelum nya tentang ,Tutorial Belajar Reactjs #5: Mengenal State dan Event Pada Reactjs.

pada tutorial sebelum- sebelumnya kita membuat project react js dengan menggunakan bantuan library babel javascript, dimana kira menulis semua koding kita dalam satu file index.html. jika kita membuat sebuah project yang mungkin menggunakan banyak komponent maka akan cukup sulit untuk memaintenance ketika terjadi kasalahan pada program nya. dan punlisan nya pun masih di bilang tidak rapi. 

maka dari itu pada tutorial kali ini, kita mencoba untuk membuat project react js dengan full library dari react js nya, sbelum memumali, ada beberapa hal yang perlu di perhatikan , sebelum kita membuat project dengan menggunakan library full dari react js , ada beberapa software pendukung yang perlu terlebih dahulu di instal. beberapa software tersebut diantaranta :

• Node js, fungsi dari Node js ini sama saja seperti kita menggunakan XAMPP , karna react js berbasis javascript maka fungsi dari node js ini berfungsi untuk melengkapi sevirce yang diperlukan untuk menjalankan services javascript dari module dan library dari react js. dan untuk membuat project react js , dari situs remisnya react js menyarakan untuk menggunakan node js  versi terbaru atau >= 8.10

• Npm Package, merupakan package untuk menginstal library atau module-module tambahan yang kita perlukan dalam membuat project react js. sedangkan untuk membuat project react js diperlukan NPM versi >= 5.6

• Koneksi Internet,  untuk membuat project react full library di butuhkan koneksi internet karna kita mengunduh langsung library dan Module dari react js nya.

untuk tutorial menginstal Nodejs dan NPM nya kita tidak bahas pada tutorial ini. Langsung saja untuk membuat project react js, kita pelu membuka CMD , disini saya menggunakan Git CMD.  lalu tuliskan perintah berikut ini pada CMD

  npx create-react-app [my-app].

1.Buat folder Baru

Buat sebuah folder baru lalu ketikan perintah diatas pada CMD , pada perintah diatas yang terdapat dalam tanda kurung siku merupakan untuk inisialisai nama dari project yang akan kita buat, misalkan

my-tutorial, untuk lebih jelas bisa lihat gambar di bawah ini.

Perintah Awal

setelah perintah selesai di tulis, lalu tekan enter, dan tunggu beberapa saat maka,  react akan menginstal project baru dengan nama my-tutorial, jika hasil dari CMD nya seperti gambar di bawah ini berarti kita telah berhasil membuat project react js full library nya.

Proses Instalasi Berhasil

maka didalam folder baru yang telah kita buat tadi, akan terdapat sebuah folder yang berisi project dari react js nya sesuai dengan nama yang kita tulis dalam perintah CMD di atas. untuk menjalankan project nya kita perlu masuk terlebih dahulu dalam folder project nya dengan cara , tuliskan

• cd nama-folder ,   (untuk Masuk ke folder project)  Enter
• npm start, ( Untuk running project )  Enter
• Ctrl + C , untuk Stop runing program, (Pada CMD)

maka project react yang telah kita buat akan otomatis running pada browser dengan link http://localhost:3000/ untuk lebih jelas bisa lihat gambar beriku  ini

 

 

perintah runing project react

Hasil running program

2. Struktur Folder

sekarang kita telah mebuat project react js full library, dan struktur dari folder kita seperti gamabar berikut.

Struktur Folder Project React

berbeda dengan project yang telah kita pelajari pada tutorial sebelumnya, hanya membuat satu folder dan datu file, dengan menggunakan react full library , maka struktur folder project kita akan terlihat seprti gambar di atas yang memiliki 3 folder utama, adapun penjelsan singkat mengenai folder folder tersebut sperti berikut ini.

#Penjelasan

• Node Module, berisi folder dan kumpulan library dari react js, yang akan kita gunakan dalam pembuatan aplikasi dengan menggunakan react js

• Public, Berisi file beberapa file yang nantinya dapat kita gunakan dalam pengembangan project, dan dalam folder Public ini terdapat file index.html, nah file ini lah yang digunakan untuk merender component yang kita buat dalam react js. sama dengan file index.html yang telah kita pelajari pada tutorial sebelumnya.

• Src, pada folder ini lah yang nantinya akan kita gunakan untuk membuat atau menulis koding javascript dari component yang akan kita buat, dalam folder ini kita juga dapat mengelompokan file dari component yang akan kita buat.

pada saat kita membuat project dengan full library dari react, maka file untuk yang akan di render oleh react pertama kali saat di jalankan adalah file index.js.

yang terdapat pada folder Src, sama sperti kita membuat component pada tutorial sebelumnya. didalam file index.js ini, merender sebuah component App, yang mana file ini di import dari file App.js, maka Component App ini lah yang di render pertama kali saat project di jalakan. Penjelsan singkat pada gambar di bawah ini.

file Index.js

Agar lebih jelas coba kita ubah isi dari component App , silahkan buka kode editor, lalu buka file App.js pada folder Src, lalu gani dengan koding berikut ini.

  import './App.css';

  function App() {
    return (
      <div className="App">
       <h2>Hello World, React Js Full Library</h2>
      </div>
    );
  }

  export default App;

#penjelsan

• line 1, perintah import Style.css, yang mana file Css nya bernama App.css
• Line 2 -9 , kita membuat sebuah Component App dengan menggunakan, functional component
• line 11 , perintah export, agar Component App, dapat di panggil pada file Index.js

lalu save dan coba buka lagi dibrowser dengan reload ulang browsernya, jika kalian menstop running project react js nya, jalakan terlebih dahulu seperti pada langkah no 1 diatas. dan hasil nya sperti gambar berikut.

Hasil Running

pada materi tutorial kali inkita telah berhasil membuat sebuah project dengan menggunakan react full library,

untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part #7.

Part#7 : Tutorial Belajar Reactjs #7: Berpindah Halaman pada React js dengan menggunakan react Router

Jika ada masukan dan saran mengenai postingan ini bisa berikan di kolom Komentar..

Sekian Dan Terima kasih...

#Happy Coding

#Keyword Penelusuran

• Belajar ReactJs 
• Tutorial ReactJs
• Belajar ReactJs Untuk Pemula
• Tutorial ReactJs Untuk Pemula
• Jenis Component pada React JS
• Class Component Pada Reactjs
• Cara menggunakan Class Component Pada Reactjs
• Cara memberi style pada component react js
• Membuat Project Baru dengan react Js
• Membuat Project Awal di react js
• Cara Buat Project react js

Share this post