Cara Instalasi ReactJS Bahasa Indonesia

Cara instalasi React sangat mudah sekali, untuk saat ini terdapat dua cara untuk menginstall React, Cara pertama dan yang paling mudah adalah dengan CDN(Content Delivery Network) dan cara kedua adalah dengan Package Manager, kalian dapat memakai npm atau yarn, jika kalian datang dari bahasa lain seperti PHP, npm/yarn adalah composernya javascript, jika kalian dari python ini adalah pip-nya.

Menggunakan CDN

Pertama: Hubungkan React dengan HTML id.

Pertama-tama, buka file HTML kalian, lalu tambahkan kode berikut.

<!-- ... diatas ini adlh HTML kalian ... -->

<div id="like_button_container"></div>

<!-- ... dibwh ini adlh HTML kalian ... -->

Nantinya, Id dalam div tersebut berfungsi untuk menghubungkan HTML dengan React.

Kedua: Tambahkan React Script

Tambahkan kode berikut tepat sebelum body tag kalian. Kenapa sebelum body tag? agar HTML kalian tereksekusi terlebih dahulu, baru script nya. Jangan malah Scriptnya dulu yang dieksekusi.

  <!-- ... diatas ini HTML klian ... -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <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>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

Ketiga: Buat Component

Tambahkan file bernama like_button.js taruh di folder yang sama dengan HTML kalian. lalu copas code berikut.

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}


const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Kedua baris terakhir akan mencari <div> element dan akan menghubungkannya kedalam HTML.

Instalasi Menggunakan Package Manager, NPM/Yarn

Pertama: Install NodeJS, NPM / Yarn

install NodeJS disini, jika kalian install NodeJS, npm akan terinstall secara otomatis

Kedua: Buka CLI(Command Line Interface)

Jika sudah, jalankan perintah berikut,

npx create-react-app my-app
cd my-app
npm start

Disini, my-app adalah nama folder dari project kalian.
btw, npx disini bukan typo ya.. :P
Sekian blog kali ini, terimakasih semoga bermanfaat. :D

Note: React nggak ngehandle backend logic seperti database CRUD, react cuma nampilin bagian depan halaman(frontend)