AdityaDees

 

Component dalam dunia pemrograman bisa di artikan sebagai bagian-bagian yang tersusun satu kesatuan dengan fungsi teretentu. ReactJS sebagai front end dari website mengadopsi sistem component, dimana website di bagi menjadi beberapa component kemudian digabungkan dalam satu frame. Component ini seperti navigasi, header, footer, content, dan lain sebagainya.

Menariknya component yang dibuat pada ReactJS dapat digunakan berulang kali di tempat manapun. Contohnya ketika membuat sebuah card view , programer hanya perlu membuat satu component card view kemudian memanggilnya berulang kali sesuai yang di inginkan.

Lalu bagaimana cara memulai membuat componetn di ReactJS ?
Mari simak langkah-langkah di bawah ini.

1. Buka project yang telah di buat

Bagi yang belum tahu cara membuat project baru ReactJS silahkan ikuti tutorial dari awal Cara Install ReactJs dengan Mudah.

2. Buat folder component

Buka project baru yang telah dibuat lalu buat folder baru dengan nama component pada directory src.

3. Buat file component baru

Pada folder component buat file baru dengan nama Component1.js. Isi file ini dengan kode berikut :

import React, {Component} from 'react';



class Component1 extends Component {
    
    render(){
   
        return(
            <div>
                <h1>Mencoba membuat Component</h1>
                <p>Ini adalah contoh pembuatan Component</p>
            </div>           
        );
    }
    
}
export default Component1;

4. Panggil component ke App.js

App.js merupakan file utama yang akan tampil saat aplikasi dijalanka. Tambahkan component yang telah dibuat dengan terlebih dahulu melakukan import dengan code "import Component1 from './component/Component1';". Nama "Component1" harus sesuai dengan nama kelas dari component. Kode lengkap App.js seperti berikut.

import React, {Component} from 'react';

import Component1 from './component/Component1';



class App extends Component {
 render(){
  return (
    <component1/>
  );
 }
  
}

export default App;

Hasilnya akan tampak seperti berikut :





Component ini dapat dipanggil berulang kali tanpa menuliskan ulang code html pad component, cukup dengan memanggil tag Component1 contohnya kode App.js seperti berikut:

import React, {Component} from 'react';

import Component1 from './component/Component1';



class App extends Component {
 render(){
  return (
    <div>
  	<component1/>
  	<component1/>
  	<component1/>    </div>
  );
 }
  
}

export default App;

Maka hasilnya seperti berikut :

Kemudian muncul pertanyaan bagaimana ketika bila ingin mengganti data di setiap component ?
Pertanyaan ini akan di jawab pada postingan selanjutnya di REACTJS #3 MENGIRIM DAN MENAMPILKAN DATA KE COMPONENT.

 

 

 

Menampilkan tulisan ataupun tag HTML merupakan hal utama yang perlu diketahui dalam ReactJS. Seperti halnya ketika pertama kali mempelajari pemrograman bahasa lain akan diajarkan cara menampilkan tulisan. Pada pembelajaran pertama REactJS ini juga akan di ajarkan cara menampilkan tulisan berupa kata "Hello World!".

Sebelumnya pastikan untuk membuat project baru terlebih dahulu. Untuk cara pembuatan project baru ReactJS silahkan baca Membuat dan Menjalankan Project Baru ReactJS.

Selanjutnya ikuti langkah-langkah dibawah ini untuk memulai menampilkan tulisan.

1. Edit file App.js

File JS utama yang pertama kali akan di eksekusi ketika program dijalankan adalah App.js yang berada di directory src -> App.js. Secara default untuk versi terbaru kodenya akan tampak seperti berikt :

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Pada kode di atas terdapat tag html yang berada di dalam function App. Secara default fungsi App ini akan dijalakan ketika file App.js di eksekusi. Untuk membuat tampilan "Hello World!" silahkan rubah code yang ada dalam tag return(); dengan kode html yang di inginkan. Contohnya seperti berikut.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <h1>Hello World!</h1>
  );
}

export default App;

2. Jalankan aplikasi

Tampilan dari kode di atas ketika di jalankan maka tampak seperti pada gambar.

Perhatian :

Satu fungsi pada reactjs hanya bisa menjalankan satu paket tag html. Jadi misalnya kode html yang ingin dijalankan seperti ini.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <h1>Hello World!</h1>
    <h2>Selamat datang di Coding Rakitan</h2>
  );
}

export default App;

Program akan menampilkan error seperti berikut :





Jadi pastikan kode html tidak terbagi menjadi dua tag. Caranya dengan memasukkan 2 tag tersebut kedalam 1 tag html, seperti berikut.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
	  <div>
	    <h1>Hello World!</h1>
	    <h2>Selamat datang di Coding Rakitan</h2>
	  </div>
  );
}

export default App;

Maka hasilnya akan seperti berikut :