# REACT JS

### Dokumentasi resmi
`https://id.reactjs.org/docs/hello-world.html`

### Contoh membuat component dengan function & props
Nilai di dalam props tidak disarankan untuk diubah. Jika ingin mengubah nilainya sebainya menggunakan stage. Nama fungsi harus diawali dengan huruf besar.

function GetName(props) {
  return <p>Hello {props.name}</p>
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <GetName name="elgio" ></GetName>
        <GetName name="yevander" ></GetName>
        <GetName name="anggana" ></GetName>
        <GetName name="ginting" ></GetName>
      </header>
    </div>
  );
}

export default App;

### Contoh pengguaan stage
Stage harus menggunakan class component.

import { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = { seconds: +props.start };
  }

  tick() {
    // cara update nilai stage
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  // mirip onInit di angular
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  // mirip onDestroy di angular
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>Hello</p>
        <Timer start="0"></Timer>
        <Timer start="10"></Timer>
      </header>
    </div>
  );
}

export default App;

### Contoh route

import { BrowserRouter, Route, Switch, Link } from 'react-router-dom'

function Home() {
  return <h2>Hello Home!</h2>
}

function ListUser() {
  return (
    <div>
      <h2>List User!</h2>
      <ul>
        <Link to='user/sarginsu'>Sarginsu</Link> <br></br>
        <Link to='user/elgio'>Elgio</Link>
      </ul>
    </div>
  )
}

function DetailUser({ match }) {
  return <h2>Hello {match.params.name}</h2>
}

function Error() {
  return <h2>404, Error!!</h2>
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <li><Link to='/'>Home</Link></li>
          <li><Link to='/user'>User</Link></li>
        </nav>

        <main>
          <Switch>
            <Route path='/' exact component={Home}></Route>
            <Route path='/user' exact component={ListUser}></Route>
            <Route path='/user/:name' exact component={DetailUser}></Route>
            <Route component={Error}></Route>
          </Switch>
        </main>
      </div>
    </BrowserRouter>
  );
}

export default App;

### Trik & Tips
#### Ambil data dari object
> Contoh untuk mengambil nilai item dan error dari this.stage dan dilakukan map untuk mengambil nilai dari objeknya.

const { items, error } = this.stage

items.map((item, index) => {
    console.log(item.name)
})

#### Pembungkus
> Return di react umumnya harus di bungkus dengan div atau span. Tetapi kadang merusak struktur css. Solusinya ada di contoh dibawah.
Dengan `React.Fragment` pembungkusnya tidak akan terlihat di inspect element.

import React, { Component } from 'react';

function Kolom() {
  return (
    <React.Fragment>
      <td>Pertama</td>
      <td>Kedua</td>
    </React.Fragment>
  )
}

class App extends Component {
  render() {
    return (
      <table>
        <tr>
          <Kolom></Kolom>
        </tr>
      </table>
    );
  }
}

export default App;