Tutorial React JS: Instalasi dan Dasar React - Code Pelajar

Tutorial React JS: Instalasi dan Dasar React


Belajar React Javascript

Code Pelajar - Selamat sobat Code Pelajar. Sudah lama saya tidak mengisi artikel disini karena kesibukan di Dunia nyata. Senang sekali pada kesempatan kali ini Code Pelajar akan membuat tutorial khusus dari Code Pelajar. Yakni tutorial React JS.



React adalah sebuah pustaka javascript (library) untuk membuat sebuah Antarmuka Pengguna (User Interface). React dikembangkan oleh facebook, komunitas dan perusahaan individual lainnya dan Biasanya React digunakan sebagai Basic library untuk mengembangkan aplikasi satu halaman (Singel Page Application)


Belajar React Javascript

Pada tutorial kali ini saya tidak akan menjelaskan panjang lebar apa itu React, fitur, kelebihan dan bacotan lainnya karena kalian bisa melihatnya jika kamu berkunjugn ke website officialnya React JS. Untuk seri sekarang kita belajar bersama mulai dari dasar.


Konsep yang ada pada React JS

Setelah baca-baca dan mencoba memahami tentang konsep tertulis pada website dan artikel react di Internet, saya bisa menyimpulkan bahwa konsep inti dari React JS adalah membangun aplikasi yang simpel dengan kode yang kompleks namun reusable. Kenapa react begitu kompleks? ini karena React memfokuskan kita untuk membangun UI yang interaktif. Untuk selengkapnya kamu bisa mempelajari Main konsepnya disini.


Instalasi React JS

Untuk instalasi sendiri, banyak cara untuk menambahkan library React JS ke website kita, baik menggunakan CDN ataupun download manual sourcenya. Namun untuk membuat sebuath project saya sarankan untuk menggunakan create-react-app dan install dengan npm (node packages manager). jika belum silahkan ikuti instruksi instalasi npmnya disini.

Karena saya pengguna linux maka berbahagialah karena sangat mudah menginstalnya via command line



// untuk menginstall react
npm install -g create-react-app

Dan jika sudah maka di terminal akan muncul:


Belajar React Javascript


Membuat Project React untuk Pertama Kalinya

Baiklah setelah instalasi selesai, mari kita membuat aplikasi react js dan menjalankan untuk pertama kalinya. Yang pertama kita lakukan adalah membuat react project nya terlebih dahulu.



// membuat file project react [untuk nama bebas]
create-react-app reactcodepelajar

Tunggu sampai instalasi selesai, jika sukses maka tampilan di terminal akan seperti ini.


Belajar React Javascript

Dan folder baru akan muncul:


Belajar React Javascript


Selanjutnya kita masuk directori project kita dan jalankan aplikasi reactnya.



//masuk direktori project
cd reactcodepelajar

// untuk menjalankan react js
npm start

Folder Struktur pada folder project kita seperti gambar berikut ini.


Belajar React Javascript

Mungkin kalau saya jelaskan satu-satu akan memakan banyak waktu, kamu bisa membaca dokumentasi folder sturkturnya disini. Untuk sementara, kita biarkan file lain dan kita akan fokus ngoding di file App.js.

Pertama kita mulai ngoding dari 0, kita hapus dahulu semua kode di App.js. lalu kamu bisa mengetikan kode seperti dibawah ini:



import React, {Component} from 'react';

class App extends Component {
  render(){
    return(
      <div>
        <h1>Tutorial React JS Code Pelajar</h1>
      </div>
    )
  }
}

export default App;

Coba save lalu lihat di browser. maka script diatas akan bekerja dengan baik. terlihat sangat komplek bukan? hanya untuk menampilkan text saja kodenya banyak. Inilah react, dimana setiap elemen dalam website dianggap sebagai Komponen (Component-Based) dan lebih powerfull lagi ini adalah Javascript.


Belajar React Javascript

Contoh sederhana dari script React sebagai berikut:


function App(){
  return(
    <div>
      <h1>Code Pelajar</h1>
    </div>
  )
}


Kenapa disini saya tidak menggunakan ReactDOM? karena jika kita membuat aplikasi react js dengan perintah create-react-app, maka pada struktur filenya sendiri kita bisa melihat ReactDOM akan ada pada index.js.


Belajar React Javascript

index.js dan index.html ini berguna sebagai file template yang sebenarnya kita bisa menghapusnya atau mengganti isinya. Namun untuk sekarang mari kita fokus dulu pada tutorial dan mengetik kode di file App.js.


Oke sampai disini dulu tutorial React JS yang pertama ini. Kita sudah mendapatkan pengetahuan mulai dari cara instalasi sampai langkah pertama membuat aplikasi web dengan React JS. Nantikan pada tutorial Code Pelajar selanjutnya pada seri React JS Tutorial Bahasa Indonesia.

Table Of Content

    Contact Form

    Kirim