Build a Local Train Journey Planner App Using React.js — Manage State with Hooks and Context API

Planning daily and weekend city commutes can be frustrating — especially when juggling multiple train routes or frequent schedule changes. In this guide, we’ll build a simple Local Train Journey Planner App using React.js, where users can create, view, and manage their train journeys.

You’ll learn how to use React Hooks to manage state, share state across components using the React Context API, and understand how React compares to other modern front-end frameworks like Angular and Vue.js.

This tutorial focuses purely on the front-end, so you can easily integrate it with your backend later if you choose to extend it.

🚀 What We’ll Build

We’re going to create a React app that allows users to:

Add new train journeys (source, destination, and date).
View a list of planned journeys.
Delete or update existing trips.
Manage the state locally using React Hooks and Context API.

This app will simulate a real-world journey planner UI, ideal for local train commutes during the workweek or weekends.

🧠 Understanding React.js

React.js is a popular JavaScript library for building user interfaces. Developed by Facebook, it allows developers to create dynamic and fast front-end applications using components and declarative programming.

The two key React concepts we’ll use in this app are:

React Hooks (useState, useContext, useEffect) for managing and reacting to state changes.
React Context API for sharing data between components without prop drilling.

🏗️ Setting Up the React App

Let’s start by setting up a new React project.


npx create-react-app journey-planner
cd journey-planner
npm start

This will spin up a development server at http://localhost:3000/ and display the default React welcome screen.

Now, let’s clean up the project:

Remove unnecessary files in /src such as App.test.js, logo.svg, and setupTests.js.
Keep only App.js, index.js, and App.css.

⚙️ Setting Up State with React Hooks

Let’s create our Journey Context to manage the shared journey data.

🧩 Step 1: Create the Journey Context

src/JourneyContext.js


import React, { createContext, useState } from 'react';

export const JourneyContext = createContext();

export const JourneyProvider = ({ children }) => {
  const [journeys, setJourneys] = useState([]);

  const addJourney = (journey) => {
    setJourneys([...journeys, journey]);
  };

  const removeJourney = (index) => {
    setJourneys(journeys.filter((_, i) => i !== index));
  };

  return (
    <JourneyContext.Provider value={{ journeys, addJourney, removeJourney }}>
      {children}
    </JourneyContext.Provider>
  );
};

This context stores:

An array of journeys
Functions to add and remove journeys

🧭 Step 2: Create the Main App Structure

src/App.js


import React from 'react';
import { JourneyProvider } from './JourneyContext';
import JourneyForm from './components/JourneyForm';
import JourneyList from './components/JourneyList';
import './App.css';

function App() {
  return (
    <JourneyProvider>
      <div className="App">
        <h1>🚆 Local Train Journey Planner</h1>
        <JourneyForm />
        <JourneyList />
      </div>
    </JourneyProvider>
  );
}

export default App;

We wrap everything inside JourneyProvider to share data across components.

✍️ Step 3: Create the Journey Form

src/components/JourneyForm.js


import React, { useState, useContext } from 'react';
import { JourneyContext } from '../JourneyContext';

const JourneyForm = () => {
  const { addJourney } = useContext(JourneyContext);
  const [source, setSource] = useState('');
  const [destination, setDestination] = useState('');
  const [date, setDate] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (source && destination && date) {
      addJourney({ source, destination, date });
      setSource('');
      setDestination('');
      setDate('');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="journey-form">
      <input
        type="text"
        placeholder="From"
        value={source}
        onChange={(e) => setSource(e.target.value)}
      />
      <input
        type="text"
        placeholder="To"
        value={destination}
        onChange={(e) => setDestination(e.target.value)}
      />
      <input
        type="date"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <button type="submit">Add Journey</button>
    </form>
  );
};

export default JourneyForm;

This component lets users add new train journeys to the shared state.

📋 Step 4: Display the Journeys List

src/components/JourneyList.js


import React, { useContext } from 'react';
import { JourneyContext } from '../JourneyContext';

const JourneyList = () => {
  const { journeys, removeJourney } = useContext(JourneyContext);

  return (
    <div className="journey-list">
      <h2>My Planned Journeys</h2>
      {journeys.length === 0 ? (
        <p>No journeys planned yet!</p>
      ) : (
        <ul>
          {journeys.map((journey, index) => (
            <li key={index}>
              <strong>{journey.source}</strong> → <strong>{journey.destination}</strong> on {journey.date}
              <button onClick={() => removeJourney(index)}>❌</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default JourneyList;

This shows all journeys added by the user. Thanks to React Context, every time a new journey is added or removed, all components update automatically.

🎨 Styling the App (Optional)

src/App.css


.App {
  font-family: 'Segoe UI', sans-serif;
  max-width: 600px;
  margin: 30px auto;
  text-align: center;
}

.journey-form input, .journey-form button {
  padding: 8px;
  margin: 5px;
}

.journey-list ul {
  list-style: none;
  padding: 0;
}

button {
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #1769aa;
}

⚡ How React Hooks and Context Make State Management Easy

In traditional React apps, passing state between components often led to prop drilling, where data had to be passed through multiple nested levels.

With React Hooks like useState and Context API, we can:

Keep state localized using useState.
Share that state across multiple components using useContext.
Update UI instantly when state changes.

This makes your front-end cleaner, modular, and easier to maintain — perfect for apps like planners, to-do lists, or dashboards.

⚖️ React vs Angular vs Vue.js — Which is Better?

Framework	Type	Key Strengths	Learning Curve
React.js	Library	Lightweight, reusable components, fast rendering via Virtual DOM	Moderate
Angular	Framework	Full-featured with routing, forms, and services	Steeper
Vue.js	Framework	Simplicity and reactivity, great for small-to-medium projects	Easy

React stands out for its ecosystem, developer community, and integration flexibility. If you want highly interactive UIs with minimal setup, React is a top choice for modern web apps.

🏁 Conclusion

We’ve just built a React-based Local Train Journey Planner App that demonstrates:

React Hooks for state management
React Context for sharing data between components
A clean, modular structure for building scalable front-end apps

Whether you’re planning your daily train commute or weekend city trips, this example showcases how React.js can be used to create fast, interactive, and stateful front-end applications.

If you’re learning React or building your next front-end project, this app is a great foundation to extend — for instance, by adding API integration, local storage, or even a map-based train route viewer!

Search This Blog

Captain Danko’s JavaScript Lab — Code Smarter with Tutorials, Frameworks & Dev Insights