Hari 16: React (Kenalan)

30 Hari Javascript

·

4 min read

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

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

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

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

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;