Skip to main content
tutorial react 1 logo

Tutorial React 1 : Persiapan untuk Memulai Belajar React

Tutorial React 1: Persiapan untuk memulai belajar React, dimulai dengan mempersiapkan peralatan yang akan digunakan, memahami apa itu react, serta memahami folder struktur di react.

BACA:

Apa Itu React JS ?

React adalah sebuah library Javascript dan bukan framework , yang dikembangkan oleh Facebook. Seperti yang mungkin sudah anda ketahui, bahwa ada 2 tipe pemrogram di pemrograman web yakni Front End dan Back End. Front End biasa merupakan halaman antarmuka, yang berkaitan dengan UI/UX desain. Sedangkan Back End adalah yang mengatur bagaimana website itu berjalan dan alur kerjanya.

Dengan javascript, seorang frontend developer dapat membuat tampilan desain antarmuka yang dinamis dan interaktif. Sehingga dengan Javascript anda dapat membuat SPA atau Single Page Action, yakni halaman website yang dapat diupdate kontennya tanpa perlu menekan tombol refresh di browser  atau loading keseluruhan halaman. Dan dahulu, javascript adalah client side programming sedangkan server side programming kita menggunakan PHP. Akan tetapi saat ini semua itu telah berubah, dengan belajar html, javascript, dan css saja, anda bisa membuat website yang interaktif dan dinamis, tanpa perlu belajar PHP.

Bahkan dengan belajar React, anda dapat membuat 4 platform aplikasi sekaligus, yaitu: website, android, ios dan dekstop. Dengan react native anda tidak perlu belajar beragam bahasa pemrograman untuk membuat aplikasi yang berbeda platform. Sehingga ini melipatgandakan pendapatan anda dan sekaligus menghemat waktu anda sebagai seorang programmer.

Persiapan install tools yang akan digunakan

1. Node JS

Download Node.Js dan install di komputer anda. Anda bisa mendownload nya disini.

tutorial react 1 gb1

2. Visual Studio Code

Download Visual Studio Code dan install di komputer anda. Anda bisa mendownload nya disini. Visual Studio Code adalah text editor seperti halnya sublime, notepad++ , atau atom. Dan sepanjang tutorial ini nantinya kita akan terus menggunakan visual studio code.

tutorial react 1 gb2

Tutorial react 1: Setelah semua persiapan tools sudah dilakukan, maka langkah selanjutnya adalah memulai kita membuat sebuah folder yang didalamnya terdapat react js ini.

 

Mulai React

1. Buatlah folder di pc anda dengan nama apa saja, dalam latihan ini saya memberi contoh folder dengan nama “latihan_react”

2. Buka Visual Studio Code anda, dan buka folder latihan_react anda di visual studio code. Dan hasilnya akan nampak folder kosong latihan_react seperti di bawah ini:

react gb3

 

3. Kemudian arahkan ke menu Terminal > New Terminal

react gb4

 

4. Pada console terminal, pastikan directory sudah berada di directory latihan_react

react gb 5

 

5. Jika sudah benar maka ketikkan kode berikut, dan tunggu prosesnya sampai selesai:

npx create-react-app nama_aplikasi

react gb6

 

6. Jika sudah terinstall, maka dalam folder latihan_react anda akan memiliki file dari react js. Dan pada tutorial selanjutnya kita akan bahas tentang struktur folder react.

react gb7

7.Kemudian di terminal, anda arahkan kembali ke directory latihan_react/namaaplikasi . Nama aplikasi yang sebelumnya dibuat adalah “aplikasiku”. Sehingga arahkan ke directory latihan_react/aplikasiku dengan mengetik:

cd .\aplikasiku\

dan dilanjutkan dengan mengetik perintah:

npm start

react gb8

 

9. Dan browser anda akan nampak seperti ini saat url localhost:3000 diakses.

react gb9

 

Catatan Penulis

Membuat react app sebenarnya bisa dengan npx ataupun npm, perbedaannya adalah:

NPX

  • Perintah install : npx create-react-app <nama project>
  • npx adalah npm package runner.
  • sifatnya temporary dan memerlukan koneksi internet, dan digunakan kondisi trial atau latihan.

NPM

  • Perintah install : create-react-app-g dilanjutkan dengan create-react-app<nama project>
  • Diinstall di aplikasi secara permanen sekali saja di setiap aplikasi / project.

Saya lebih senang menggunakan NPX karena npx selalu mengecek lingkungan dimana react dijalankan, dan akan menginstall otomatis package yang belum diinstall jika dibutuhkan.

Leave a Reply

Your email address will not be published. Required fields are marked *