Cara Penulisan Code Dasar Pada Program React JS

React atau yang lebih dikneal dengan React JS merupakan salah satu Library Front-End dari Javascript yang sangat diminati banyak developer. Baik itu developer website, maupun untuk Aplikasi android /iOS.

Bagi kamu yang baru mengenal apa itu bahasa pemrograman React pasti masih bingung bagaimana cara penulisan code React yang benar.

Sebenarnya penulisan Code React tidak berbeda jauh dengan HTML dan CSS. Karena pada dasarnya memang Javascript merupakan salah satu dari 3 pillar utama dalam membangun website.

Jika kamu penasaran bagaimana cara berinteraksi dengan Bahasa Pemrograman React, maka kamu berada di tempat yang tepat.

Disini kami sajikan beberapa contoh code dasar, komponen, maupun perintah dasar dalam Program React JS. Mari kita simak bersama-sama.

Baca Juga :

Contoh Component React

Komponen dalam React JS bersifat Reusable atau bisa digunakan kembali. Kamu dapat memberikan nilai atau Value ke Props seperti berikut :

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

const element = <Welcome name=”Eko Prasetyo” />;

ReactDOM.render(

element,

document.getElementById(‘root’)

);

name = “Eko Prasetyo” akan memberikan nilai ke {props.name} dari fungsi Welcome (props) dan mengembalikan komponen yang telah memberikan nilai dengan name = “Eko Prasetyo”. Setelah itu React akan membuat elemen tersebut menjadi html.

Cara Lain untuk Mendeklarasikan Component React

Ada banyak sekali cara mendeklarasikan komponen dalam bahasa React. Namun kita akan membahas 2 saja yang paling umum digunakan yaitu Stateless Component dan Stateful Component.

Stateful Component

Class Type Component

class Cat extends React.Component {

constructor(props) {

super(props);

this.state = {

humor: ‘happy’

}

render() {

return(

<div>

<h1>{this.props.name}</h1>

<p>

{this.props.color}

</p>

</div>

);

}

Stateless Component

Functional Component (Arrow Function dari ES6)

const Cat = props => {

return (

<div>

<h1>{props.name}</h1>

<p>{props.color}</p>

</div>;

);

};

Implicit Return Component

const Cat = props =>

<div>

<h1>{props.name}</h1>

<p>{props.color}</p>

</div>;

React Fragment

Fragment adalah cara membuat beberapa elemen tanpa menggunakan elemen pembungkus (wrapper). Saat mencoba merender elemen tanpa tag penutup di JSX, kamu akan melihat pesan kesalahan Adjacent JSX elements must be wrapped in an enclosing tag.

Baca Juga :

Ini karena ketika JSX meng-transpile, ia membuat elemen dengan nama tag yang sesuai, dan tidak tahu nama tag apa yang digunakan jika beberapa elemen ditemukan.

Di masa lalu, solusi yang sering dilakukan adalah menggunakan pembungkus div untuk menyelesaikan masalah ini. Namun, versi 16 dari React membawa penambahan code Fragment, yang membuat div tidak diperlukan lagi.

Fragment bertindak sebagai pembungkus (wrapper) tanpa menambahkan div yang tidak perlu ke DOM. Kamu dapat menggunakannya langsung dari React Import :

import React from ‘react’;

class MyComponent extends React.Component {

render(){

return (

<React.Fragment>

<div>Contoh element React</div>

<button>Contoh element React lainnya</button>

</React.Fragment>

);

}

export default MyComponent;

Pada versi 16.2, Reactmenyederhanakan proses diatas dengan memungkinkan tag JSX kosong ditafsirkan sebagai Fragment :

Baca Juga : Begini Nih Cara Scroll View pada React Native Yang Benar

return (

<div>Contoh element Reactdiv>

<button>Contoh element React lainnya</button>

</>

);

JSX

JSX adalah kependekan dari JavaScript XML.

JSX adalah ekspresi yang menggunakan pernyataan HTML yang valid dalam JavaScript. Kamu bisa menetapkan ekspresi ini ke variabel dan menggunakannya di tempat lain.

Kamu juga dapat menggabungkan ekspresi JavaScript dan JSX lain yang valid dalam pernyataan HTML ini dengan menempatkannya di dalam kurung kurawal ({}). Babel selanjutnya mengkompilasi JSX menjadi objek bertipe React.createElement ().

Single dan Multi line expression

Contoh Single Line Expression :

const one = <h1>Hallo Dunia !!</h1>;

Saat kamu perlu menggunakan beberapa baris (multi line) dalam ekspresi JSX tunggal, tulis kode dalam tanda kurung tunggal.

const two = (

<ul>

<li>Contoh ekspresi</li>

<li>Multi line</li>

</ul>

);

Tahukah kamu dalam React JS, kita bisa menggabungkan ekspresi Javascript ke dalam Tag HTML :

const nama = “Eko Prasetyo”;

const salam = <h1>Hello {nama}!</h1>;

Kita juga dapat memanggil fungsi JavaScript lainnya dalam kurung kurawal :

function contoh() {

return “Dunia”;

}

const salam = <h1>Hallo {contoh()}!</h1>;

Selain itu, dalam aturan penulisan expression dalam Javascript hanya boleh memiliki 1 parent tag saja. Kita hanya bisa membuat beberapa Tags di hanya pada 1 parent tag.

// Contoh penulisan Javascript yang Valid.

const tags = (

<ul>

<li>Twice</li>

</ul>

);

// Contoh Javascript yang tidak valid.

const tags = (

<h1>Hello World!</h1>

<h3>This is my special list:</h3>

<ul>

<li>Twice</li>

</ul>

);

Baca Juga :

Contoh React State

State dalam Program React adalah tempat asal suatu data.

Kita harus selalu berusaha membuat keadaan kita sesederhana mungkin dan meminimalkan jumlah komponen stateful.

Jika kita memiliki, misalnya, sepuluh komponen yang memerlukan data dari State, kita harus membuat satu komponen container (wadah) untuk menampung kesepuluh komponen tersebut

State pada dasarnya seperti objek global yang tersedia di mana-mana dalam suatu komponen.

Contoh Komponen Class Stateful:

import React from ‘react’;

class App extends React.Component {

constructor(props) {

super(props);

// Disini kita mendeklarasikan State

this.state = {

x: “Ini adalah x dari state”,

y: “Ini adalah y dari state”

}

render() {