React adalah pustaka JavaScript untuk membangun antarmuka pengguna. Pada artikel kali ini, kita akan membuat aplikasi hello world dengan React. Tutorial ini hanya untuk pemula. Mari kita mulai:

Prasyarat

Sebelum memulai React, Anda harus memiliki pengetahuan dasar tentang HTML , CSS , JavaScript , DOM , ES6 . Dan Node.js , npm perlu diinstal secara global di komputer Anda.

Buat Aplikasi React

Jalankan perintah berikut untuk membuat aplikasi react:

npx create-react-app hello-world

Ini menghasilkan semua file, folder, dan perpustakaan yang kita butuhkan. Sekarang arahkan folder proyek dan mulai aplikasi:

# go to project folder
cd hello-world

# start app
npm start

Kami dapat melihat aplikasi di http://localhost:3000/.

Struktur Folder

Mari kita lihat struktur folder aplikasi React secara singkat.

• node_modules : Semua perpustakaan eksternal akan disimpan di sini. Tidak perlu mengedit kode baris apa pun dari folder ini.
• publik : Folder ini berisi semua file statis seperti robots.txt, logo, ads.txt, dll.
• src : Kami akan melakukan sebagian besar hal di folder ini.
• package.json : Berisi semua informasi metadata tentang aplikasi.

Ubah Nomor Port

Secara default, aplikasi react berjalan pada port 3000. Kita dapat mengubah port dengan mudah. Buat file bernama .env di root direktori proyek. Kemudian masukkan baris ini:

Sekarang aplikasi akan berjalan di port baru http://localhost:3005/.

Buat Komponen

React memungkinkan kita mendefinisikan komponen sebagai kelas atau fungsi. Komponen adalah bit kode yang dapat digunakan kembali. Kita dapat membuat komponen dalam .JSX atau JS berkas. Nama komponen harus ditulis dalam Kasus Judul seperti HelloWorld .

Mari buat komponen pertama kita bernama ' HelloWorld ' di dalam folder src :

src/HelloWord.js

import React from 'react';

const HelloWorld = () => {
  
  function sayHello() {
    alert('Hello, World!');
  }
  
  return (
    Say Hello!
  );
};

export default HelloWorld;

Ini adalah komponen sederhana. Ini akan menunjukkan peringatan "Hello World" pada klik tombol.

Gunakan Komponen

Kami dapat mengimpor komponen dalam file apa pun. Setelah mengimport komponen, kita bisa menggunakannya dimana saja seperti:

<ComponentName/>

Mari gunakan komponen HelloWorld kita . Buka src/App.jsfile dan tempel kode ini:

App.js

import React from 'react';
import HelloWorld from './HelloWorld';
import './App.css';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

React memiliki fitur hot reload. Aplikasi akan dimuat ulang secara otomatis dan Anda akan melihat pesan "Say Hello!" tombol. Klik tombol dan lihat hasilnya.

Alat Pengembang React yang akan membuat hidup kita lebih mudah saat bekerja dengan React. Ini memungkinkan kita untuk memeriksa   hierarki komponen React . Anda dapat menambahkan ekstensi ke Chrome , browser Firefox .

Itu dia. Terima kasih sudah membaca.🙂