# 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 )**

```javascript
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 )**

```javascript
<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**

```javascript
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;
```