## Apa Itu useEffect

**useEffect** adalah salah satu hooks yang mulai diperkenalkan di React versi `>= 16.8`. Jika kalian pernah belajar class component di React, `useEffect` ini memiliki fungsi yang mirip atau bisa dibilang sama dengan `componentDidMount`, `componentDidUpdate` dan `componentWillUnmount`.

## Contoh Penggunaan

Hooks `useEffect` ini akan berjalan saat pertama render dan saat terdapat sebuah re-render / pembaruan di komponennya. Sebagai contoh, kita akan melanjutkan project di blog [ini](https://hendraaagil.id/blog/berkenalan-dengan-react) kemarin.

Saat ini memiliki tampilan seperti berikut:

![Project View](//images.ctfassets.net/ci973fhqobpy/GO9PgmwaxO9Cfv2unyadS/c3e0a9d6afd6d3df6ce3768043d7c2bb/project-view.png)

Kita bisa coba menambahkan kode `useEffect` untuk mengubah title dari website tadi:

```js
import { useEffect, useState } from 'react';
...

function App() {
  const [count, setCount] = useState(0);
  const name = 'Hendra Agil';

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    ...
  );
}

export default App;
```

Dari kode tersebut, kita memanggil sebuah hooks `useEffect` dan memasukkan sebuah anonymous function di dalamnya yang akan dieksekusi oleh `useEffect` tadi. Function tersebut akan mengubah title dari halaman website kita melalui [Document API](https://developer.mozilla.org/en-US/docs/Web/API/Document).

Hasilnya akan seperti berikut:

![Update Title Using useEffect](//images.ctfassets.net/ci973fhqobpy/1CraO0C7Cez2I94Qn3tiHo/97dc2f63bef7fda3b6e2c18022f4c87a/update-title.gif)

Contoh sederhana penggunaan `useEffect` adalah seperti tadi. Namun, bagaimana jika kita hanya ingin menggunakan `useEffect` saat pertama kali komponen itu dirender saja? 🤔

Sebagai contoh kasus, kita ingin mengambil data dari sebuah API. Tentu saja kita hanya akan mengambil data itu satu kali saja saat halaman pertama kali dibuka.

Tapi di contoh kali ini kita akan coba hal sederhana, yaitu untuk update title dari website kita tadi. Kita coba ubah kode `useEffect` tadi menjadi seperti berikut:

```js
...
  useEffect(() => {
    document.title = `Halo Hendra`;
  });
...
```

Jika kita cek, sudah benar dia mengupdate title dari website kita:

![Update Title Using useEffect](//images.ctfassets.net/ci973fhqobpy/rO9NhkhiO2WDlnla7FoH5/0d71ee1dba36713d16bf933949aa6a55/update-title.png)

Namun, jika kita coba tambahkan kode `console.log` seperti ini:

```js
...
  useEffect(() => {
    console.log('Re-Render');
    document.title = `Halo Hendra`;
  });
...
```

Kita coba cek di console browser saat kita mengklik button:

![Re-Render](//images.ctfassets.net/ci973fhqobpy/DnwCpkeFHUC2MZWM0HW1Z/b16a4ba8659936f0f925e31ba5658d49/re-render.gif)

Tulisan **Re-Render** tadi muncul di console sebanyak kita mengklik button tadi.

Itu terjadi karena setiap kita mengklik button tadi, dia mengupdate state `count` dan melakukan render ulang / re-render di halaman yang kita akses. Sebagai solusinya kita bisa memberikan params kedua yang berupa array di `useEffect` tadi.

Jika kita hanya ingin mengeksekusinya saat pertama kali render, kita bisa menggunakan array kosong sebagai params kedua:

```js
...
  useEffect(() => {
    console.log('Re-Render');
    document.title = `Halo Hendra`;
  }, []);
...
```

Kita coba jalankan:

![Render Once](//images.ctfassets.net/ci973fhqobpy/7G6pgfHqwf1t0J4d1Tpzsf/e02d32070d8ae0c71f71071ce12e7e83/render-once.gif)

Tulisan **Re-Render** hanya muncul sekali di console browser kita. Berarti fungsi di `useEffect` tadi hanya dijalankan ketika halaman pertama kali dibuka. Yeay! 🥳

### Penggunaan Lanjutan

Penggunaan `useEffect` ini sebenarnya bisa lebih sakti lagi, bukan hanya untuk update elemen DOM seperti yang kita lakukan tadi. Kita bisa melakukan fetch API di dalam fungsi `useEffect` dan mengupdate data state untuk nantinya dirender ke halaman website kita.

Di penggunaan yang lebih lanjut lagi, kita bisa menggunakan `useEffect` sebagai pengganti `componentWillUnmount` di class component dengan menggunakan fungsi `cleanup()` untuk melakukan pembersihan.

## Penutup

Mungkin cukup itu sedikit perkenalan tentang `useEffect` di React. Jika kalian ingin mempelajari lebih lanjut bisa lewat sumber berikut:

- [Dokumentasi React Tentang useEffect](https://reactjs.org/docs/hooks-effect.html)

Terima kasih sudah membaca blog ini, tetap semangat belajar! Semoga bermanfaat.

Kita akan lanjut berkenalan lagi dengan React, yaitu tentang penggunaan useEffect di blog ini.

reactjs project

Berkenalan Dengan React: Memahami useEffect

## Props

Props biasanya kita gunakan untuk melempar data antar komponen. Sebagai contoh, pada project di blog [ini](https://hendraaagil.id/blog/berkenalan-dengan-react) kemarin. Kita akan coba pisahkan komponen nama dari `App`, sehingga isi file `App.js` akan seperti berikut:

```js
import { useState } from 'react';
import logo from './logo.svg';
import './App.css';

const Name = () => <p>Hi, my name is {name}</p>;

function App() {
  const [count, setCount] = useState(0);
  const name = 'Hendra Agil';

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Name />
        <p>You clicked the button {count} times</p>
        <button onClick={() => setCount(count + 1)}>Click Me!</button>
      </header>
    </div>
  );
}

export default App;
```

Jika kita pisah komponennya seperti diatas, lalu coba kita jalankan maka akan tertulis error seperti berikut:

```bash
src\App.js
  Line 5:39:  Unexpected use of 'name'  no-restricted-globals
```

Itu terjadi karena di komponen Name mencoba mengakses variabel `name` yang hanya terdapat di komponen App. Solusinya adalah kita kirimkan variabel `name` sebagai props ke komponen Name. Jadi, penulisan komponen `<Name />` kita ubah menjadi `<Name propsName={name} />`. Di mana `propsName` adalah sebagai nama props yang akan kita akses di komponen Name dan `{name}` adalah mengambil variabel `name` yang ada di komponen App.

Kita coba tangkap `props`nya dan tampilkan di console pada komponen `Name`:

```js
const Name = (props) => {
  console.log(props);

  return <p>Hi, my name is {name}</p>;
};
```

Dia akan tetap error, tetapi props yang kita kirimkan berhasil tampil di console:

![Console Props](//images.ctfassets.net/ci973fhqobpy/7B5SeGlytdoHXgEokJLlQT/9461c87acc82c55d5c2dc015400ecdec/console-props.png)

Untuk mengakses `propsName` kita bisa destructure terlebih dahulu `props`nya, lalu kita tampilkan:

```js
const Name = (props) => {
  const { propsName } = props;

  return <p>Hi, my name is {propsName}</p>;
};
```

Maka, nama kita berhasil tampil:

![Show Props](//images.ctfassets.net/ci973fhqobpy/5OPq6JOWAmPUjpAKYjMQzr/d6943b2f49facf5d5a41d895bc8eedba/show-props.png)

## Route

Pada website SPA (Single Page Application), dia hanya merender satu file HTML. Untuk menambah halaman pada website SPA, kita tidak perlu membuat file HTML lagi. Kita hanya perlu mengatur **route** pada website SPA dengan JavaScript.

### React Router

Jika kita menggunakan React, pengaturan route tadi bisa menggunakan [react-router-dom](https://www.npmjs.com/package/react-router-dom). Maka kita perlu install `react-router-dom` terlebih dahulu dengan perintah `yarn add react-router-dom` atau `npm install react-router-dom`.

#### BrowserRouter

Pertama, kita perlu bungkus komponen `App` dengan `BrowserRouter` dari react-router-dom. Kita bisa bungkus lewat file `index.js`:

```js
...
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

...
```

#### Route dan Switch

Untuk menggunakan route, kita bisa buat file baru sebagai halaman yang akan diakses nanti. Misal kita akan membuat file `About.js` di dalam folder `src/components`. Lalu, kita isi file `About.js` sebagai contoh seperti berikut:

```js
const About = () => {
  return (
    <div className="App">
      <h1>About Me</h1>
      <p>Halo, Nama Saya Hendra Agil</p>
    </div>
  );
};

export default About;
```

Kita akan menggunakan class `App` yang sudah ada di file `App.css` dan kita tampilkan nama kita disitu. Tapi kita masih belum bisa melihat tampilan dari file `About.js`. Untuk menampilkannya kita bisa tambahkan routing di file `App.js`. Sebelum itu, kita pindahkan kode di file `App.js` ke file `src/components/Home.js` (buat file baru). Agar file `App.js` nanti bisa bersih, hanya untuk pengaturan route saja.

Sisakan kode berikut di file `App.js`:

```js
import './App.css';

function App() {}

export default App;
```

Selain yang di atas pindahkan ke file `Home.js`.

Yang pertama kita lakukan adalah import `Switch` dan `Route` dari react-router-dom. Lalu kita jadikan `Switch` sebagai pembungkusnya. Lalu, kita tambahkan 1 route untuk halaman `/` atau home dan isi komponen dengan file `Home.js` tadi:

```js
import './App.css';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';

function App() {
  return (
    <Switch>
      <Route path="/" component={Home} />
    </Switch>
  );
}

export default App;
```

Jika kita buka di browser maka akan tampil komponen `Home` tadi. Lalu, bagaimana cara kita menambah route? Mudah saja, kita tinggal tambahkan `Route` baru dengan `path` dan `component` yang berbeda:

```js
...
import About from './components/About';

function App() {
  return (
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
}
...
```

Jika kita coba menuju ke `localhost:3000/about`:

![Wrong About Page](//images.ctfassets.net/ci973fhqobpy/15gyc9rZW6R0LTTbKtx7oO/97950a5dafbec52982e86c6b13e2ad88/wrong-about-page.png)

Kenapa yang tampil halaman home?

Itu terjadi karena kita pakai `Switch` pada routing kita, karena switch itu fungsinya sama seperti [switch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) pada JavaScript. Maka, dia mengecek apakah `/about` itu terdapat karakter `/`? Karena iya, maka yang tampil adalah halaman `/` atau home.

Solusinya, kita bisa pindah Route dengan path `/` dibawah `/about`. Atau kita bisa pakai atribut [`exact`](https://reactrouter.com/web/api/Route/exact-bool) di Route dengan path `/`:

```js
...

function App() {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
}
...
```

`exact` akan memberitahu kepada react-router-dom agar me-render komponen `Home` pada Route yang hanya mempunyai path `/` saja. Jika kita buka di browser, maka akan tampil halaman `About` kita:

![Correct About Page](//images.ctfassets.net/ci973fhqobpy/597noDGozWRqwiFuDd94qg/7bc753b7ebb8be34941bdf2cbcbe6045/correct-about-page.png)

#### Link

Bagaimana jika kita ingin menggunakan seperti navigasi untuk berpindah halaman?

Kita bisa menggunakan komponen `Link`. Kenapa tidak menggunakan tag `a`? Karena tag `a` jika kita klik, dia akan memuat ulang (_reload_) halaman kita. Kita bisa kehilangan state jika kita memuat ulang website tersebut.

Cara penggunaannya mudah sekali, kita hanya perlu mengimport dan menambahkannya ke komponen. Misal di file `Home.js` kita tambahkan navigasi ke halaman about:

```js
...
import { Link } from 'react-router-dom';

...

const Home = () => {
  ...

  return (
    <div className="App">
      <header className="App-header">
        ...
        <Link to="/about" className="App-link">
          About
        </Link>
        ...
      </header>
    </div>
  );
};
...
```

Jika kita klik link About, maka kita akan berpindah ke halaman about tanpa memuat ulang website kita.

## Penutup

Mungkin cukup itu sedikit tentang props dan route pada React. Tentu masih banyak lagi fitur lainnya, kalian bisa baca lewat sumber berikut:

- [Dokumentasi React Tentang Props](https://reactjs.org/docs/components-and-props.html)
- [Dokumentasi React Router](https://reactrouter.com/web/guides/quick-start)

Terima kasih sudah membaca blog ini dan belajar sedikit tentang props dan route di React, tetap semangat belajar! Semoga bermanfaat.

Kita akan lanjut berkenalan dengan React, yaitu tentang props dan route di blog ini.

red and white with street sign photo

Berkenalan Dengan React: Props & Route

## Apa Itu React?

Sebelum memulai belajar kita harus kenalan dulu, React itu apa sih?

[React](https://reactjs.org/) adalah library JavaScript untuk membangun antarmuka pengguna yang dibuat oleh [Facebook](https://github.com/facebook). React memudahkan kita untuk membangun sebuah website dengan fitur SPA (Single Page Application). Dengan fitur SPA tentu akan meningkatkan performa website, kita hanya perlu mengganti data yang tampil jika ingin berpindah halaman bukan memberikan halaman baru kepada pengguna.

![React Website](//images.ctfassets.net/ci973fhqobpy/4Z3VtjpQSHaiNAXwTdyR2u/c14ea7d0c9514a15efd01d4f8c0f6fe1/react.png)

Walau cukup sering disebut sebagai framework, React sendiri sebenarnya adalah library seperti yang disebutkan pada websitenya. Karena React tidak memiliki aturan tersendiri pada penggunaannya. Seperti struktur folder project yang React sendiri tidak memberikan aturan khusus, hanya memberikan [rekomendasi](https://reactjs.org/docs/faq-structure.html). Kalau di website [ini](http://react-file-structure.surge.sh/) mengatakan "move files around until it feels right" 😄.

## Menggunakan React

Untuk menggunakan React di project kita, bisa lewat tag `script` dan mulai membuat React component. Lebih lanjutnya bisa cek di [dokumentasinya](https://reactjs.org/docs/add-react-to-a-website.html).

### Membuat Project Baru

Pada blog ini, kita hanya akan menggunakan [CRA (Create React App)](https://create-react-app.dev/) untuk membuat project baru dengan React. Kita bisa jalankan perintah `npx create-react-app my-app` atau `yarn create react-app my-app` jika menggunakan [yarn](https://yarnpkg.com/).

Kita akan coba membuat project React dengan nama **my-react-app**. Saya akan menggunakan yarn, maka jalankan perintah `yarn create react-app my-react-app` dan tunggu sampai project selesai dibuat. Jika sudah selesai, maka tampilan terminal akan seperti berikut:

![Created React App](//images.ctfassets.net/ci973fhqobpy/m6ioBySXR2YcMULzOXTPW/6e2655f2b787dbf1db8739f5ff1adb34/created-react-app.png)

CRA sudah menyediakan [struktur folder](https://create-react-app.dev/docs/folder-structure/) dan beberapa package tambahan di project React kita. Jika kita coba jalankan projectnya dengan perintah `yarn start`, maka akan tampil seperti berikut:

![React New Project Interface](//images.ctfassets.net/ci973fhqobpy/7qhsy8TDOBlCycSBGUDfR7/dae0adf7def0ed9c2f62f6a81c8cb31c/react-new-project-interface.png)

Kita akan coba ke file `src/App.js`.

```js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

File `App.js` ini bisa disebut sebagai parent bagi semua komponen nantinya, sedangkan rootnya ada di file `index.js`. Di folder `src` juga ada beberapa file tambahan seperti `App.test.js` dan `setupTests.js` yang berfungsi jika kita akan menggunakan testing pada React.

Untuk kali ini, kita hanya belajar dasarnya saja. Jadi, kita coba langsung untuk menghapus semua teks pada `App.js` dan sisakan logonya. Maka file `App.js` akan seperti berikut:

```js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;
```

Sintaks di dalam blok `return` diatas disebut sebagai [JSX](https://reactjs.org/docs/introducing-jsx.html), dia mirip seperti HTML tapi kita bisa berikan nilai dinamis didalamnya. Sebagai contoh kita coba tambahkan nama kita dibawah logo:

```js
...

function App() {
  const name = 'Hendra Agil';

  return (
      ...
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hi, my name is {name}</p>
      ...
  );
}
```

Maka nama kita akan tampil, seperti berikut:

![Name Value In JSX](//images.ctfassets.net/ci973fhqobpy/661A8YfsZq8kPX313kUg1c/41f53f5a5eb03c64b0aeb585bf15217d/name-value-in-jsx.png)

### Menggunakan State

Ada kemungkinan kita ingin menampilkan nilai yang lebih dinamis atau bisa berubah - ubah. Untuk itu kita bisa menggunakan **state**. Pada React versi 16.8 ke bawah, state hanya bisa digunakan pada class component. Tapi setelah adanya update pada versi 16.8 ke atas, React memperkenalkan [hooks](https://reactjs.org/docs/hooks-intro.html).

#### Apa Itu Hooks?

[Hooks](https://reactjs.org/docs/hooks-intro.html) bisa digunakan untuk deklarasi dan modifikasi state di functional component. Untuk itu, kita bisa gunakan `useState`. Sebagai contoh, kita akan membuat state `count` dan dia akan bertambah saat kita klik pada sebuah button.

Maka kita perlu import `useState` dan deklarasi state-nya terlebih dahulu:

```js
import { useState } from 'react';
...

function App() {
  const [count, setCount] = useState(0);
  ...
}
```

Disitu ada `count` yaitu nilai state itu sendiri dan ada `setCount` yang akan kita gunakan untuk merubah nilai pada state `count`. Nilai 0 pada parameter `useState` adalah nilai awal state tersebut.

Kita akan tambahkan button untuk melakukan perubahan state dan sedikit teks untuk menampilkan state `count` tadi:

```js
...

function App() {
  ...
  return (
    ...
        <p>You clicked the button {count} times</p>
        <button onClick={() => setCount(count + 1)}>Click Me!</button>
    ...
  );
}
```

Disitu kita menambahkan event `onClick` pada button dan menggunakan `setCount` untuk menambah nilai pada state `count`. Jika dijalankan maka hasilnya akan seperti berikut:

![Demo setCount Value](//images.ctfassets.net/ci973fhqobpy/5dVLmaJyMY350cvDmfBr24/71ecae13bb04dc2db77eb64673f7e83d/demo-setcount-value.gif)

#### Lebih Lanjut Tentang Hooks

Hooks sendiri bukan hanya digunakan untuk state, tapi juga bisa menggantikan component lifecycle seperti `componentDidMount`, `componentDidUpdate`, dll. yang awalnya hanya ada pada class component dengan menggunakan [`useEffect`](https://reactjs.org/docs/hooks-effect.html).

Masih ada juga beberapa hooks tambahan yang disediakan oleh React, bisa dibaca saja di [sini](https://reactjs.org/docs/hooks-reference.html). Jika dirasa hooks yang tersedia masih kurang atau tidak sesuai kebutuhan, kita bisa membuat [custom hooks](https://reactjs.org/docs/hooks-custom.html). Yaitu membuat hooks versi kita sendiri yang tentunya bisa menyesuaikan kebutuhan kita.

## Penutup

Sepertinya itu dulu untuk blog kali ini. Untuk beberapa topik seperti props, routing, dll. mungkin akan saya bahas di blog selanjutnya atau kalian bisa pelajari sendiri dari beberapa list tutorial berikut:

- [Dokumentasi React](https://reactjs.org/)
- [Dokumentasi React (Bahasa Indonesia)](https://id.reactjs.org/)
- [Dokumentasi Create React App](https://create-react-app.dev/)
- [Rekomendasi Sumber Belajar dari ReactJS Indonesia](https://reactjs.id/learning)
- [Full Modern React Tutorial dari The Net Ninja](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d)

Terima kasih sudah membaca blog saya, selamat belajar! Semoga bermanfaat.

Kita akan mulai belajar dan berkenalan dengan React dan kawan - kawannya pada blog ini.

react official website

Berkenalan Dengan React: Basic

## Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif. Jika di dalam sebuah website sudah ada HTML dan CSS, dengan menambahkan JavaScript dapat meningkatkan fungsionalitas pada halaman web. (Sumber: [Dicoding](https://www.dicoding.com/blog/apa-itu-javascript-fungsi-dan-contohnya/))

### Sejarah JavaScript

Pada tahun 1994 JavaScript mulai dikenal, pada saat itu web dan internet sudah mulai berkembang. JavaScript didesain oleh **[Brendan Eich](https://en.wikipedia.org/wiki/Brendan_Eich)** yang merupakan karyawan Netscape. Transformasi nama JavaScript, dimulai dari Mocha, Mona, LiveScript, hingga akhirnya resmi bernama JavaScript.

Versi awal bahasa JS hanya dipakai di kalangan Netscape beserta dengan fungsionalitas pun yang masih terbatas. Singkat cerita pada tahun 1996 JavaScript secara resmi dinamakan sebagai ECMAScript. ECMAScript 2 dikembangkan pada tahun 1998 yang dilanjutkan dengan ECMAScript 3 setahun kemudian. ECMAScript terus dikembangkan sampai akhirnya menjadi JavaScript atau JS hingga saat ini. Pada tahun 2016, 92% web diketahui telah menggunakan JavaScript. Itulah mengapa JavaScript atau JS terus berkembang. (Sumber: [Dicoding](https://www.dicoding.com/blog/apa-itu-javascript-fungsi-dan-contohnya/))

### Kenapa Harus Belajar JavaScript

Ada beberapa alasan kenapa kita harus belajar JavaScript:

1. Membuat website menjadi lebih dinamis dan interaktif.
2. Bisa digunakan di sisi server atau aplikasi mobile.
3. Sumber belajar sudah cukup banyak.

### Perbedaan JavaScript Dengan Java

Bagi pemula, cukup banyak yang menganggap kalau JavaScript & Java itu sama. Padahal mereka sangat berbeda. Java sendiri dikembangkan oleh **[James Gosling](https://en.wikipedia.org/wiki/James_Gosling)**, sedangkan JavaScript dikembangkan oleh **[Brendan Eich](https://en.wikipedia.org/wiki/Brendan_Eich)**. Untuk menjalankan program Java kita memerlukan sebuah JVM, sedangkan untuk JavaScript dapat langsung kita buka di browser.

Contoh program hello world dengan Java:

```java
class Program {
    public static void main(String args[]){
        System.out.println("Hello World");
    }
}
```

Contoh program hello world dengan JavaScript:

```js
console.log('Hello World');
```

Berbeda kan?

### Popularitas JavaScript

Berdasarkan [Stack Overflow Survey 2020](https://insights.stackoverflow.com/survey/2020#most-popular-technologies), JavaScript menjadi yang paling banyak dipilih.

![Stack Overflow Survey 2020](https://www.docstring.fr/media/blog_posts/retour-sur-le-stackoverflow-developer-survey-2020/images/Screenshot_2020-05-28_at_11.22.34.png)

Popularitas JavaScript juga didukung dengan munculnya banyak framework dan library yang baru. Fitur JavaScript modern juga sangat membantu para developer untuk mengembangkan suatu program. Library lama seperti jQuery sudah mulai ditinggalkan karena fitur JavaScript modern yang dirasa sudah sangat membantu pengembangan. Ditambah dengan munculnya JavaScript flavors seperti [TypeScript](https://www.typescriptlang.org/) yang cukup populer saat ini.

Ada beberapa framework frontend yang cukup terkenal pada saat ini, yaitu [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/) dan [Angular](https://angular.io/). Kita tidak perlu memperdebatkan mana yang terbaik, karena framework sebenarnya digunakan untuk mempermudah dan mempercepat proses pengembangan **bukan untuk bahan debat** 😆.

Saya sendiri memilih React karena di React saya belajar banyak sintaks modern JavaScript. Bisa jadi nanti saya akan mencoba beberapa framework lain kalau sudah bosan di React, hehe. Tapi, untuk React sendiri menurut saya ekosistemnya cukup luas. Munculnya beberapa framework yang lebih mempermudah pengembangan dengan base React seperti [Gatsby](https://www.gatsbyjs.com/) dan [Next.js](https://nextjs.org/) membuat React menjadi cukup populer saat ini.

### Sumber Belajar

Saya akan membagikan beberapa sumber belajar yang pernah saya ikuti. Tentu saja yang pertama adalah dari Web Programming UNPAS 😄.

- [Dasar Pemrograman JavaScript](https://www.youtube.com/playlist?list=PLFIM0718LjIWXagluzROrA-iBY9eeUt4w)
- [JavaScript dan DOM](https://www.youtube.com/playlist?list=PLFIM0718LjIWB3YRoQbQh82ZewAGtE2-3)
- [JavaScript Lanjutan](https://www.youtube.com/playlist?list=PLFIM0718LjIUGpY8wmE41W7rTJo_3Y46-)

Selain itu, ada beberapa website yang menurut saya membantu saat belajar JavaScript.

- [Modern JavaScript Tutorial](https://javascript.info/)
- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/javascript)

### Kesimpulan

Menurut saya, JavaScript cocok bagi kamu yang ingin masuk ke dunia pemrograman. Setelah belajar JavaScript mungkin kamu ingin mencoba bahasa pemrograman yang lain ataupun lanjut ke framework JavaScript itu tidak masalah. Yang penting adalah di awal jangan langsung mencoba banyak bahasa pemrograman, tapi cobalah fokus ke satu bahasa pemrograman dulu.

Itu saja sepertinya yang bisa saya tuliskan. Terima kasih.

Apa itu JavaScript? Kenapa harus belajar JavaScript? Apa perbedaan JavaScript dengan Java? Saya akan sedikit membahas tentang JavaScript pada blog ini.

display monitor turn on photo

Berkenalan Dengan JavaScript

Masa SMK/SMA adalah masa terakhir dalam lingkup sekolah. 3 tahun terakhir yang mungkin kurang berkesan dikarenakan datangnya pandemi yang tidak terduga selama hampir 2 tahun terakhir. Eh, saya tidak akan membahas pandemi kali ini hehe.

#### Apa yang akan kamu lakukan setelah SMK? Apa yang kamu akan hadapi?

Tidak tahu. Bisa jadi kehidupanmu akan lebih baik. Bisa jadi kehidupanmu akan lebih buruk. Tergantung bagaimana skenarionya nanti. Yang bisa kita lakukan hanyalah berusaha untuk menjadi lebih baik dari hari sebelumnya. Jika disaat SMK kita pernah berpikir untuk melakukan suatu hal di esok hari. Mungkin esok hari yang kita maksud sudah datang dan kita harus mulai sekarang.

Ada yang memilih kerja, ada juga yang memilih kuliah. Kamu harus bisa memilih dengan tepat, yang sesuai dengan kondisi kamu saat ini. Mana yang kamu butuhkan maka pilihlah. Jangan terlalu lama berpikir, berencana dan mengkhayal. Jika kamu punya mimpi maka waktunya untuk diwujudkan.

Menikah? Janganlah menikah jika dirimu belum siap. Itu hanya akan menambah beban kehidupanmu. Itu bukan menjadi prioritas saat ini. Jadikan yang lebih dekat denganmu untuk menjadi prioritasmu saat ini. Jangan jadikan menikah sebagai prioritas jika belum punya calonnya, wkwk.

#### Bagaimana targetmu disaat SMK dulu?

Disaat SMK, aku punya beberapa target untuk aku capai. Setelah aku lihat, ada yang tercapai ada juga yang belum (bukan tidak). Tapi aku tetap bangga dengan progress diriku saat ini. Mungkin aku akan memperbarui targetku nanti. Target dekat saat ini adalah segera kuliah / bekerja / kuliah & bekerja. Belajar juga harus setiap hari tentunya. Bidang IT bukanlah bidang yang mudah, teknologi berkembang setiap hari bahkan setiap detik. Tapi, jangan selalu dan memaksa untuk mengikuti tren IT. Karena itu akan sangat melelahkan.

__"Pelajari fundamental programmingnya"__, sebuah kalimat yang selalu aku ingat. Dulu aku pertama belajar PHP, mulai dari basic - oop - mvc. Dan setelah mencoba ke JavaScript tidak banyak berbeda, struktur percabangan, perulangan, oop, mvc juga gitu gitu aja. Lalu, awal tahun ini juga diberi kesempatan untuk mengikuti LKS tingkat Provinsi Jawa Tengah dan diikutkan di bidang IT Software Solution for Business (ITSSB) mewakili Kabupaten Karanganyar. ITSSB sendiri untuk tingkat provinsi ada 2 modul, yaitu desktop dan mobile. Aku sendiri belum pernah belajar C# (untuk desktop) dan Java (untuk mobile). Java sebenarnya sudah diajarkan di sekolah, cuma kurang suka karena sintaksnya yang menurutku cukup rumit dan panjang XD. Walaupun tidak juara, tapi dari situ aku belajar kalau sintaks setiap bahasa memang tidak jauh berbeda.

Akhirnya, aku memilih untuk belajar JavaScript untuk saat ini. Menurutku menarik untuk dipelajari apalagi dengan adanya TypeScript sekarang. Untuk saat ini masih fokus di frontend dengan React dan Next.js. Semoga saja kedepannya bisa jadi fullstack XD.

Mungkin itu saja yang bisa aku tuliskan. Ini adalah tulisan pertamaku di blog ini. Semoga kedepannya bisa menuliskan beberapa cerita lagi hehe. Terima kasih sudah mau membaca tulisanku yang cukup random ini wkwk. Semangat buat kalian, kehidupan sebenarnya akan datang dan kalian harus siap dengan hal itu. Persiapkan dari sekarang dan mulai lakukan!

Gracias. Thank you. Terima kasih. Matur nuwun.

Apa yang akan kita hadapi setelah masa SMK? Yaitu sebuah kehidupan yang sebenarnya :)

Blog

Berkenalan Dengan React: Memahami useEffect

Berkenalan Dengan React: Props & Route

Berkenalan Dengan React: Basic

Berkenalan Dengan JavaScript

Kehidupan Setelah SMK