
React adalah sebuah UI library yang paling populer saat ini, banyak perusahaan yang membutuhkan tenaga seorang React Developer menjadikannya peluang yang terbuka luas untuk kamu yang ingin bekerja di bidang frontend development. Jika kamu seorang newbie yang belum tahu harus mulai dari mana, tenang saja karena artikel ini akan membahas langkah-langkahnya dari awal sampai akhir. Untuk menjadi seorang React Developer tentunya kamu harus siap untuk mempelajari banyak hal tapi tidak perlu sekaligus, kamu bisa melakukannya tahap demi tahap.

Banyak sekali fitur dan benefit yang ditawarkan oleh React dan karena itu juga React menjadi UI library paling populer, kita dapat membuat berbagai macam aplikasi yang diantaranya seperti:
- Progresive Web Apps
- Scalable web applications
- Reusable components
- Proyek berskala kecil sampai besar

Di artikel ini kita akan membahas bahasa dan tools apa saja yang diperlukan untuk bisa membuat aplikasi dengan React dan membuat kamu jadi seorang React Developer yang handal.

<br>

### HTML
Pertama-tama kamu harus pelajari dulu HTML untuk dapat membuat komponen di React, jangankan React semua website juga memerlukan yang namanya HTML sebagai bahasa markupnya. HTML tidak terlalu susah untuk dipelajari dan resourcenya tersedia banyak sekali di internet seperti di W3School dan youtube. Di React kita bisa menggunakan HTML langsung dalam sebuah komponen.

```jsx
const MyComponent = () => (
  <div>
    <h1>Heading 1</h1>
  </div>
);
```

<br>

### CSS
Setelah kamu terbiasa menggunakan HTML untuk membuat struktur dari sebuah halaman website, selanjutnya kamu harus belajar CSS untuk memberikan styling agar website yang kamu buat terlihat lebih bagus dan menarik. Belajar CSS memang agak tricky tapi jika kamu sudah bisa memahaminya maka kedepannya akan lebih mudah karena kita bisa menggunakan framework CSS seperti Bootstrap, Tailwind, Material UI dan sebagainya untuk mempercepat proses pengembangan website yang kita buat. Jika sudah paham dasar-dasar CSS dan bisa mengaplikasikannya kamu bisa mencoba tools CSS Preprosessor seperti Sass agar penulisan kodenya lebih rapih dan ringkas.

<br>

### Javascript
Oke, setelah kamu bisa menggunakan HTML dan CSS untuk membuat layoutnya, ditahap ini kamu harus belajar bahasa pemrograman Javascript untuk menghandle logic dan semua alur yang terjadi pada aplikasi web yang kamu buat. Javascript sendriri merupakan core atau inti dari React itu sendiri, jadi pastikan kamu jangan skip langkah ini. Belajar bahasa Javascript mungkin akan sedikit lebih sulit karena kita mulai diharuskan untuk berfikir tentang logika-logika dan menerapkan algoritma pada aplikasi kita agar dia bisa berjalan dengan baik seperti yang kita harapkan. Tapi seiring berjalannya waktu kamu pasti akan paham dan bisa menerapkannya sendiri.

<br>

### NPM
NMP adalah sebuah package manager untuk library dan framework javascript, kamu akan membutuhkannya untuk menginstal React dan dependencies lainnya yang munkin kamu butuhkan dalam aplikasi yang kamu buat. Kamu bisa mencari tahu lebih lanjut tentang NPM di website resminya [npmjs.com](https://npmjs.com)

<br>

### Git
Dalam dunia pemrograman, Git adalah tools yang juga menjadi salah satu yang paling penting untuk dikuasai karena bersangkutan dengan version control dari aplikasi yang kamu buat. Dengan menggunakan git kamu bisa mengontrol perubahan pada kode yang kamu tulis dengan sangat mudah selain itu kamu juga dapat berkolaborasi dengan developer lain hingga mendeploy aplikasi yang kamu buat ke hosting dengan hanya memasukan beberapa perintah saja. Mempelajari git tidaklah sesulit yang dibayangkan dan resourcenya banyak di internet kamu bisa mencarinya dengan mudah.

<br>

### React
Ini dia yang ditunggu-tunggu, jika kamu sudah menguasai dasar-dasar dari poin-poin sebelumnya maka kamu seharusnya sudah siap untuk belajar React.js. Untuk mempelajari React.js tersedia banyak resource yang dapat kamu akses secara gratis maupun berbayar. Untuk belajar secara gratis kamu bisa coba dari [dokumentasi resminya](https://reactjs.org) atau Playlist youtube. Berikut ini beberapa channel/playlist youtube dalam bahasa Inggris maupun Indonesia yang bisa kamu coba:
- [Parsinta](https://www.youtube.com/playlist?list=PLRKMmwY3-5MwC02nYlx4kgyNO0fRvPdDc)
- [Array Id](https://www.youtube.com/@arrayid4435)
- [FreeCodeCamp](https://www.youtube.com/@freecodecamp)

Jika kamu lebih suka dengan yang berbayar agar mendapat benefit lain seperti sertifikat dan job opportunity kamu bisa mencoba kursus online berbayar di:
- [CODEPOLITAN](https://codepolitan.com)
- [Dicoding](https://dicoding.com)
- [BuildWith Angga](https://buildwithangga.com)
- [Udemy](https://udemy.com)

Selain itu kamu juga bisa belajar dari komunitas React developer:
- [Grup Facebook ReactJs Indonesia](https://web.facebook.com/groups/442974152553174)
- [Telegram ReactJs Indonesia](https://t.me/react_idn)

> Eits, jangan senang dulu, kita masih belum selesai... Masih ada beberapa langkah lagi biar skill kamu tambah GG 😋

<br>

### State Management
Setelah menguasai React.js kamu harus belajar juga yang namanya State Management. Apa itu? State management adalah suatu cara untuk mengatur data / state kita secara global agar dapat digunakan secara berulang kali (reusable) tanpa harus menuliskan kode yang sama secara terus menerus di tempat yang berbeda dan juga menghindari props drilling. Sederhananya state global itu mirip seperti bank data dimana saat kita butuhkan maka kita tinggal panggil saja di komponen yang kita butuhkan. Jika hanya menggunakan local state (seperti useState hook) maka data tersebut hanya bisa dipakai di komponen parent atau diturunkan ke komponen child melalui props. Ada banyak tools state management untuk React seperti:
- Context API (Bawaan React)
- Redux & Redux Toolkit
- Zustand
- MobX
- Recoil

Kamu tidak perlu mempelajari semuanya cukup pilih salah satu, dan yang paling banyak digunakan saat ini yaitu Redux Toolkit.

<br>

### TypeScript (Opsional)
Akan lebih baik jika kamu bisa menggunakan Typescript juga untuk meminimalisir error yang terjadi karena tipe data. Dengan Typescript kamu bisa menentukan tipe data apa saja yang akan dipakai dalam suatu komponen atau method dan juga tersedia fitur auto complete yang dapat memudahkanmu dalam proses development. Dengan begitu setiap error akan bisa lebih terprediksi. Menggunakan Typescript di React memang agak sedikit lebih sulit dan memakan waktu karena kita harus melakukan setup dan konfigurasi terlebih dahulu. Tapi jika sudah terbiasa maka akan terasa lebih mudah.

<br>

### Next.js
Kalau kamu sudah terbiasa menggunakan React sekarang mungkin saatnya kamu untuk mencoba Framework Next.js yang merupakan framework yang dibangun diatas ekosistem React. Dengan Next.js kamu akan dimudahkan dengan segudang fitur yang siap pakai seperti Routing berdasarkan folder/file dan juga fitur Static Site Generation dan Server Side Rendering untuk meningkatkan SEO. Seperti yang kita ketahui jika React.js merupakan UI library yang hanya support Client Side Rendering jadi jika berkaitan dengan SEO maka akan lebih rumit proses developmentnya. Dengan Next.js kamu tidak perlu memikirkan itu semua, karena Next.js sudah menyediakannya untukmu.

<br>

### What's Next?
Oke kalau sudah bisa semua terus apa lagi? Ini adalah langkah yang paling penting dan wajib kamu lakukan. Untuk jadi React Developer kamu harus membuat beberapa proyek portfolio yang menarik dengan mempraktikan semua hal yang sudah kamu pelajari dari awal dan jangan lupa untuk dihosting agar bisa kamu pamerkan hasil karyamu pada calon client atau perusahaan. Dengan begitu kemungkinan kamu untuk dapat pekerjaan atau proyek freelance akan semakin besar. Jadi sudahkah kamu siap untuk memulai karier sebagai React Developer di 2023?

Jika kamu suka artikel ini jangan lupa untuk share ke teman-temanmu ya... 😉

Roadmap React Developer 2023


Tailwind CSS adalah salah satu framework CSS yang populer banget di kalangan developer, bikin styling jadi lebih cepat dan rapi. Kalau kamu pake React dan Vite, berikut ini cara gampang buat setup Tailwind CSS di React!

<br>

#### 1. Bikin Project Baru dengan Vite
Pertama-tama, kita buat dulu project React baru pake Vite. Caranya gampang banget, buka terminal dan ketik perintah ini:

```bash
// npm
npm install vite my-tailwind-app --template react

// yarn
yarn create vite my-tailwind-app --template react
```

> **Catatan**: Ganti `my-tailwind-app` dengan nama project yang kamu mau.

<br>

#### 2. Masuk ke Folder Project
Setelah project selesai dibuat, masuk dulu ke foldernya:

```bash
cd my-tailwind-app
```

<br>

#### 3. Install Tailwind CSS
Sekarang kita siap buat install Tailwind CSS dan beberapa tools penting lainnya. Ketik aja perintah ini di terminal:

```bash
// npm
npm install -d tailwindcss postcss autoprefixer

// yarn
yarn add -D tailwindcss postcss autoprefixer
```

Lalu, inisialisasi konfigurasi Tailwind:

```bash
// npm
npx tailwindcss init -p

// yarn
yarn tailwindcss init -p
```

Perintah ini bakal bikin dua file baru di project kamu:
- `tailwind.config.js` (buat konfigurasi Tailwind)
- `postcss.config.js` (buat setting PostCSS)

<br>

#### 4. Setting Tailwind Config
Buka file `tailwind.config.js` yang barusan dibuat. Ubah bagian `content` jadi seperti ini supaya Tailwind bisa nge-scan semua file React kamu:

```js
// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

Dengan setting ini, Tailwind bakal aktif di semua file yang ada di folder `src`.

<br>

#### 5. Tambahkan Tailwind ke CSS
Sekarang, buka file CSS utama di project kamu. Biasanya di `src/index.css`. Tambahin direktif Tailwind berikut di paling atas file tersebut:

```css
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Tiga baris ini bakal nge-load semua base styling, komponen, dan utility dari Tailwind.

<br>

#### 6. Jalankan Project
Sekarang, semua udah siap. Jalankan project kamu buat lihat hasilnya:

```bash
// npm
npm run dev

// yarn
yarn dev
```

Buka browser dan lihat di alamat `http://localhost:5173`. Kamu sekarang udah bisa pake kelas-kelas Tailwind di komponen React kamu!

Contoh gampangnya, coba buka file `src/App.jsx` dan tambahkan styling Tailwind:

```jsx
function App() {
  return (
    <div className="min-h-screen bg-blue-100 flex items-center justify-center">
      <h1 className="text-3xl font-bold text-gray-800">
        Hello world, I am using Tailwind!
      </h1>
    </div>
  );
}

export default App;
```

Gampang kan? Dengan langkah-langkah ini, Tailwind CSS udah bisa kamu pake di project React. Sekarang, tinggal eksplorasi dan buat desain keren pake kelas-kelas dari Tailwind. Selamat mencoba! 🚀

Tutorial Instal TailwindCSS di React


Kali ini kita bakal coba buat fitur pencarian (search) yang canggih di aplikasi React kita pakai Fuse.js. Fitur ini bisa nemuin hasil yang tepat walau kita salah ngetik sedikit dan juga terdapat fitur scoring hasil yang biasanya terdapat pada fitur elastic search yang dibuat di backend tapi kali ini kita akan melakukan semua itu di sisi frontend. Menarik bukan? Kita akan pakai Vite untuk buat proyek React karena lebih cepat dan ringan.

<br />

#### Langkah 1: Buat Proyek React Pakai Vite

Pertama, kita perlu buat proyek React baru pakai Vite. Buka terminal dan ketik:

```bash
npm create vite@latest fuzzy-search-app --template react
```

Setelah proyeknya jadi, masuk ke folder proyek dan install semua yang dibutuhkan:

```bash
cd fuzzy-search-app
npm install
```

<br />

#### Langkah 2: Instalasi Fuse.js

Sekarang, kita perlu pasang Fuse.js di proyek kita:

```bash
npm install fuse.js
```

<br />

#### Langkah 3: Siapkan Data dan Fuse.js

Kita buat file baru namanya `data.js` di dalam folder `src`. File ini buat simpan data buku yang mau kita cari:

```javascript
// src/data.js
const books = [
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald" },
  { title: "To Kill a Mockingbird", author: "Harper Lee" },
  { title: "1984", author: "George Orwell" },
  { title: "Pride and Prejudice", author: "Jane Austen" },
  { title: "The Catcher in the Rye", author: "J.D. Salinger" }
];

export default books;
```

<br />

#### Langkah 4: Gunakan Fuse.js di Komponen React

Sekarang buka file `App.jsx` di folder `src`, lalu kita buat komponen untuk fuzzy search:

```jsx
// src/App.jsx
import React, { useState } from 'react';
import Fuse from 'fuse.js';
import books from './data';

const App = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const fuse = new Fuse(books, {
    keys: ['title', 'author'],
    includeScore: true
  });

  const handleSearch = (e) => {
    const { value } = e.target;
    setQuery(value);
    const result = fuse.search(value);
    setResults(result);
  };

  return (
    <div>
      <h1>Fuzzy Search dengan Fuse.js</h1>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="Cari buku"
      />
      <ul>
        {results.map(result => (
          <li key={result.item.title}>
            {result.item.title} oleh {result.item.author}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;
```

<br />

#### Penjelasan Kode

1. **Import dan State Management**: Kita import React, Fuse.js, dan data buku. Pakai `useState` buat simpan query pencarian dan hasil pencarian.

2. **Konfigurasi Fuse.js**: Kita buat instance Fuse.js dengan data buku. Kita kasih tau kunci (keys) yang mau dicari, yaitu `title` dan `author`. Opsi `includeScore` biar kita dapet skor kecocokan hasil pencarian.

3. **Handle Search**: Fungsi `handleSearch` jalan setiap kali input pencarian berubah. Dia atur query baru, cari pakai Fuse.js, dan update hasil pencarian.

4. **Rendering Hasil Pencarian**: Kita tampilin input pencarian dan hasil pencarian dalam bentuk list.

<br />

#### Langkah 5: Jalankan Aplikasi

Sekarang jalankan aplikasi dengan perintah:

```bash
npm run dev
```

Aplikasi bakal kebuka di browser, dan kamu bisa coba cari buku pakai input pencarian.

Gampang kan? Sekarang kamu udah punya fitur fuzzy search di aplikasi React kamu pakai Fuse.js. Kamu bisa kembangin lagi fiturnya sesuai kebutuhan aplikasi kamu. Selamat mencoba!