# Hari 16: React (Kenalan)

### React Js

Reactjs adalah library javascript untuk membangun UI (User Interface) pada web. Sekarang ini banyak sekali perusahaan-perusahaan yang mencari developer yang bisa menguasai React, sehingga kita belajar react akan menjadi investasi yang baik untuk karir di TI. React sendiri sangatlah populer, mari lihat repositori react berikut.

![https://raw.githubusercontent.com/AsrulLove/img-db/master/react-js/react-repo.png](https://raw.githubusercontent.com/AsrulLove/img-db/master/react-js/react-repo.png)

React itu sendiri berbasis komponen, misal navbar 1 komponen, tombol 1 komponen, avatar 1 komponen, yang mana komponen tersebut bisa dipakai ulang.

![https://raw.githubusercontent.com/AsrulLove/img-db/master/react-js/ilustrasi-komponen.png](https://raw.githubusercontent.com/AsrulLove/img-db/master/react-js/ilustrasi-komponen.png)

### Install React Js

Langsung saja, untuk install react kita gunakan Create React App saja sesuai saran dari reactjs sendiri.

![https://raw.githubusercontent.com/AsrulLove/img-db/master/react-js/cra-saran.png](https://raw.githubusercontent.com/AsrulLove/img-db/master/react-js/cra-saran.png)

Mari install reactjs dengan cra, disini contoh aplikasi yang akan kita buat adalah `minibiojs`. Sehingga perintah pada terminal adalah berikut.

```
npx create-react-app minibiojs

```

Berikut memperlihatkan struktur direktori dan halaman web aktual dari aplikasi CRA yang baru saja dibuat.

```
.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

```

Cara menjalankan proyek `minibiojs` yang telah kita install dengan perintah berikut.

```
npm start

```

> Ini dilakukan jika terminal udah diarahkan kedalam folder proyek minibiojs.

### WTF JSX

Udah belajar javascript, terus belajar ES6 dan sekarang pas mau belajar React Js harus belajar JSX juga. Sabar, JSX atau Javascript Extension bukan untuk mempersulit Anda, malah membantu untuk mempermudah dalam koding js yang terlihat seperti html.

Lihat perbedaan menggunakan JSX dan tidak pada komponen berikut.

Dengan JSX

```
class SapaAsrul extends React.Component {
  render() {
    return <h1 className="judul">Selamat Datang di Asrul Dev</h1>;
  }
}

```

dan tanpa JSX

```
class SapaAsrul extends React.Component {
  render() {
    return React.createElement(
      "h1",
      { className: "judul" },
      "Selamat Datang di Asrul Dev"
    );
  }
}

```

Berikut penjelasan [JSX](https://reactjs.org/docs/introducing-jsx.html)

### Component

Component dalam react dapat dibuat dengan 2 cara, yaitu dengan membuat `class` atau dengan membuat `function`. Tapi apa bedanya `class` dengan `function`, pasti memiliki kelebihan masing-masing.

### Component class

Membuat component dengan `class` pada react disebut sebagai `component state full` karena dengan `class` Anda bisa membuat `state` sesuai kebutuhan.

```
import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }

  render() {
    return <div>Wellcome Asrul</div>;
  }
}

export default App;

```

### Component function (dibahas pada materi Hooks)

Membuat component dengan `function` pada react disebut sebagai `component state less` karena dengan `function` Anda tidak bisa membuat `state` tetapi bisa menerima `props` saja, (state jika meggunakan hook).

```
import React from "react";

const Hello = ({ name }) => <div>Hello, {name}!</div>;

export default Hello;

```

Lantas bagai mana cara mengaksesnya?
Okay, cara mengakses komponen adalah dengan menjadikannya sebagai tag HTML, contoh component Hello akan diakses menjadi `<Hello />` atau `<Hello></Hello>`

> Perlu diingat bahwa component harus diawali dengan huruf kapital sehingga sistem dapat membedakan code HTML dan kode Component

### Props

Props adalah cara component mengoper data yang berasal dari *parent* ke *child* dengan kata lain garis lurus kebawah.

```
<Hello name="Asrul">

```

Dari component diatas misal sebuah component `Hello` dengan propertu **name** pada kode diatas, maka itu akan menurunkan data pada child `Hello` dengan props dengan `key` **name** dan `value` **Asrul**

### Mengakses Props

Pada induk telah mengover data dengan key **name** dan value **Asrul**, maka pada child akan bisa diakses dengan cara:

```
import React from "react";

const Hello = ({ props }) => <div>Hello, {props.name}!</div>;

export default Hello;

```

### State

State adalah tempat Anda menyimpan data pada component dan hanya bisa diakses oleh component itu sendiri secara default, tetapi bisa diturunkan pada child jika menggunkan props.

```
state = {
  name: "",
};

```

### Mengubah Nilai State

Untuk mengubah nilai state telah diberikan method dari react menggunakan `setState`, berikut cara penggunaannya.

```
this.setSetate(
  {
    name: "Asrul",
  },
  callback
);

```

### Mengakses State

Anda telah mengetahui bagaimana cara mengubah nilai state, kemudian pada tahap ini, Anda akan membutuhkan cara mengakses state, hampir mirip dengan props, berikut caranya.

```
import React, { Component } from "react";

class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }

  componentDidMount() {
    this.setState({
      name: "Asrul H",
    });
  }

  render() {
    return <div>Wellcome {this.state.name}</div>;
  }
}

export default Hello;

```