React Developer in 2023

Beberapa hal yang perlu dipelajari untuk menjadi seorang Frontend / React.js Developer di tahun 2023.

---

1.React.js

React dikenal juga React.js adalah library JavaScript yang digunakan untuk membangun user interface yang interaktif berbasis component. React ini dibuat oleh Facebook ( Meta ) dan bersifat open source, sehingga dapat digunakan oleh siapa saja secara gratis. Saat ini React dikelola oleh Meta, komunitas maupun individual.

Dalam mempelajari React, kita perlu ketahui React Concept terlebih dahulu seperti Declarative dan Imperative, Component Architecture, UI Layer.

---

Declarative dan Imperative

Imperative : Berikan instruksi langkah demi langkah tentang cara mencapai tujuan tertentu

Declarative : Mendeskripsikan hasil ( apa ), tanpa menginstruksikan bagaimana melakukannya

---

Imperative ( jQuery )

function showText() {
    var text = document.createElement("p"); // Create Element
    text.innerHTML = "Text Visible"; // Create text with DOM
    $("body").append(text); // Append new element
}

Imperative lebih bagaimana kita memberikan instruksi langkah langkah element di render, seperti contoh diatas kita pakai createElement untuk membuat node element nya, berikut nya kita sisipkan text di element, dan yang terakhir text di render di body dengan method append(). Dan di wrap jadi sebuah function

Declarative ( React )

<button onClick={() => showText(true)}>Show Text</button>
{showText ? <p>Text Visible</p> : null} // Append Element

Kita cukup memberikan suatu kondisi, jika nilai nya bernilai true, otomatis element akan di render di DOM.

---

Redux

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import journeyProgram from './journey/program.reducer';
import categoryMeditasi from './meditation/category.reducer';
import paymentKonseling from './payment/konseling.reducer';
import psikolog from './psikolog.reducer';

const rootReducer = combineReducers({
    journeyProgram, categoryMeditasi,
    paymentKonseling, psikolog,
    form: formReducer
});

export default rootReducer;