Apa itu ReactJs Jsx dan ES6

Apa itu ReactJs Jsx dan ES6 ? Kali ini MID Teknologi akan membahas tentang apa itu ReactJs,JSX dan ES6, ada baiknya sebelum kita membahas tentang bagaimana sih membuat aplikasi menggunakan reactjs kita tahu dulu apa ReactJs itu sendiri.

jsx dan ES6 sendiri adalah gaya penulisan/sintaks yang digunakan saat kamu membuat aplikasi ReactJs, jadi ketiganya memiliki hubungan erat. jadi langsung saja kita bahas.

Apa itu ReactJs

React Js adalah sebuah Library Javascript yang dibuat oleh Facebook, Untuk mempermudah pembuat Frontend sebuah website.

dengan kata lain ReactJs adalah sebuah library yang mengurusi segala tampilan dan logika disekitarnya.

React sendiri bersifat Reuseable Component dimana kita bisa membagi beberapa component design suatu web untuk digunakan kembali di tempat lain.

Contoh jika kita memiliki sebuah website maka kita memiliki main content dan sidebar, keduanya bisa dijadikan component lalu di dalam sidebar sendiri terdapat gambar atau element lain, maka element itu sendiri bisa dijadikan component.

ReactJs sendiri sudah digunakan berbagai perusahaan besar sebut saja Facebook, WhatsApp, Netflix, Instagram, Airbnb, American Express, Dropbox, Ebay, dan ratusan penyedia jasa pembuatan aplikasi berbasis web memanfaatkan kemampuan React JS.

Kepopuleran React sendiri terus meningkat dari tahun ke tahun, terbukti dari survey yang dilakukan stack overflow, dimana React lebih populer dibanding Framework/Library javascript lainnya

Kenapa harus ReactJs?

Lalu Fitur apa saja yang ditawarkan Oleh react sehingga bisa melebihi framework/library javascript sejenis?

1.Declarative

ReactJs dapat membuat UI(User Interfaces) yang interaktif, sehingga dapat dengan mudah membuat desain yang simple untuk di setiap state di dalam aplikasi. 

Declarative views dapat membuat kode lebih mudah untuk di prediksi dan lebih mudah untuk di debug. Yang dimaksud disini yaitu React dapat membuat UI(User Interfaces) yang interaktif, sehingga dapat dengan mudah membuat desain yang simple untuk di setiap state di dalam aplikasi. Declarative views dapat membuat kode lebih mudah untuk di prediksi dan lebih mudah untuk di debug.

2.Component Base

Seperti yang sudah saya katakan sebelumnya, react menggunakan prinsip Component Base dimana setiap element dari website di bagi menjadi part part terpisah.

Setiap component memiliki logika dan designnya sendiri, dan komponen tersebut dapat digunakan ulang untuk membangun suatu interface baru di halaman lain.

Hal ini akan sangat memudahkan code, karena semakin banyak kode yang menumpuk di suatu file maka akan membuat pusing si coder itu sendiri.

3.Lebih cepat dan Efisien dengan virtual DOM

Hal yang lebih keren lainnya adalah dengan adanya fitur virtual DOM pada react.

Biasanya dalam pembuatan aplikasi Javascript anda harus berhati hati dalam penggunaan DOM, dimana DOM tsb dapat memperlambat kinerja web anda.

Selain itu penggunaan DOM yang kurang baik juga dapat merusak Interface yg sudah dibangun. Dom itu sendiri bersifat Tree data structur

dimana perubahan kecil di DOM parent dapat menyebabkan efek berantai kepada DOM childnya.

Oleh karena itu Virtual DOM hadir. React akan mengeksekusi DOM dibalik layar (di dalam memori) sebelum ditampilkan ke layar.

Jadi setiap ada perubahan di dalam DOM parentnya, DOM akan mengksekusinya di dalam virtual memori dan mengidentifikasi cara terbaik untuk menerapkannya di DOM aslinya.

Cara ini terbukti sangat efektif untuk mengurangi waktu rendering saat terjadi perubahan data antar DOM.

4.React Native

React Native adalah sebuah Library yang memungkinkan anda membuat sebuah aplikasi android utuh menggunakan javascript.

Aplikasi yang dihasilkan React Native bisa berjalan di IOS dan Android Secara Native, maksudnya adalah aplikasi tersebut benar benar di compile Untuk sistem operasi Android/IOS tanpa menggunakan Web View

React Native sendiri menjadi pemikat yang sangat kuat bagi coder yang ingin belajar React.

Bagaimana tidak, dengan belajar 1 libarary kita bisa membuat sebuah aplikasi web dan android sekaligus.

5.Mendukung Framework/library lainnya

Javascript memiliki banyak sekali library dan Framework yang dapat memperkaya fitur suatu web.

Sebut saja anim.js, three.js ,material Ui dll. Framework-framework tersebut dapat dipadukan dengan aplikasi React yang akan kamu buat.

Sehingga Aplikasi react yang akan kamu buat nantinya memiliki kaya fitur sesuai dengan kebutuhannya.

6.Imuttable State

Seperti yang saya sampaikan diatas, react menggunakan prosip Component Based, setiap komponen memiliki logika dan kegunaannya masing masing.

setiap komponen memiliki state dan propertinya masing masing, dan properti tsb tidak bisa langsung diubah begitu saja.

itu karena statenya bersifat immutable, tapi kenapa?

Proses deteksi perubahan yang terjadi pada suatu DOM akan sulit jika statenya bersifat Muttable, itu karena statenya langsung diubah tanpa melalui proses.

Keuntungan utama dari immutability adalah membantu Anda untuk membuat pure component di React. Data yang immutable dapat dengan mudah memastikan apakah perubahan sudah terjadi, yang juga membantu untuk menentukan apakah komponen perlu di-render ulang.

selengkapnya kamu bisa baca di dokumentasinya langsung disini

7.Komunitas yang aktif dan dokumentasi yang jelas

Salah satu yang membuat react menjadi Library javascript yang paling populer adalah Dokumentasi yang sangat jelas.

sehingga kita bisa dengan mudah mempelajarinya. Dokumentasinya sendiri mempunya berbagai bahasa yang memudahkan Coder untuk membacanya.

Selain itu Komunitas pengguna ReactJs juga bisa dibilang sangat aktif. terbukti dengan banyaknya komunitas yang tersebar di berbagai forum dan jejaring sosial.

Kamu juga bisa mempelajari React secara gratis disini

Module pembalajaran React dari dasar

8.Dukungan Developer Tool

Kamu bisa menggunakan extension khusus yang dibuat untuk proses development aplikasi React.

Extension ini hanya berjalan pada mode development untuk membantu mu mendisgn dan debugging aplikasi react.

Seperti mengetahui alur data, membedakan child dan parentnya, mengedit properti dan statusnya saat ini. Anda juga dapat melacak hierarki komponen.

Kamu bisa mendapatkan Developer Tool React di Chrome Store, GITHUB dan Firefox Add-on

Apa itu JSX

Jsx adalah pengembangan javascript dimana kita bisa menyelipkan kode html di dalam javascript.

bingung? mari saya contohkan dengan kode dibawah

return(
    <div>
      <p>saya adalah kode jsx</p>
      <p>saya bisa dijalankan tanpa error disini</p>
    </div>
  )

blok kode diatas adalah contoh penulisan dari jsx, dimana pada javascript biasa kita harus menulis kode di dalam tanda petik “”.

namun menggunakan jsx kita tidak perlu menulisnya di dalam petik, dalam penulisannya jsx tidak bisa ditulis diluar tag pembungkus, Contoh

return(
    <input type="text" name="text">
    <input type="button" name="submit">
  )
//=>kode tersebut akan error

jika kita gunakan blok kode diatas maka akan terjadi error,untuk mengatasinya kita bisa menggunakan React Fragment yang akan kita bahas di Tutorial berikutnya.

di dalam jsx sendiri kita bisa memanggil function atau variable dari javascript itu sendiri dengan menggunakan tanda {}, Contoh

function data (){
  let a = "hai"
  let b = "midteknologi.com"
  return(
<div><p>{a} selamat datang di {b}</p></div>  )
}

Selain itu Jsx juga dapat menjalankan oprasi javascript seperti if else inline, Contoh

function data (){
  return(<span style="background-color: rgba(0, 0, 0, 0.2); font-size: inherit; color: initial;">    </span><div><p>{i == 1 ? 'True!' : 'False'}</p></div>  )
}

JSX sendiri akan sangat berguna pada saat kita membuat sebuah program React, karena pada dasarnya component-component yang dibuat di react akan mengembalikan data berupa jsx code, sehingga kita dapat menggunakannya berkali kali .

Apa itu ES6 / EcmaScript6

ES6 yang biasa dikenal juga sebagai ES 2015 adalah sebuah standarisasi scripting language (Javascript) yang dibuat oleh European Computer Manufacturers Association (ECMA). Bahasa gampangnya ECMAScript itu standarnya, Javascript itu implementasinya.

EcmaScript sendiri memiliki beberapa versi dan yg terbaru adalah ES6, bisa dibilang ES6 seperti “HTML 5” nya javascript. ada beberapa fitur javascript yang ditambah saat ES6 keluar, anggap saja seperti arrow function dan tambahan variable let dan const

Sekian penjelasan saya tentang apa itu Reactjs,jsx dan ES6 semoga dapat membantu, bagi kamu yang mau belajar ReactJs, MID Teknologi sudah menyediakan module pembelajaran yang bisa kamu akses disini