LANJUTAN: LATIHAN MEMBUAT PROJECT WEB REACT QUERY

 Baik, untuk menambahkan **header**, **menu navigasi**, beberapa halaman seperti **Home**, **About**, **Project**, **Tutorial**, **Contact**, dan **footer**, kita akan membuat beberapa komponen serta menambahkan CSS dasar untuk tata letak dan gaya visual.

### 1. **Struktur Proyek**
- Buat beberapa komponen untuk tiap halaman dan bagian.
- Tambahkan CSS untuk mengatur layout dan gaya.
 
**Langkah-langkahnya**:

#### a. Buat folder baru untuk komponen
1. Di dalam folder `src`, buat folder `components`.
2. Di folder `components`, buat file berikut:
   - `Header.js`
   - `Footer.js`
   - `Menu.js`
   - `Home.js`
   - `About.js`
   - `Project.js`
   - `Tutorial.js`
   - `Contact.js`

#### b. Tambahkan CSS
1. Buat file `App.css` di `src/` untuk mengatur tampilan aplikasi secara keseluruhan.

### 2. **Membuat Komponen dan Mengatur Navigasi**

#### **1. Header.js** – untuk menampilkan judul dan menu navigasi
```javascript
import React from 'react';
import Menu from './Menu';

const Header = () => {
  return (
    <header>
      <h1>My Website</h1>
      <Menu />
    </header>
  );
};
export default Header;

#### **2. Menu.js** – untuk menampilkan menu navigasi
```javascript
import React from 'react';
import { Link } from 'react-router-dom';

const Menu = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/project">Project</Link></li>
        <li><Link to="/tutorial">Tutorial</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
};
export default Menu;

#### **3. Footer.js** – untuk menampilkan footer
```javascript
import React from 'react';

const Footer = () => {
  return (
    <footer>
      <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
  );
};
export default Footer;

#### **4. Home.js** – halaman utama
```javascript
import React from 'react';

const Home = () => {
  return (
    <div>
      <h2>Welcome to My Website!</h2>
      <p>This is the home page.</p>
    </div>
  );
};
export default Home;

#### **5. About.js** – halaman about
```javascript
import React from 'react';

const About = () => {
  return (
    <div>
      <h2>About Us</h2>
      <p>This is the about page.</p>
    </div>
  );
};
export default About;

#### **6. Project.js** – halaman project
```javascript
import React from 'react';

const Project = () => {
  return (
    <div>
      <h2>Projects</h2>
      <p>This is the projects page.</p>
    </div>
  );
};
export default Project;

#### **7. Tutorial.js** – halaman tutorial
```javascript
import React from 'react';

const Tutorial = () => {
  return (
    <div>
      <h2>Tutorials</h2>
      <p>This is the tutorials page.</p>
    </div>
  );
};
export default Tutorial;

#### **8. Contact.js** – halaman contact
```javascript
import React from 'react';

const Contact = () => {
  return (
    <div>
      <h2>Contact Us</h2>
      <p>This is the contact page.</p>
    </div>
  );
};
export default Contact;

### 3. **Menambahkan Routing di `App.js`**
Di dalam file `App.js`, kita akan menggunakan `react-router-dom` untuk mengatur rute.

1. Install `react-router-dom` jika belum:
   ```bash
   npm install react-router-dom

2. Modifikasi `App.js` untuk menggunakan routing:
```javascript
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import About from './components/About';
import Project from './components/Project';
import Tutorial from './components/Tutorial';
import Contact from './components/Contact';
import './App.css'; // Import file CSS

function App() {
  return (
    <Router>
      <div className="App">
        <Header />
        <main>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/project" element={<Project />} />
            <Route path="/tutorial" element={<Tutorial />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </main>
        <Footer />
      </div>
    </Router>
  );
}
export default App;

### 4. **Tambahkan CSS di `App.css`**
```css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  background-color: #4CAF50;
  color: white;
  padding: 10px 0;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

nav ul li {
  display: inline;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

main {
  padding: 20px;
}

footer {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  width: 100%;
  bottom: 0;
}

### 5. **Jalankan Aplikasimu**
Setelah semuanya siap, jalankan kembali aplikasi dengan:
```bash
npm start

Dengan konfigurasi ini, kamu akan memiliki aplikasi React yang menampilkan **header** dengan menu navigasi, beberapa halaman (Home, About, Project, Tutorial, Contact), dan **footer** di bagian bawah halaman.