React | Introduction✨

date

Jul 18, 2023

slug

react-introduction

author

status

Public

Membuat antarmuka pengguna dari komponen🍭

React memungkinkan Kita membangun antarmuka penguna dari bagian-bagian yang disebut komponen. Kita dapat membuat komponen React sendiri seperti Thumbnail, LikeButton, dan Video. Kemudian meng-gabungkan komponen-komponen tersebut ke dalam seluruh layar, halaman, dan aplikasi.

Contoh code component Video:


function Video({ video }) {
  return (
    <div>
      <Thumbnail video={video} />
      <a href={video.url}>
        <h3>{video.title}</h3>
        <p>{video.description}</p>
      </a>
      <LikeButton video={video} />
    </div>
  );
}

Video.js

Result:

💡

Kalo kalian ingin bekerja sendiri atau bahkan dengan developer lain nya secara tim, menggunakan React akan terasa sama. React dirancang untuk memungkinkan Kita menggabungkan komponen secara mulus yang dirancang oleh pengembang independen, tim, dan organisasi.

Menulis komponen dengan kode dan markup✍️

Komponen React adalah fungsi JavaScript. Mau nampilin konten secara kondisional? Kita bisa Gunain pernyataan if. So, gimana cara nampilin sebuah daftar? Gunakan fungsi map() ke sebuah senarai (array).

Belajar React juga adalah belajar pemrograman.👏

Contoh code components list Video:


function VideoList({ videos, emptyHeading }) {
  const count = videos.length;
  let heading = emptyHeading;
  if (count > 0) {
    const noun = 'Video';
    heading = count + ' ' + noun;
  }
  return (
    <section>
      <h2>{heading}</h2>
      {videos.map(video =>
        <Video key={video.id} video={video} />
        )
      }
    </section>
  );
}

VideoList.js

Result:

💡

Sintaksis markup ini disebut dengan JSX. Ini adalah ekstensi sintaksis JavaScript yang dipopulerkan oleh React. Menempatkan markup JSX dekat dengan logika rendering yang terkait membuat komponen React mudah untuk dibuat, dipelihara, dan dihapus.

Menambahkan interaktivitas di mana pun yang kita butuhkan🚀

Komponen React menerima data dan mengembalikan apa yang seharusnya muncul di layar. Kita dapat memberikan data baru sebagai respons dari sebuah interaksi, seperti ketika pengguna mengetikkan sebuah input. React kemudian akan memperbarui layar agar sesuai dengan data baru.

Contoh code component searchable video list:


import { useState } from 'react';

function SearchableVideoList({ videos }) {
  const [searchText, setSearchText] = useState('');
  const foundVideos = filterVideos(videos, searchText);
  return (
    <>
      <SearchInput
        value={searchText}
        onChange={newText => setSearchText(newText)} />
      <VideoList
        videos={foundVideos}
        emptyHeading={`Kata kunci “${searchText}” tidak ditemukan`} />
    </>
  );
}

SearchableVideoList.js

Result:

💡

Kita gak perlu buat ngebangun seluruh halaman di React. Kita bisa nambahin React langsung ke halaman HTML yang sudah ada, dan render komponen React interaktif di mana aja di halaman tersebut.

Pengembangan full-stack dengan kerangka kerja (framework)⚒️

React adalah sebuah pustaka. React memungkinkan Kita untuk menyatukan komponen-komponen, tetapi tidak menentukan bagaimana cara melakukan routing dan pengambilan data. Untuk membangun aplikasi secara keseluruhan dengan React, react sendiri merekomendasikan kerangka kerja full-stack React seperti Next.js atau Remix.

Contoh code mengambil data dari api:


import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
  const conf = await db.Confs.find({ slug });
  return (
    <ConferenceLayout conf={conf}>
      <Suspense fallback={<TalksLoading />}>
        <Talks confId={conf.id} />
      </Suspense>
    </ConferenceLayout>
  );
}

async function Talks({ confId }) {
  const talks = await db.Talks.findAll({ confId });
  const videos = talks.map(talk => talk.video);
  return <SearchableVideoList videos={videos} />;
}

confs/[slug].js

Result:

💡

React juga merupakan sebuah arsitektur. Kerangka kerja yang mengimplementasikannya memungkinkan Kita mengambil data dalam komponen asinkron (asynchronous) yang berjalan di server atau bahkan saat pembuatan. Baca data dari berkas atau database, dan oper data tersebut ke komponen interaktif.

Nahh, itu dia sedikit pengenalan tentang React. Gimana, keren kan🥳. React ini library keren dan sangat populer di kalangan pengembang frontend dan so, tunggu apalagi nih dan ga ada alasan buat kalian yang mau jadi pengembang frontend ga nyoba library keren yang satu ini🚀

Untuk penjelasan lebih lengkap, Cogi udah siapin link dokumentasi resmi React dalam bahasa indonesia dari para komunitas pengembang React yang berasal dari Indonesia tentunya. Coba intip intip ya💡

Referensi:

• Document React Resmi Indonesia