Tutorial Belajar React JS Dasar Lengkap

Oleh ihsandroid 08 Sep, 2020

Belajar React Dengan Tutorial Dasar Lengkap - React adalah sebuah library javascript yang diciptakan oleh Facebook dan merupakan salah satu yang paling banyak dipakai saat ini.

Banyak perusahaan besar menggunaka React seperti facebook, instagram, netflix, airbnb, dropbox, untuk perusahaan lokal seperti tokopedia dan traveloka.

React biasa digunakan untuk tampilan situs web dan React Native digunakan untuk membuat aplikasi android dan iOS.

Bagi anda yang ingin lihat code master nya bisa cek disini :

1. Tombol React https://github.com/ihsandroid1/tombol-react

2. Counter React https://github.com/ihsandroid1/counter-react

Tools :

Visual Studio Code
Google Chrome
Node JS

Cara Install :

Untuk pemula, disarankan untuk menggunakan Create React App.

tetapi ketika anda sudah mahir anda bisa bangun aplikasi React sendiri dengan packages yang anda butuhkan saja seperti react, react-dom, react-router,babel,webpack.

Kedepan anda bahkan bisa gunakan Next.js atau Gatsby.

Tetapi disini kita mulai dari dasar sehingga menggunakan Create React App

Cukup ketik ini di terminal anda:

npx create-react-app nama-aplikasi

Contoh:

npx create-reacp-app buat-appku

Maka aplikasi anda akan terinstall di dengan nama "buat-appku"

Lalu tinggal ketik perintah:

cd buat-appku

npm start

maka aplikasi react anda akan berjalan di localhost dan bisa dibuka di browser anda, Selamat!

dan ketika aplikasi anda sudah sampai tahap production, ketik perintah:

npm run build

maka aplikasi anda sudah siap di upload ke server milik anda.

Atau selengkapnya tentang berbagai cara install react di komputer anda, Klik disini.

Contoh Struktur React :

Penjelasan Singkat:

Baris Pertama - Mengimport library React
Baris Kedua - Mengimport/Menggunakan Style CSS dari index.css
Baris Keempat - Membuat Component bernama "App"
Baris Kelima sampai Dua Belas - Isi dari Component App yang akan dijalankan/dirender
Baris ke 8 & 9 - Berisikan "Belajar React" dan "Testing Belajar React" inilah yang akan dirender
Baris ke 15 - Agar App dapat dapat digunakan maka Component App ini harus di export

Oke itulah penjelasan singkatnya, mari kita coba latihan dasar menggunakan React.

Menggunakan JSX

Menulis JSX hampir sama dengan menulis HTML. Anda dapat menggunakan tag yang benar-benar sama seperti HTML, seperti <h1> dan <h2> untuk judul atau <p> untuk paragraf, dan <div> untuk kolom dan container.

Kesalahan Umum dengan JSX

Meskipun JSX sangat mirip dengan HTML, ada beberapa perbedaan. Seperti yang ditunjukkan digambar sebelah kiri, beberapa element tidak dapat diletakkan didalam return.

Jika Anda memiliki lebih dari satu element, gabungkan element-element tersebut ke dalam satu tag <div> seperti contoh disebelah kanan.

Selengkapnya tentang penggunaan JSX bisa anda Lihat Disini.

Catatan tentang tag img

Di HTML, tag img tidak memiliki tag penutup sehingga dapat ditulis seperti <img src='URL gambar'>. Namun, tag penutup diperlukan oleh tag img didalam JSX seperti <img src='URL gambar' />. ingatlah didalam JSX, tag img harus diakhir dengan /.

Struktur App.js

File App.js selalu memiliki element dan struktur yang ditunjukkan di bawah ini. Catatan: Jika Anda lupa akan inheritence atau class, Anda dapat selalu membuka Slide Library untuk mereviewnya.

JSX Dan JS

Seperti yang dapat Anda lihat di atas, area JSX dan JS (JavaScript) dibagi dengan jelas. JSX hanya ditulis di dalam return dari method render. Element JSX akan ditampilkan di browser.

JavaScript dapat ditulis di luar kolom return (tetapi tetap di dalam method render). Dalam contoh dibawah ini, constant text ditentukan dengan code JavaScript di method render.

Meletakkan Code JS Di Dalam JSX

Bahkan dikolom return, JavaScript dapat ditulis didalam JSX. Untuk melakukan ini, code JavaScript harus diletakkan didalam tanda kurung kurawal { }. Selain itu, nilai atribut tag juga dapat disisipkan kedalam JSX dengan tanda kurung kurawal { } (seperti contoh di sebelah kanan).

Contoh :

import React from 'react';



class App extends React.Component {

  render() {

    // Nyatakan constant name 

    const name = 'Ninja Ken';

    

    // Nyatakan constant imgUrl 

    const imgUrl = 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/kentheninja.png';

    

    return (

      <div>

        {/* Gunakan constant name untuk menampilkan "Ninja Ken" */}

        <h1> {name} </h1>

        

        {/* Gunakan constant imgUrl untuk menampilkan gambar */}

        <img src= {imgUrl} />

        

      </div>

    );

  }

}



export default App;

Belajar Cara Mengubah Teks dengan Tombol React

Kali ini akan study kasus sederhana membuat tombol di react, menggunakan event dan state

Membuat Tombol

Pertama, kita akan membuat beberapa tombol untuk ditekan. Tombol dapat dibuat dengan tag <button>. Semua kata yang diletakkan di tag <button> akan ditampilkan di tombol.

Contoh :

import React from 'react';



class App extends React.Component {

  render() {

    return (

    	<div>

    	  <h1>Halo, Ninja Ken!</h1>

    	  {/* Tambahkan tag <button> dengan teks "Guru Domba" */}

    	  <button>Guru Domba</button>

    	  <button>Ninja Ken</button>

    	  {/* Tambahkan tag <button> dengan teks "Ninja Ken" */}

    	  

    	  

    	</div>

    );

  }

}



export default App;

Menggunakan Event

Dengan event, Anda dapat menentukan kapan sebuah code akan dijalankan. Pada contoh di bawah ini, ketika tombol di klik, code akan dijalankan untuk membuat Ninja Ken melompat.

Anda dapat membuat perintah untuk hanya menjalankan code ketika suatu event terjadi, gunakan code berikut: eventName={() => { code }}. Karena arrow function adalah fungsi JavaScript, jangan lupa untuk mengapitnya dengan tanda kurung kurawal { }.

Kita dapat menggunakan event onClick untuk menjalankan code ketika element tertentu di klik. Nama untuk event ini sebaiknya adalah onClick. Contoh penulisan di element button adalah <button onClick={() => {code}}>. Tulis code yang ingin dijalankan ketika event klik terjadi didalam tanda kurung kurawal { } (posisinya terletak dibagian {code} pada arrow function).

Contoh :

import React from 'react';

class App extends React.Component {

render() {

return (

<div>

<h1>Halo, Ninja Ken!</h1>

{/* Tambahkan event onClick didalam tag button, yang berfungsi untuk mencetak nama di console */}

<button onClick={ () => {console.log('Guru Domba')} }>Guru Domba</button>

{/* Tambahkan event onClick didalam tag button, yang berfungsi untuk mencetak nama di console */}

<button onClick={ ()=> {console.log('Ninja Ken')} }>Ninja Ken</button>

</div>

);

}

export default App;

State

Selanjutnya, mari kita ubah bagian name dari Hello, (name)! di dalam code sehingga ketika sebuah tombol ditekan, nama yang ditunjukkan di atas berubah.

Di React, nilai yang dapat dirubah berdasarkan tindakan pengguna disebut state. Kita dapat memperbarui state setiap kali tombol ditekan, lalu mengubah nama yang akan ditampilkan berdasarkan state.

Contoh :

import React from 'react';

class App extends React.Component {

// Nyatakan constructor dibawah

constructor(props){

super(props);

this.state = {name : 'Ninja Ken'};

}

render() {

return (

<div>

<h1>Halo, Ninja Ken!</h1>

<button onClick={() => {console.log('Guru Domba')}}>Guru Domba</button>

<button onClick={() => {console.log('Ninja Ken')}}>Ninja Ken</button>

</div>

);

}

export default App;

Memperbarui Halaman dengan State

Untuk Menggunakan State, kita butuh tiga tahap seperti gambar diatas.

Menentukan State

State dibuat menggunakan sebuah object di constructor. Nilai awal state ditetapkan untuk object tersebut.

Untuk bagian lain dari code seperti constructor(props) dan super(props);, ingat bahwa ini standar dan hampir selalu ditulis dengan cara yang sama.

Mendapatkan State

Setelah ditentukan, Anda dapat mengakses state dengan menggunakan this.state. Seperti yang sudah kita pelajari, state akan disimpan sebagai object. Jadi, console.log(this.state) akan mem-print object state tersebut ke console.

Catatan: string akan di-print dengan tanda kutip ganda (" ")

Menampilkan State

Karena this.state adalah sebuah object, Anda bisa mendapatkan nilai property didalam object tersebut dengan menulis code seperti this.state.propertyName.

Dicontoh di bawah, this.state.name akan mengembalikan nilai Ninja Ken, sehingga pesan Halo, Ninja Ken! akan ditampilkan pada browser, seperti gambar disebelah kanan.

Memperbarui State

Dengan code this.setState({propertyName: valueToUpdate}), nilai state untuk property yang ditentukan akan berubah. Ini artinya nilai yang dapat ditampilkan dengan this.state.name juga dapat diubah.

Untuk mengubah nama yang ditampilkan ketika sebuah tombol diklik, kita akan meletakkan setState di dalam method event onClick.

Hal-Hal Penting Tentang Memperbarui State

Di React, Anda tidak dapat mengubah nilai state dengan menetapkannya langsung ke state. Jika Anda ingin mengubah nilai di state, Anda harus menggunakan method setState. Hal ini penting untuk diingat ketika ingin memperbarui state.

Contoh :

import React from 'react';

class App extends React.Component {

constructor(props) {

super(props);

this.state = {name: 'Ninja Ken'};

}

// Nyatakan method handleClick

handleClick(name){

this.setState({name:name})

}

render() {

return (

<div>

<h1>Hello, {this.state.name}!</h1>

{/* Gantikan event onClick supaya dapat memanggil method handleClick */}

<button onClick={() => {this.handleClick('Guru Domba')}}>Guru Domba</button>

{/* Gantikan event onClick supaya dapat memanggil method handleClick */}

<button onClick={() => {this.handleClick('Ninja Ken')}}>Ninja Ken</button>

</div>

);

}

export default App;

Untuk Style CSS nya Seperti ini :

body {

margin: 0;

padding: 0;

font-family: sans-serif;

text-align: center;

min-width: 600px;

}

#root {

margin-top: 40px;

}

button {

display: inline-block;

font-size: 16px;

width: 200px;

height: 48px;

border-radius: 48px;

margin-right: 24px;

margin-left: 24px;

color: #fff;

background-color: #66ccff;

border: none;

outline: none;

box-shadow: 4px 4px #d8d8d8;

cursor: pointer;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

button:active {

position: relative;

top: 4px;

left: 4px;

box-shadow: none;

}

Hasil Jadi :

Souce Code : https://github.com/ihsandroid1/tombol-react

Belajar Membuat fitur Counter di React

Gunakan 3 langkah state untuk membuat fitur counter. Pertama, kita akan menyelesaikan Langkah pertama: Tentukan State dan Langkah kedua: Tampilkan State.

Contoh :

import React from 'react';



class App extends React.Component {

  constructor(props) {

    super(props);

    // Tentukan state

    this.state = {count : 0}

    

  }

  

  render() {

    return (

      <div>

        <h1>

          {/* Tampilkan nilai state */}

          {this.state.count}

          

        </h1>

        {/* Tambahkan tag <button> */}

        <button>+</button>

        

      </div>

    );

  }

}



export default App;

Contoh CSS Nya :

body {

margin: 0;

padding: 0;

font-family: sans-serif;

text-align: center;

min-width: 400px;

}

h1 {

font-size: 64px;

}

button {

display: inline-block;

font-size: 32px;

width: 200px;

height: 48px;

border-radius: 4px;

margin-right: 24px;

margin-left: 24px;

color: #fff;

background-color: #66ccff;

border: none;

outline: none;

box-shadow: 4px 4px #d8d8d8;

cursor: pointer;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

button:active {

position: relative;

top: 4px;

left: 4px;

box-shadow: none;

}

Lalu agar tombol counter bekerja dengan baik ini contoh kode nya :

import React from 'react';

class App extends React.Component {

constructor(props) {

super(props);

this.state = {count: 0};

}

// Buat method handleClick

handleClick(){

this.setState({count: this.state.count +1})

}

render() {

return (

<div>

<h1>

{this.state.count}

</h1>

{/* tambahkan event onClick di tag <button> */}

<button onClick= {() => {this.handleClick()} }>+</button>

</div>

);

}

export default App;

Preview :

Source Code : https://github.com/ihsandroid1/counter-react

Latihan Membuat Website Sederhana Dengan React

Disini kita akan bermain dengan component untuk membuat website sederhana, disini kita membuat Class seperti Footer, Header, Lesson dll yang bisa di export sehingga kita tinggal export saja dalam membentuk website dinamis dan menyusun nya.

Contoh Membuat Component :

// Import React
import React from 'react';


// Deklarasikan class Lesson 
class Lesson extends React.Component {
  render() {
    return (
      <div className='lesson-card'>
        <div className='lesson-item'>
          <p></p>
          <img />
        </div>
      </div>
      );
  }
  
}

// Export class Lesson 
export default Lesson;

Class Lesson diatas akan bertindak menjadi component yang bisa kita gunakan di App.js

Membuat Modal

Seperti contoh diatas kali ini kita buat modal nya, dalam membuat modal kita akan mengikuti alur nya seperti dibawah ini :

Oke untuk contoh kode nya akan seperti ini :

import React from 'react';

class Lesson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }

  handleClickLesson() {
    this.setState({isModalOpen: true});
  }
  
  // Deklarasikan method handleClickClose 
  handleClickClose(){
    this.setState({isModalOpen: false})
  }

  render() {
    let modal;
    if (this.state.isModalOpen) {
      modal = (
        <div className='modal'>
          <div className='modal-inner'>
            <div className='modal-header'></div>
            <div className='modal-introduction'>
              <h2>{this.props.name}</h2>
              <p>{this.props.introduction}</p>
            </div>
            {/* Tambahkan event onClick */}
            <button
              className='modal-close-btn'
              onClick={() => {this.handleClickClose()}}
            >
              Tutup
            </button>
          </div>
        </div>
      );
    }

    return (
      <div className='lesson-card'>
        <div
          className='lesson-item'
          onClick={() => {this.handleClickLesson()}}
        >
          <p>{this.props.name}</p>
          <img src={this.props.image} />
        </div>
        {modal}
      </div>
    );
  }
}

export default Lesson;

Preview :

Souce Code : https://github.com/ihsandroid1/lp-react

Belajar Membuat Form di React

Mari kita membuat tampilan form dengan menjadikan nya sebagai component seperti ContactForm.js

Disini kita akan memanfaat menggunakan JSX untuk tombol kirim nya dan membuat form nya

Mari setelah kita selesai membuat form dasarnya kita akan coba buat pesan terkirim, contoh nya seperti ini yah :

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      /* Spesifikasikan state isSubmitted */
      isSubmitted : false,
    };
  }

  render() {
    /* Deklarasikan variable contactForm */
    let contactForm;
    
    /* Buat statement if dengan isSubmitted sebagai pernyataan kondisional */
    if (this.state.isSubmitted){
      contactForm = (
        <div className='contact-submit-message'>
          Pesan Terkirim
        </div>);
    } else {
      contactForm = (
        <form>
          <p>Alamat Email (wajib diisi)</p>
          <input />
          <p>Pesan (wajib diisi)</p>
          <textarea />
          <input
            type='submit'
            value='Kirim'
          />
        </form>
        );
    }
    
    return (
      <div className='contact-form'>
        {/* Hapus code di bawah dan tampilkan variable contactForm */}
       {contactForm}
        {/* Hapus sampai di sini */}
      </div>
    );
  }
}

export default ContactForm;

Lalu kita akan coba mendapatkan nilai input nya seperti ini :

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',
    };
  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          Pesan Terkirim
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}}>
          <p>Alamat Email (wajib diisi)</p>
          {/* Tambahkan event onChange ke tag input */}
          <input
            value={this.state.email}
            onChange= { (event)=>{console.log(event.target.value)} }
          />
          <p>Pesan (wajib diisi)</p>
          <textarea />
          <input
            type='submit'
            value='Kirim'
          />
        </form>
      );
    }
    
    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

Lalu kita akan coba membuat pesan error nya seperti ini :

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',
      hasEmailError: false,
    };
  }

  handleEmailChange(event) {
    const inputValue = event.target.value;
    /* Deklarasikan constant isEmpty dan tetapkan nilainya ke hasil dari pemeriksaan input */
    const isEmpty = inputValue === ''
    
    /* Perbarui hasEmailError */
    this.setState({email: inputValue, hasEmailError: isEmpty});
    
  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let emailErrorText;
    if (this.state.hasEmailError) {
      emailErrorText = (
        <p className='contact-message-error'>
          Masukkan alamat email Anda
        </p>
      );
    }

    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          Pesan Terkirim
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}}>
          <p>Alamat Email (wajib diisi)</p>
          <input
            value={this.state.email}
            onChange={(event) => {this.handleEmailChange(event)}}
          />
          {emailErrorText}
          <p>Pesan (wajib diisi)</p>
          <textarea />
          <input
            type='submit'
            value='Kirim'
          />
        </form>
      );
    }

    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

Lalu saat nya finishing dalam membuat contact form kita, sehingga menjadi seperti ini :

import React from 'react';

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      email: '',
      hasEmailError: false,
      /* Tambahkan state "content" dan "hasContentError" */
      content : '',
      hasContentError : false
      
    };
  }

  handleEmailChange(event) {
    const inputValue = event.target.value;
    const isEmpty = inputValue === '';
    this.setState({
      email: inputValue,
      hasEmailError: isEmpty,
    });
  }

  /* Deklarasikan method handleContentChange */
  handleContentChange(event){
    const inputValue = event.target.value ;
    const isEmpty = inputValue === '' ;
    this.setState({
      content : inputValue,
      hasContentError : isEmpty
    })
  }

  handleSubmit() {
    this.setState({isSubmitted: true});
  }

  render() {
    let emailErrorText;
    if (this.state.hasEmailError) {
      emailErrorText = (
        <p className='contact-message-error'>
          Masukkan alamat email Anda
        </p>
      );
    }
    
    /* Deklarasikan variable contentErrorText */
    let contentErrorText;
    
    /* Buat statement if dengan hasContentError sebagai kondisi */
    if (this.state.hasContentError){
      contentErrorText = (
        <p className='contact-message-error'>
          Masukkan pesan Anda
        </p>
        )
    }
    
    let contactForm;
    if (this.state.isSubmitted) {
      contactForm = (
        <div className='contact-submit-message'>
          Pesan Terkirim
        </div>
      );
    } else {
      contactForm = (
        <form onSubmit={() => {this.handleSubmit()}} >
          <p>Alamat Email (wajib diisi)</p>
          <input
            value={this.state.email}
            onChange= {(event) => {this.handleEmailChange(event)}}
          />
          {emailErrorText}
          <p>Pesan (wajib diisi)</p>
          {/* Tambahkan nilai dan event onChange */}
          <textarea
            value={this.state.content}
            onChange={(event) => {this.handleContentChange(event)}}
            
          />
          {/* Tampilkan contentErrorText */}
          { contentErrorText }
          <input
            type='submit'
            value='Kirim'
          />
        </form>
      );
    }
    
    return (
      <div className='contact-form'>
        {contactForm}
      </div>
    );
  }
}

export default ContactForm;

Preview :

Source Code : https://github.com/ihsandroid1/form-react

Contoh Data Dinamis JSON sebagai Objek (app.js):

import React,{ Component } from 'react';

class App extends Component {
  constructor(){
    super();
    this.state = {
      siswa: [
        {
          id: 1,
          nama: 'Mona Nabilah'
        },
        {
          id:2,
          nama: 'Neno Balqis'
        },
        {
          id:3,
          nama: 'Ayana Shahab'
        }
      ]
    }
  }
  
  render(){
    return(
      <div>
        {
          this.state.siswa.map((dinamis,key) => 
          <div>
            <h3>  {dinamis.id} . {dinamis.nama} </h3>
          </div>
          )
        }
      </div>
    )
  }

}


export default App;

Contoh JSON Dari file json

import React,{ Component } from 'react';

class App extends Component {
  constructor(){
    super();
    this.state = {
      homestays : []
    }
  }

  componentDidMount(){
    fetch("https://raw.githubusercontent.com/algosigma/js-reactjs/master/homestays.json")
    .then(response => response.json())
    .then((data) => {
      this.setState({ homestays: data });
    })
  }
  
  render(){
    return(
      <div>
        {
          this.state.homestays.map((dinamis,key) => 
          <div>
            <h3> {dinamis.nama} - Rp. {dinamis.harga} rb </h3>
          </div>
          )
        }
      </div>
    )
  }

}


export default App;

Terima kasih jangan lupa untuk selalu belajar dari dokumentasi react atau sumber lainnya :)

Ihsan Magazine

Widget HTML Atas

Tutorial Belajar React JS Dasar Lengkap

Bagi anda yang ingin lihat code master nya bisa cek disini :