Building a Travel Planner App using React

In this tutorial, we will guide you through the process of creating a simple Travel Planner app using the React library. This app will allow users to input their travel destination, dates, and some notes, and then display the planned trips in a list.

Prerequisites

Before you begin, ensure that you have the following tools installed on your machine:

• Node.js and npm (Node Package Manager)
• Basic understanding of JavaScript and React

Step 1: Setting Up the Project

Open your terminal and follow these steps:

1. Create a new project folder and navigate to it:

   mkdir travel-planner-app
   cd travel-planner-app

2. Initialize a new React app using create-react-app:

   npx create-react-app .

3. Remove unnecessary files (e.g., App.css, App.test.js, logo.svg, etc.) and update the App.js file with the following code:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Travel Planner App</h1>
      {/* Add your components here */}
    </div>
  );
}

export default App;

Step 2: Creating Components

Let’s create the necessary components for our Travel Planner app.

1. Create a new folder named components inside the src folder.
2. Inside the components folder, create three new files: TripForm.js, Trip.js, and TripList.js.

TripForm.js

This component will handle the input form for adding new trips.

import React, { useState } from 'react';

function TripForm({ onAddTrip }) {
  const [destination, setDestination] = useState('');
  const [dates, setDates] = useState('');
  const [notes, setNotes] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!destination || !dates) return;

    const newTrip = { destination, dates, notes };
    onAddTrip(newTrip);

    setDestination('');
    setDates('');
    setNotes('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Destination"
        value={destination}
        onChange={(e) => setDestination(e.target.value)}
      />
      <input
        type="text"
        placeholder="Dates"
        value={dates}
        onChange={(e) => setDates(e.target.value)}
      />
      <textarea
        placeholder="Notes"
        value={notes}
        onChange={(e) => setNotes(e.target.value)}
      />
      <button type="submit">Add Trip</button>
    </form>
  );
}

export default TripForm;

Trip.js

This component will display individual trip information.

import React from 'react';

function Trip({ destination, dates, notes }) {
  return (
    <div className="trip">
      <h3>{destination}</h3>
      <p>{dates}</p>
      <p>{notes}</p>
    </div>
  );
}

export default Trip;

TripList.js

This component will render the list of trips using the Trip component.

import React from 'react';
import Trip from './Trip';

function TripList({ trips }) {
  return (
    <div className="trip-list">
      {trips.map((trip, index) => (
        <Trip
          key={index}
          destination={trip.destination}
          dates={trip.dates}
          notes={trip.notes}
        />
      ))}
    </div>
  );
}

export default TripList;

Step 3: Integrating Components

Update the App.js file to integrate the components and manage the state.

import React, { useState } from 'react';
import './App.css';
import TripForm from './components/TripForm';
import TripList from './components/TripList';

function App() {
  const [trips, setTrips] = useState([]);

  const handleAddTrip = (newTrip) => {
    setTrips([...trips, newTrip]);
  };

  return (
    <div className="App">
      <h1>Travel Planner App</h1>
      <TripForm onAddTrip={handleAddTrip} />
      <TripList trips={trips} />
    </div>
  );
}

export default App;

Step 4: Styling (Optional)

You can style your app using CSS to make it visually appealing. Modify the App.css file or add additional CSS files as needed.

Step 5: Running the App

In your terminal, make sure you’re in the root directory of your project and run:

npm start

This command will start the development server, and you should be able to access your Travel Planner app in your web browser at http://localhost:3000.

Conclusion

Congratulations! You’ve successfully built a simple Travel Planner app using React. This tutorial covered the basics of creating components, managing state, and integrating them to create a functional app. You can further enhance the app by adding features like editing and deleting trips, persisting data using local storage, and improving the app’s styling. Happy coding!