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.
React itu sendiri berbasis komponen, misal navbar 1 komponen, tombol 1 komponen, avatar 1 komponen, yang mana komponen tersebut bisa dipakai ulang.
Install React Js
Langsung saja, untuk install react kita gunakan Create React App saja sesuai saran dari reactjs sendiri.
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;
