2. Component | belajar react js untuk pemula

pada tutorial ini kita akan belajar apa itu component dan belajar menggunakan component pada react js. dalam menggunakan libarary react js teman-teman akan sering menggunakan component bahkan selalu menggunakan component, karena saat membuat website menggunakan react js yang kita lakukan adalah menggabungkan component-component misalkan component header,component body, dan conponent footer. satu component bisa digunakan berkali-kali, tinggal import saja component yang ingin digunakan. dalam satu file javascript bisa membuat beberapa component dan juga bisa dipisah-pisah difile yang berbeda-beda.

dalam pembuatan component terbagi menjadi dua cara yaitu menggunakan class dan function.

contoh yang pertama membuat component menggunakan class jalankan create-react-app untuk membuat project baru

create-react-app namaproject

setelah project selesai dibuat kita akan bermain di file App.jsdidalam file App.js sudah dibuatkan satu component.

App.js

import React,{ Component } from 'react';

class App extends Component{
render(){
return(
<h1>hello </h1>
)
}
}
export default App;

penulisan component diatas menggunakan class, ada beberapa aturan dalam membuat component :

1. nama component disarankan sama dengan nama file, agar mudah memeperbaiki kalo ada eroor.
2. saat pembuatan component wajib di export jika ingin digunkanan di file lain.
3. penulisan tag html jika lebih dari satu tag harus dibungkus dengan tag div yang wajib ada dalam pembuatan component yaitu import react

import React,{ Component } from 'react';

dan

export default Nama component

didalam satu file juga bisa terdapat beberapa component

App.js

import React, { Component } from 'react';
class Nama extends Component {
  render() {
    return (
      <span>developer</span>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>hello  <Nama /></h1>
        <Footer />
      </div>
    );
  }
}

export default App;

dalam contoh di atas telah ditambahkan component yang diberi nama Nama dan didelarasikan di component App. contoh selanjutnya pembuatan component menggunakan function component.

App.js

import React, { Component } from 'react';
import Header from './Header';
class Nama extends Component {
  render() {
    return (




      <span>developer</span>
    );
  }
}
const Footer =()=>{
return(
  <h3>ini footer</h3>
)
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>hello  <Nama /></h1>
        <Footer />
      </div>
    );
  }
}
export default App;

pada contoh di atas telah ditambahkan component footer dengan cara penulisan function component

pada contoh selanjutnya kita bagaimana caranya mengimport component difile yang berbeda. pertama buat dulu file misalkan diberi nama Header.js

Header.js

import React,{ Component } from 'react';
class Header extends Component {
  render() {
    return (
      <div className="App">
        <h1>ini header</h1>
      </div>
    );
  }
}
export default Header;

selanjutnya import component tersebut kedalam component App, tambahkan code berikut didalam file App.js

import Header from './Header';

setelah diimport deklarasikan component header dibagian atas tag

App.js

import React, { Component } from 'react';
import Header from './Header';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <h1>hello </h1>
        <Footer />
      </div>
    );
  }
}
export default App;