Belajar Dasar Frontend dengan React JS

Apa Itu Frontend Development ?

Semua yang Anda lihat di situs web, seperti tombol, tautan, animasi, dan lainnya, dibuat oleh frontend developer. Tugas front end developer itu sendiri untuk mengambil visi dan konsep desain ( tampilan ) dari klien dan mengimplementasikannya melalui kode.

Source : www.freecodecamp.org

front-end developer, juga dikenal sebagai pengembangan pada sisi klien untuk website adalah praktik membuat kode HTML, CSS, dan JavaScript untuk situs website sehingga user dapat melihat dan berinteraksi secara langsung. Ada sebuah tantangan bagi seorang frontend developer, yaitu tools dan teknik yang dipelajari dan digunakan untuk membuat bagian depan dari sebuah situs web akan berubah terus-menerus. Maka dari itu, frontend developer harus menyadari bagaimana hal tersebut dapat berkembang.

Source : https://frontendmasters.com/

Apa Perbedaan Frontend & Backend

• front-end adalah proses membangun website yang berinteraksi langsung dengan pengguna. ( bisa dilihat )
• back-end adalah proses membangun komponen website untuk menjalankan aplikasi di belakang layar. ( tidak bisa dilihat )

Apa Itu ReactJs ?

ReactJS atau React adalah Javascript library yang digunakan untuk membangun user interface (antar muka), jadi react itu adalah sebuah library bukan sebuah framework. Kalian bisa membaca tentang React adalah library https://reactjs.org/. Reactjs sendiri di kembangkan oleh facebook ( public realease 29 May 2013 ). React dibuat oleh Jordan Walke, seorang software engineer di Facebook, yang merilis prototipe awal React yang disebut “FaxJS “. React ini juga dapat digunakan sebagai basis dalam pengembangan Web App atau mobile. Namun, React hanya berkaitan dengan manajemen status dan rendering status itu ke DOM, jadi membuat aplikasi React biasanya memerlukan penggunaan library tambahan untuk perutean, serta fungsionalitas sisi klien tertentu.

Installasi dan setup ReactJS

1. NodeJS ( versi LTS boleh ataupun yang terbaru )
   Note 1 : tapi disini saya menyarankan agar menginstal versi yang LTS juga cukup. materi instalasi node js sudah pernah dibagikan saat pertama kali belajar javascript ya.
   Note 2 : Disarankan jika laptopnya 64 bit, install saja 32 bit agar menjaga compability dari sistem komputernya ( jika tetep mau install nodejs 64 bit di komputer 64bit silahkan dicoba saja ga apa apa )
2. Text editor (visual studio code, sublime, atom dll)
3. Terminal ( bisa git bash dan jenis terminal lainnya )

Create New Project with React JS

1. Installasi dengan Create React App ( CRA )

Pertama masuk ke terminal lalu pindah ke folder yang diinginkan untuk installasi project reactjs, lalu jalankan perintah seperti di bawah ini

npx create-react-app my-app

Note : untuk text “my-app” dapat di ganti sesuai dengan nama project yang kita inginkan

tunggulah hingga proses installasi selesai, biasanya akan memakan waktu lebih dari 5 menit tergantung dengan jaringan dan device komputernya

2. Menjalankan project reactjs yang sudah di install

Pada terminal pindahkan posisi directorynya menuju folder my-app dulu (jika nama appnyna berbeda bisa di sesuaikan ).

lalu ketikkan perintah dan tunggu sampai react nya succes untuk compile :

npm run start

setelah itu otomatis browser default anda menambahkan tab baru dengan url localhost:3000(default port untuk localhostnya adalah 3000) yang menampilkan tampil react app seperti di bawah ini

Mari kenalan dengan isi project react

berikut ini yang ada dalam project react :

• 📁 node_modules berisi paket-paket modul Nodejs; semua Library yang kita install dengan npm akan disimpan di sini.
• 📁 public berisi file untuk publik seperti HTML, icon, dan gambar, dan aset publik lainnya;
• 📄 index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen.
• 📁 src berisi kode dari aplikasi Reactjs, di sinilah kita akan membuat komponen;
• 📄 App.css file bawaan yang berisi kode untuk styling;
• 📄 App.js berisi kode untuk komponen App atau komponen utama dari aplikasi;
• 📄 App.test.js berisi kode untuk testing komponen App;
• 📄 index.js berisi kode untuk render komponen App ke Real DOM;
• 📄 index.css file bawaan yang berisi kode untuk styling;
• 📄 setupTests.js berisi kode untuk testing aplikasi.
• 📄 .gitignore berisi kode-kode yang akan diabaikan oleh Git.
• 📄 package.json file JSON yang berisi keterangan proyek dan daftar modul-modul yang dibutuhkan.

Mencoba edit file app.js

kita dapat mencoba mengedit file app.js di dalam folder src, mari kita ubah sedikit app js tersebut

disini kita coba hapus semua tag header ( dari tag pembuka <header> ke penutupnya </header> ) lalu masukkan kode baru seperti di bawah ini:

<h1>Kalian Keren Mau Mencoba</h1>

Berikut Hal Penting dari React JS

1. Component
   Components bisa di bilang hal yang sangat penting di reactjs. Components adalah semacam konsep bagaimana cara untuk membuat tiap bagian dari UI (tampilan) bisa bekerja secara mandiri dan terisolasi dari bagian-bagian yang lain.

2. JSX
   JSX merupakan ekstensi javascript yang membuat kita dapat menuliskan tag HTML di dalam javascript.

3. Virtual DOM
   Virtual DOM adalah representasi DOM secara virtual. Lalu Kenapa React menggunakan virtual DOM? Berikut ini penjelasannya :
   Yang pertama, JavaScript itu sebenarnya berjalan dengan cepat, yang menyebabkan JavaScript terasa lambat adalah ketika JavaScript mengolah DOM. Apa itu dom ? DOM adalah representasi dari UI pada aplikasi kita. Secara singkat bentuk DOM sendiri adalah struktur data tree, karena itu jika adanya perubahan atau update ke dom akan cepat. Namun, setelah adanya perubahan pada dom, element yang dirubah dari mulai parent hingga child nya akan dirender ulang untuk mengupdate UI di aplikasi kita. Proses re-rendering atau re-painting UI ini lah yang membuat lambat, Berikut ini ilustrasi dari DOM :

4. State
   State adalah asal dari suatu data. Komponen pada react tentunya membutuhkan data (tidak semua namun rata-rata membutuhkan data). Data tersebut dapat berasal dari mana saja. State adalah salah satu sumber data tersebut. Selain state data dari komponen juga dapat berasal dari props (bukan property).

5. Lifecycle Component
   Terdapat tiga Lifecycle dalam sebuah komponen dalam react yaitu :

• Inisialisasi / mounting (ketika komponen dibuat/ditambahkan pertama kali pada DOM)
• Update / rerender (ketika terdapat perubahan state/prop yang mengakibatkan perubahan pada DOM)
• Unmounting (ketika komponen akan dihapus dari DOM)Pada setiap lifecycle tersebut, komponen react akan mengeksekusi method/fungsi yang berbeda yang kita sebut sebagai lifecycle methods.

7. Styling css in react
   Ada beberapa tipe cara penggunaan css, namun hanya 3 dulu akan saya coba gambarkan singkat :

• Inline CSS
  
• External CSS
  Untuk external css sendiri seperti biasa, buat file css terpisah ( tetap didalam folder src ya ), nah untuk menghubungkan dengan file component nya bagaimana ? Dengan cara seperti ini :
  
• Module Css
  Module css ini mirip seperti external css kita membuat file css terpisah ( tetap didalam folder src ya ), namun cara pemanggilan dan penggunaannya yang beda. kurang lebih seperti ini :
  

Belajar Component & Props

Jenis – Jenis Komponen React

Membuat Component, huruf awalnya wajib kapital ya!

Function Components

function App(){
    <h1>Hello Word</h1>
}

export default App;

Diatas Tersebut bentuk dari umumnya Function Javascript.

Pada Javascript ES 6 maka kita mengenal arrow Function seperti dibawah ini

const App = () =>{
    <h1>Hello Word</h1>
}

export default App;

Class Component

Kita juga bisa menggunakan ES6 class untuk mebangun sebuah component. berikut ini contoh component dengan menggunakan class React.Component:

---

Apa Itu Props ?

Props, merupakan properti-properti dari component yang dapat kita gunakan untuk menampilkan data, biasanya digunakan untuk inisialisasi data dengan kata lain bahwa props adalah “model” data yang memiliki fungsi ganda yaitu selain untuk menyimpan data, Props juga berfungsi untuk “melempar data” antar components view jika ada perubahan data di state. Berikut ini Contoh dari penggunaan Props :

Tambahkan Code dibawah ini ke dalam file app.js

function Welcome(props) { 
  return <h1>Halo, {props.name}</h1>;
}

edit file app.js seperti dibawah ini

function App() {
  return (
    <div>
      <Welcome name="Sarah" />
      <Welcome name="Michael" />
      <Welcome name="John" />
    </div>
  );
}

Belajar React Hooks, Handling dan Conditional

React Hooks

Hooks merupakan fitur baru di React 16.8 atau versi lebih baru dari itu. Dengan Hooks, kita dapat menggunakan state dan fitur React yang lain tanpa perlu menulis sebuah “class” baru. Hooks merupakan fungsi yang memungkinkan Anda untuk “mengaitkan” state dan fitur-fitur lifecycle React dari function component. Hooks tidak dapat berfungsi didalam “class” dan Hooks memungkinkan menggunakan React tanpa “class” serta memiliki syntax yang lebih simple tanpa harus memikirkan lagi penggunaan ( this ) maupun ( bind )

berikut ini merupakan beberapa method yang tersedia pada Functional Component ( React Hooks ) :

• useState
• useEffect
• useRef
• useLayoutEffect
• useCallback
• useMemo
• useReducer
• useContext

useState

import React from "react"
import { useState } from "react";

const App = () => {
  const [name, setName] = useState("John");

  const handleName = () => {
    setName("Doe")
  }

  return(
    <div className="card">
      <h1>Testing</h1>

      <button onClick={handleName}>{name}</button>

    </div>
  )
}

export default App

useEffect()

kita coba pada saat connect ke api

Handling

const handleName = () => {
    setName("Doe")
  }

Conditional

if( //logikanya apa){
    //returnnya apa jika benar
}esle{
    // returnya jika salah
}

dan dibawah ini tenary operator

(3+2)==5 ? "benar" : "salah"

---

Belajar React Router

Halo, Kita akan belajar agar membuat React yang kita punya menjadi Single page Application. Apa itu single page appilcation ? Pada intinya SPA memungkinkan kita melakukan perpindahan page di sisi client (browser) tanpa mendownload ulang asset-asset dari server seperti file-file javascript dan css. Nah, disini sebagai navigasi yang dilakukan react untuk melakukan perpindahan page terutama di sisi client disebut Router. Di react router yang akan kita gunakan adalah dari library React-Router-DOM.

Instalasi React Router

npm install react-router-dom@6

Implementasi React Router

Pada file app.js ubah code pada return nya menjadi seperti dibawah ini

<BrowserRouter>
<Routes>
     <Route path='/' element={Home}/>
</Routes>
</BrowserRouter>

Jangan Lupa di Import BrowserRouter , Routes, Route dan Home

import { BrowserRouter, Route, Routes } from 'react-router-dom';

Selanjutnya Kita Mulai untuk Membuat CRUD nya di masing masing.

Persiapan Menghubungkan ke API

Instalasi Axios

npm i axios

const getData = () =>{
​       axios.get('http://150.10.81.164:9001/read')
​       .then(res=>{
​           console.table(res);
​       }).catch(er=>{
​           console.log(er);
​       })
​   }

​   useEffect(() => {
​     getData()
​   }, [])

Code CRUD

import axios from "axios";
import { useEffect, useState } from "react";

const Page2 = () =>{

    const [name, setName] = useState("John");
    const [data, setData] = useState([]);
    const [inputdata, setInputData] = useState({
        nama:"",
        nim:"",
        wa:"",
        alamat:""
    });
    const [currentID,setCurrentID]=useState(-1);

    const handleName = () => {
        
        setName("Doe")
    }

    const getData = () =>{
        axios.get('http://150.10.81.164:9001/read')
        .then(res=>{
            console.table(res.data.data);
            setData(res.data.data)
        }).catch(er=>{
            console.log(er);
        })
    }

    useEffect(() => {
      getData()
    }, [])
    
    const handleChange = (event) =>{
        setInputData({...inputdata,[event.target.name]:event.target.value})
    }

    const postData = ()=>{
        axios.post('http://150.10.81.164:9001/create',inputdata)
        .then(res=>{
            getData()
            alert('success')
        }).catch(er=>{
            alert('gagal')
            console.log(er);
        })
    }

    const deleteData = (id)=>{
        axios.delete(`http://150.10.81.164:9001/delete?id=${id}`)
        .then(res=>{
            getData()
            alert('sucess hapus')
        }).catch(er=>{
            alert('gagal Hapus')
        })
    }

    const updateData = ()=>{
        axios.put(`http://150.10.81.164:9001/update?id=${currentID}`,inputdata)
        .then(res=>{
            getData()
            setCurrentID(-1)
            alert('sucess Update')
        }).catch(er=>{
            alert('gagal Update')
        })
    }

    const handleGetDataByID = (data)=>{
        setCurrentID(data.id)
        setInputData({...inputdata,nama:data.nama, nim:data.nim , wa:data.wa , alamat:data.alamat})
    }
    
    return(
        <div>
            <div>{ name}</div>
            <button onClick={handleName}>{name}</button>
             
            <hr/>
            <div style={{marginTop:10}} >
                <input type="text" name="nim" value={inputdata.nim} onChange={handleChange} placeholder="Masukan Nim Anda" />
                <input type="text" name="nama" value={inputdata.nama} onChange={handleChange} placeholder="Masukan Nama Anda" />
                <input type="text" name="alamat" value={inputdata.alamat} onChange={handleChange} placeholder="Masukan Alamat Anda" />
                <input type="number" name="wa" value={inputdata.wa} onChange={handleChange} placeholder="Masukan No HP Anda" />
            </div>
            <div>
                {
                    currentID != -1
                    ?
                    <button onClick={updateData}> Update </button>
                    :
                    <button onClick={postData}> Simpan </button>
                }
            </div>
            <hr/>

            <table>
                <th>
                    <tr>
                        <td>Action</td>
                        <td> Nama </td>
                        <td> NIM </td>
                        <td> WA </td>
                        <td> Alamat </td>
                    </tr>
                </th>

                {
                    data.map(item=>(
                        <tr key={item.id}>
                            <td> 
                                <button onClick={()=>deleteData(item.id)} >Hapus</button>
                                <button onClick={()=>handleGetDataByID(item)} > Update Data</button>
                             </td>
                            <td>{item.nama}</td>
                            <td>{item.nim}</td>
                            <td>{item.wa}</td>
                            <td>{item.alamat}</td>
                        </tr>
                    ))
                }
                
            </table>
        </div>
    )
}

export default Page2;