Hands-on Practice II

Step-by-step Walkthrough to Build the AppTravel.jsx React Application

Step 1. Create the React App Structure

1. Open your terminal and run the following commands to create and navigate to the project directory:

   npm create vite@latest
   >react-scrimba-travel-app
   >React
   >JavaScript
   cd react-scrimba-travel-app

2. Open visual studio code and open terminal

npm install

1. Install Bootstrap for styling:

npm install bootstrap

1. Import Bootstrap in the App.jsx file:

import 'bootstrap/dist/css/bootstrap.min.css';

---

Step 2. Set Up the Components Folder

1. Inside the src folder, create a new folder named components.

2. Add the following files inside the components folder:

   • Header.jsx

   • TravelEntry.jsx

   • travelData.js

---

Step 3. Add the travelData.js File

1. Add the provided travel data as an array of objects. Example:

   export default [
     {
       id: 1,
       img: {
         src: "https://scrimba.com/links/travel-journal-japan-image-url",
         alt: "Mount Fuji",
       },
       title: "Mount Fuji",
       country: "Japan",
       googleMapsLink: "https://maps.app.goo.gl/6RLYZDuuuqJ7kNGZ9",
       dates: "12 Jan, 2021 - 24 Jan, 2021",
       text: "Mount Fuji is the tallest mountain in Japan...",
     },
     // Additional travel entries...
     {
       id: 2,
       img: {
         src: "https://scrimba.com/links/travel-journal-australia-image-url",
         alt: "Sydney Opera House",
       },
       title: "Sydney Opera House",
       country: "Australia",
       googleMapsLink: "https://maps.app.goo.gl/Zr17SCrsJeCEKMd36",
       dates: "27 May, 2021 - 8 Jun, 2021",
       text: "The Sydney Opera House is a multi-venue performing arts centre in Sydney. Located on the banks of the Sydney Harbour, it is often regarded as one of the 20th century's most famous and distinctive buildings.",
     },
     {
       id: 3,
       img: {
         src: "https://scrimba.com/links/travel-journal-norway-image-url",
         alt: "Geirangerfjord",
       },
       title: "Geirangerfjord",
       country: "Norway",
       googleMapsLink: "https://maps.app.goo.gl/fhkJuBhmFDv47tiB7",
       dates: "01 Oct, 2021 - 18 Nov, 2021",
       text: "The Geiranger Fjord is a fjord in the Sunnmøre region of Møre og Romsdal county, Norway. It is located entirely in the Stranda Municipality.",
     },
     {
       id: 4,
       img: {
         src: "https://tinyurl.com/2arv9gc3",
         alt: "Jumgal",
       },
       title: "Jumgal Horse Milk",
       country: "Kyrgyzstan",
       googleMapsLink: "https://maps.app.goo.gl/aivBXpgxMDiaTsb88",
       dates: '01 Oct, 2021 - 18 Nov, 2021',
       text: 'It is a mountainous district. Its main rivers are the Kökömeren and its tributaries Jumgal, Suusamyr and Batysh Karakol.',
     },
     {
       id: 5,
       img: {
         src: "https://tinyurl.com/23spwexp",
         alt: "Kel-Suu",
       },
       title: "Kol-Suu , Naryn",
       country: "Kyrgyzstan",
       googleMapsLink: "https://maps.app.goo.gl/3RzgCZA2yg7VrA53A",
       dates: '01 July, 2024 - 04 July, 2024',
       text: 'a spectacular glacial lake set in a rocky canyon whose shear sides drop almost straight down into the lake.',
     },
   ];
   // Additional travel entries...
   

---

Layout Design

1. APP.jsx Layout

// App.jsx Layout
----------------------------------------------------
|                    [ Header ]                    |<---- Header Component
|--------------------------------------------------|
|                                                  |
|   [ Travel Entry 1 ]                             |<--- TravelEntry component
|   --------------------------------------------   |
|                                                  |
|   [ Travel Entry 2 ]                             |
|   --------------------------------------------   |
|                                                  |
|   [ Travel Entry 3 ]                             |
|   --------------------------------------------   |
|                                                  |
|   ...                                            |
|                                                  |
----------------------------------------------------

1. TravelEntry.jsx Layout

// Some code
------------------------------------------------------------
|                                                          |
|  [ Article Container ]                                   |
|  ------------------------------------------------------  |
|  |                                                    |  |
|  |  [ Image Section ]     [ Details Section ]         |  |
|  |  ------------------     -----------------------    |  |
|  |  |                  |   | [ Marker Icon ] Country  |  |
|  |  |                  |   | [ View on Google Maps ]  |  |
|  |  |   [ Image ]      |   |------------------------  |  |
|  |  |                  |   |   [ Title ]              |  |
|  |  |                  |   |   [ Dates (Italic) ]     |  |
|  |  ------------------     |   [ Description Text ]   |  |
|  ------------------------------------------------------  |
|                                                          |
------------------------------------------------------------

Header.jsx

// Header.jsx component
// 4. Create Header.jsx component

function Header() {
  return (
    <header className="d-flex align-items-center bg-warning p-3 ">
      <img
        src="/src/images/globe.png"
        alt="globe icon"
        style={{ width: '30px', marginRight: '10px' }}
      />
      <h1>My Favorite Travel Places in Kyrgyz</h1>
    </header>
  )
}

export default Header;

TravelEntry.jsx

// TravelEntry.jsx component

// 5. Create TravelEntry.jsx component
import React from 'react'

function TravelEntry({ img, title, country, googleMapsLink, dates, text }) {
  return (
    <article className="container mt-4 p-3 border rounded">
      <div className="row">
        <div className="col-md-4">
          <img src={img.src} alt={img.alt} className="img-fluid rounded" />
        </div>
        <div className="col-md-8">
          <div className="d-flex align-items-center mb-2">
            <img
              src="/src/images/marker.png"
              alt="marker"
              style={{ width: '16px', marginRight: '5px' }}
            />
            <span>{country}</span>
            <a 
              href={googleMapsLink}
              target="_blank"
              rel="noreferrer"
              className="ms-2 text-primary text-decoration-none ">
              View on Google Maps
            </a>
          </div>
          <h2>{title}</h2>
          <p className="text-muted fst-italic">{dates}</p>
          <p className="fs-5">{text}</p>
        </div>
      </div>
    </article>
  )
}

export default TravelEntry

App.jsx

// App.jsx  parent component
import Header from './components/Header'
import TravelEntry from './components/TravelEntry'
import travelData from './components/travelData'
import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css'

function App() {

  return (
    <>
      <div>
        <Header />
        <div className="container">
          {travelData.map((entry) => (
            <TravelEntry key={entry.id} {...entry} />
          ))}
        </div>
      </div>
    </>
  )
}

export default App

travelData.js

// travelData.js 
export default [
  {
    id: 1,
    img: {
      src: "https://scrimba.com/links/travel-journal-japan-image-url",
      alt: "Mount Fuji",
    },
    title: "Mount Fuji",
    country: "Japan",
    googleMapsLink: "https://maps.app.goo.gl/6RLYZDuuuqJ7kNGZ9",
    dates: "12 Jan, 2021 - 24 Jan, 2021",
    text: "Mount Fuji is the tallest mountain in Japan...",
  },
  // Additional travel entries...
  {
    id: 2,
    img: {
      src: "https://scrimba.com/links/travel-journal-australia-image-url",
      alt: "Sydney Opera House",
    },
    title: "Sydney Opera House",
    country: "Australia",
    googleMapsLink: "https://maps.app.goo.gl/Zr17SCrsJeCEKMd36",
    dates: "27 May, 2021 - 8 Jun, 2021",
    text: "The Sydney Opera House is a multi-venue performing arts centre in Sydney. Located on the banks of the Sydney Harbour, it is often regarded as one of the 20th century's most famous and distinctive buildings.",
  },
  {
    id: 3,
    img: {
      src: "https://scrimba.com/links/travel-journal-norway-image-url",
      alt: "Geirangerfjord",
    },
    title: "Geirangerfjord",
    country: "Norway",
    googleMapsLink: "https://maps.app.goo.gl/fhkJuBhmFDv47tiB7",
    dates: "01 Oct, 2021 - 18 Nov, 2021",
    text: "The Geiranger Fjord is a fjord in the Sunnmøre region of Møre og Romsdal county, Norway. It is located entirely in the Stranda Municipality.",
  },
  {
    id: 4,
    img: {
      src: "https://tinyurl.com/2arv9gc3",
      alt: "Jumgal",
    },
    title: "Jumgal Horse Milk",
    country: "Kyrgyzstan",
    googleMapsLink: "https://maps.app.goo.gl/aivBXpgxMDiaTsb88",
    dates: '01 Oct, 2021 - 18 Nov, 2021',
    text: 'It is a mountainous district. Its main rivers are the Kökömeren and its tributaries Jumgal, Suusamyr and Batysh Karakol.',
  },
  {
    id: 5,
    img: {
      src: "https://tinyurl.com/23spwexp",
      alt: "Kel-Suu",
    },
    title: "Kol-Suu , Naryn",
    country: "Kyrgyzstan",
    googleMapsLink: "https://maps.app.goo.gl/3RzgCZA2yg7VrA53A",
    dates: '01 July, 2024 - 04 July, 2024',
    text: 'a spectacular glacial lake set in a rocky canyon whose shear sides drop almost straight down into the lake.',
  },
];
// Additional travel entries...

images

marker.png

globe.png

Step 4. Create the Header.jsx Component

1. This component will display a header with a globe icon and a title.

2. Structure:

   • Use a div with Bootstrap classes for a responsive design.

   • Include a globe icon (use an online icon or Font Awesome).

3. Example:

   • Use the d-flex justify-content-center align-items-center Bootstrap classes for alignment.

   • Set a background color and padding using Bootstrap utility classes.

---

Step 5. Create the TravelEntry.jsx Component

1. This component will display individual travel entries within an article container.

2. Structure:

   • Use a two-column layout:

     • Left Column: Display the main image.

     • Right Column: Include:

       • Map marker icon, country name, and Google Maps link.

       • Title, dates, and description text.

   • Use Bootstrap’s grid system for the layout.

3. Suggested Bootstrap Classes:

   • row for the flex-row layout.

   • col-md-4 for the image column.

   • col-md-8 for the content column.

   • Use spacing utilities like mb-3, p-2, etc.

---

Step 6. Update App.jsx

1. Import Header, TravelEntry, and travelData.

2. Map over the travelData array to dynamically render a TravelEntry component for each item.

3. Pass the travel entry data as props to TravelEntry.

---

Step 7. Applying Bootstrap Styling

1. Header.jsx:

   • Add a background color with bg-warning or a custom class.

   • Use text alignment utilities (text-center) for centering the title.

2. TravelEntry.jsx:

   • Use the grid system (row, col) for layout.

   • Add spacing with utilities (mt-3, p-3, etc.).

   • Style the map marker and Google Maps link for better visibility.

---

Step 8. Final Steps

1. Save all files and start the development server:

   npm run dev

2. Check the following:

   • The header appears at the top with a globe icon and title.

   • Each travel entry is displayed in a two-column layout with the provided data.

   • The application is styled using Bootstrap.

---

Step 9. Additional Notes

• Adjust column widths using Bootstrap’s responsive grid classes (col-sm, col-md, col-lg) for different screen sizes.

• Test the links to ensure that they redirect to Google Maps correctly.

• Enhance accessibility by adding alt attributes to images and meaningful aria-labels to links.

This procedure ensures you build the application with proper styling using Bootstrap and dynamic rendering using React components. Let me know if you need clarification on any step!