Setelah mengenal apa itu react.js dan kenapa kita belajar react.js – Selanjutnya kita akan memulai sebuah proyek react baru. Ada dua cara untuk membuat sebuah proyek React, yaitu menyisipkan React ke file HTML dan membuat proyek baru menggunakan create-react-app.
Kita lanjut tutorialnya!
Daftar isi
Menyisipkan React ke File HTML
Cara paling mudah yang bisa kamu gunakan untuk memulai proyek baru adalah dengan menambahkan library react ke file HTML kamu. Kamu bisa gunakan cara ini untuk menambahkan React ke proyek yang berbasis Codeigniter, Laravel, Django dan proyek – proyek lainya yang berbasis server-side rendering.
Tutorial
Pertama kamu buat sebuah folder baru di direktori proyek-mu
Lalu buat sebuah file dengan nama index.html, dan isikan dengan template HTML seperti biasa.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial React - Felaboratory</title>
</head>
<body>
</body>
</html>
Buat file baru di direktori yang sama dengan nama index.js, tuliskan dengan:
"use strict";
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
let text = "Like";
if (this.state.liked) {
// jika sudah di like, boleh batalkan
text = "Sudah di Like. Batalkan?";
} else {
// jika belum di like, like
text = "Like";
}
return e(
"button",
{ onClick: () => this.setState({ liked: !this.state.liked }) },
text
);
//
}
}
const domContainer = document.querySelector("#button");
ReactDOM.render(e(LikeButton), domContainer);
Lalu di tambahkan script CDN untuk react dan script index.js, seperti berikut:
<!-- ... HTML lain ... --> <!-- Load React. --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="index.js"></script> </body>
Lalu tambahkan sebuah elemen apa saja untuk menempatkan React Element kita. Disini aku pakai <div>
<body> <!-- ... HTML lain ... --> <div id="button"></div> <!-- ... HTML lain ... --> </body>
Lalu jalankan!
Membuat proyek baru dengan create-react-app
Cara kedua adalah menginstal dengan NPM / Yarn. Cara ini dilakukan jika kamu menginginkan untuk membuat proyek react dengan API call dan menggunakan one-page application. Cara ini menurutku yang paling mudah dan lebih seru untuk dilakukan 😁
Yang perlu disiapkan
- Instalasi Node.js, aku menyarankan menggunakan Laragon untuk proses instalasinya. Node.js diperlukan untuk menginstal package – package yang kamu butuhkan dalam proses pengembangan website.
Tutorial
Aku anggap kamu sudah menginstal Node.js ya!
Pertama, kamu buka direktori yang akan kamu gunakan untuk pengembangan aplikasi React. Buka terminal di direktori tersebut lalu ketikkan perintah:
npx create-react-app tutorial cd tutorial
Kamu dapat dengan bebas mengganti “tutorial” dengan nama aplikasimu.
Selanjutnya, untuk menjalankan React, ketikkan perintah berikut:
npm start
Nah secara otomatis, Node.js akan menjalankan server di port (defaultnya 3000). Jika kamu pergi ke browser dan mengetik localhost:3000 maka kamu akan melihat tampilan berikut:
Selesai 🎉
Selamat, kamu sudah membuat sebuah proyek React.js baru!
Selanjutnya, aku akan memberikan tutorial React yang dimulai dengan create-react-app.
