React — 1. Introduction to react

Kurniadi
2 min readJan 5, 2024

--

React Image

What is React?

  • React merupakan JavaScript library yang sangat populer untuk membangun User interface.
  • React diciptakan oleh Facebook dan mulai dipublikasikan pada NPM repository pada tahun 2013.
  • React hanyalah library yang tidak lebih besar dibandingkan dengan framework seperti Vue dan Angular.

Konsep React

  • Component → menggunakan komponen yang reusable dalam membangun UI. Setiap komponen terenkapsulasi dan dapt saling dikomposisikan satu sama lain.
  • Reaktif → komponen react dapat menampung sebuah data dan secara reaktif akan me-render ulang jika terjadi perubahan data. Komponen React dapat dikomposisikan dan aliran data pada komponen dilakukan secara searah dari parent ke child.
  • Deklaratif → fokus terhadap apa yang ingin dicapai. Tidak ada kode imperatif lagi ketika menggunakan React. Bye DOM manipulation (appendChild, getElementById, addEventListener, dan sebagainya).

Why is React?

  • Mudah dipelajari
    React merupakan bahasa yang hampir mirip dengan HTML dan CSS, sehingga programmer pemula sekalipun bisa dengan cepat akrab dengan React.
    React juga menawarkan tutorial yang dapat diakses dengan mudah, serta adanya video, tools, dan blog tentang React yang akan lebih mempermudah dalam mempelajari React.
  • Reusable
    Reusability komponen merupakan keuntungan bagi Developer.
    React memungkinkan developer untuk menggunakan kembali komponen yang telah dikembangkan ke aplikasi lain yang menggunakan fungsi yang sama.
  • Peningkatan Performance
    React memungkinkan developer untuk membangun DOM virtual dan menghostingnya ke dalam memori sehingga setiap kali terjadi perubahan apapun dalam DOM actual, DOM virtual berubah seketika karena terletak di memori. Karen itu, pembaruan DOM tidak dilakukan secara rutin dan kecepatan kinerja aplikasi Anda tidak terganggu.

React Ecosystem

React memiliki ekosistem yang luas. Contohnya:

  • ES6+ sintaksis: const, let, class, rest parameter, spread operator, destructuring, default parameter, dan arrow function.
  • create-react-app: untuk membuat react app.
  • React router: untuk mempermudah routing
  • React DOM: untuk megembangkan aplikasi React pada platform web.
  • Jest: JavaScript testing framework untuk menguji mulai dari kode JavaScript hingga komponen React secara lebih mudah.
  • Redux: state yang terpusat dan bersifat global.

--

--