Tanggal :October 25, 2020

Membuat Header Menggunakan React Bootstrap di React Js !

Spread the love

Pada Tutorial Selanjutnya kita akan Membuat Header Halaman kita menggunakan React Bootstrap !

pada tutorial sebelumnya kita sudah membuat project react js kita dengan mengetikkan create react app .

yang pertama mari kita membuat folder parts untuk membuat header kita. tujuan kita membuat header di folder parts kali ini agar lebih mudah untuk nanti dipanggil ke pages atau halaman lainnya.

sehingga tampilan project kita akan nampak seperti ini :

Ohya. jangan lupa membuat file Header.js untuk menampung code Header yang dibuat dengan React Bootstrap. setelah itu mari kita kunjungi website react bootstrap disini.

selanjutnya dalam documentasi react bootstrap kita mengharuskan untuk menginstall react bootstrap di project react kita. sesuai dengan documentasi react bootstrap lansung saja dengan menjalankan code dibawah ini :

npm install react-bootstrap bootstrap

setelah itu mari kita copy file Header js dibawah ini :

import React from “react”;
import logo from “../logo.svg”;
import { Navbar } from “react-bootstrap”;
import { Nav } from “react-bootstrap”;
import { Form } from “react-bootstrap”;
import { FormControl } from “react-bootstrap”;
import { NavDropdown } from “react-bootstrap”;
import { Button } from “react-bootstrap”;
import “bootstrap/dist/css/bootstrap.min.css”;
export default function Header(props) {
  return (
    <Navbar bg=”light” expand=”lg”>
      <Navbar.Brand href=”#home”>React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls=”basic-navbar-nav” />
      <Navbar.Collapse id=”basic-navbar-nav”>
        <Nav className=”mr-auto”>
          <Nav.Link href=”#home”>Home</Nav.Link>
          <Nav.Link href=”#link”>Link</Nav.Link>
          <NavDropdown title=”Dropdown” id=”basic-nav-dropdown”>
            <NavDropdown.Item href=”#action/3.1″>Action</NavDropdown.Item>
            <NavDropdown.Item href=”#action/3.2″>
              Another action
            </NavDropdown.Item>
            <NavDropdown.Item href=”#action/3.3″>Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href=”#action/3.4″>
              Separated link
            </NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Form inline>
          <FormControl type=”text” placeholder=”Search” className=”mr-sm-2″ />
          <Button variant=”outline-success”>Search</Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  );
}

setelah itu mari kita buat file LandingPages kita di dalam folder pages, oh ya jangan lupa buat folder pages, sehingga tampak struktur folder react js kita akan seperti ini :

ohya, file about.js tidak usah kita sentuh terlebih dahulu, karena pada tutorial selanjutnya kita akan belajar berpindah halaman di react js, lansung saja setelah itu di dalam file LandingPages.js sisipkan code berikut :

import React, { Component } from “react”;
import Header from “../parts/Header”;
export default class LandingPages extends Component {
  render() {
    return (
      <>
        <Header></Header>
      </>
    );
  }
}

setelah itu mari kita ubah file app.js kita untuk memanggil file LandingPages.js kita , sehingga fila app,js kita nampak seperti dibawah ini :

import React from “react”;

import “./App.css”;
import LandingPages from “./pages/LandingPages”;
function App() {
  return (
  <div className=”App”>
      <LandingPages></LandingPages>

  </div>);
}

export default App;

setelah itu mari kita jalankan dengan code npm start.

akhirnya setelah itu nampak file kita jalan di browser akan nampak seperti dibawah ini :

seperti itulah membuat header menggunakan react bootstrap di react js, tutorial selanjutnya kita akan memperbaiki header kita dan membuat nya berpindah halaman menggunakan navigasi header.

List seri Belajar React Js :

  1. Membuat Project React Js Pertamamu !
  2. Pengenalan Lingkungan Kerja React js.
  3. Membuat Header dengan React Bootstrap di React js.
  4. Berpindah Halaman di React Js menggunakan React Router Dom.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *