Live Coding: Creating a Multi-Page Space Tourism Website with React, and More! Goal: 500 Subscribers!

Welcome to this live coding tutorial where we will be building a space tourism multi-page website using React. Our goal is to create a visually stunning and interactive website that showcases the future of space tourism. We will also be adding more features and functionalities as we reach 500 subscribers on our channel.

Let’s get started by setting up our development environment. Make sure you have Node.js and npm installed on your computer. You can check if you have them by running the following commands in your terminal:

node -v
npm -v

If you don’t have Node.js and npm installed, you can download them from the official website https://nodejs.org/.

Now let’s create a new React project using Create React App. Run the following command in your terminal:

npx create-react-app space-tourism

This will create a new directory called space-tourism with all the necessary files and folders for a React project.

Next, navigate to the project directory and start the development server by running the following commands:

cd space-tourism
npm start

This will start the development server and open the website in your default browser. You should see the default Create React App page.

Now let’s start building our space tourism website. We will create multiple pages for different space tourism destinations, such as Mars, Moon, and beyond. Each page will have its own unique design and content.

First, create a new directory called pages inside the src directory. This is where we will store all the page components.

Next, create a new file called Mars.js inside the pages directory. This will be the page component for the Mars destination. Write the following code inside the Mars.js file:

import React from 'react';

const Mars = () => {
  return (
    <div>
      <h1>Mars Tourism</h1>
      <p>Explore the red planet with our exclusive Mars tourism package.</p>
    </div>
  );
};

export default Mars;

Now, create a new file called Moon.js inside the pages directory. This will be the page component for the Moon destination. Write the following code inside the Moon.js file:

import React from 'react';

const Moon = () => {
  return (
    <div>
      <h1>Moon Tourism</h1>
      <p>Experience the beauty of the Moon with our luxury Moon tourism package.</p>
    </div>
  );
};

export default Moon;

Next, create a new file called Beyond.js inside the pages directory. This will be the page component for the beyond destination. Write the following code inside the Beyond.js file:

import React from 'react';

const Beyond = () => {
  return (
    <div>
      <h1>Beyond Tourism</h1>
      <p>Embark on an interstellar journey with our beyond tourism package.</p>
    </div>
  );
};

export default Beyond;

Now that we have created the page components, let’s create the navigation menu so users can navigate between the different destinations. Create a new file called Navbar.js inside the src directory and write the following code:

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/mars">Mars</Link></li>
        <li><Link to="/moon">Moon</Link></li>
        <li><Link to="/beyond">Beyond</Link></li>
      </ul>
    </nav>
  );
};

export default Navbar;

Now let’s update the App.js file to include the navigation menu and set up the routes for the different destinations. Write the following code inside the App.js file:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './Navbar';
import Mars from './pages/Mars';
import Moon from './pages/Moon';
import Beyond from './pages/Beyond';

const App = () => {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path="/mars" component={Mars} />
        <Route path="/moon" component={Moon} />
        <Route path="/beyond" component={Beyond} />
      </Switch>
    </Router>
  );
};

export default App;

That’s it! You have successfully created a space tourism multi-page website using React. As we reach 500 subscribers on our channel, we will add more features and functionalities to make the website even more engaging and interactive.

Feel free to customize the design, content, and functionality of the website to make it your own. Stay tuned for more updates and enhancements to our space tourism website. Thank you for joining us on this live coding journey!