Apa itu React

React atau ReactJS dibuat oleh perusahaan raksasa yaitu meta dan bersifat open source dan merupakan library bukan framework, artinya apa? ketika menggunakan React kita akan diberikan kebebasan dalam menggunakan nya seperti apa tanpa ada kerangka kerja yang menentukan kita harus ngoding seperti apa. contohnya dari library React ini komunitas membuat berbagai framework seperti GatsbyJs dan yang paling popular saat ini yaitu NextJs

Pros & Cons

Komunitas yang besar, dengan banyak nya komunitas library2 yang support di React akan sangat banyak dan itu sangat membantu mempermudah pembuatan sebuah aplikasi contoh javascript utilities library yang terkenal ada underscore dan lodash, untuk validasi form ada React Hook Form dan Formic, untuk library component UI / Kits seperti Material UI, Chakra Design, Ant Design Dsb, namun minus nya dari communit yang besar ini adalah perkembangan nya sangat2 cepat

2 Tipe Komponen React

sebelum membahas komponennya perlu diketahui dulu lifecycle dari komponen react itu sendiri dan penjelasannya namun tidak semua akan dijelaskan.

Mounting

constructor merupakan method yang pertama kali dipanggil ketika komponen dibuat, fungsinya untuk menginitialize state dan bind event handler yang terdappat di komponen
```
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}
```

Render method inilah yang memiliki tanggup jawab untuk menampilkan markup HTML yang dimiliki oleh komponen.

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

ComponentDidMount method ini akan langsung dipanggil setelah komponen berhasil di mount

class MyComponent extends React.Component {
  componentDidMount() {
    // Fetch data from a server or perform other side effects
  }
}

Updating

Render method ini akan dipanggail lagi di fase updateding

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

componentDidUpdate method ini akan dipanggil ketika perubahan komponen sudah terlihat

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    // Perform actions based on changes in props or state
  }
}

UnMounting

componentWillUnmount method ini akan sebelum component tersebut di hilangkan dari DOM

class MyComponent extends React.Component {
  componentWillUnmount() {
    // Clean up resources, cancel timers, close connections, etc.
  }
}

contoh2 yang diberikan sebelumnya merupakan contoh Class Components. lalu kenapa terdapat Functional Components sampai2 Class Components ditinggalkan? semua karena Hooks. berkat hook:

code lebih sederhana
lebih cepat dan lebih efisien
bisa mengimplementasikan react lifecycle tanpa harus menulis class

contoh

Class Components

import React, { Component } from 'react'
import Axios from 'axios'
 
export default class Hello extends Component {
 
    constructor(props) {
        super(props);
        this.state = { name: ""};
    }
 
    componentDidMount() {
        Axios.get('/api/user/name')
        .then(response => {
            this.setState({ name: response.data.name })
        })
    }
 
    render() {
        return (
            <div>
                My name is {this.state.name}
            </div>
        )
    }
}

Contoh Functional Components

import React, { useEffect, useState } from 'react'
import Axios from 'axios'
 
export default function Hello() {
 
    const [Name, setName] = useState("")
 
    useEffect(() => {
        Axios.get('/api/user/name')
        .then(response => {
            setName(response.data.name)
        })
    }, [])
 
    return (
        <div>
            My name is {Name}
        </div>
    )
}

hasilnya sama namun functional component cenderung lebih sederhana dalam cara memanfaatkan React lifecycle, ditambahlagi dengan konsep Hooks ini akan banyak sekali fitur baru yang sangat membantu contohnya useContext, useRef yg akan dibahas di artikel2 selanjutnya

Apa itu React

Pros & Cons​

2 Tipe Komponen React​

Pros & Cons

2 Tipe Komponen React