Building Home page

Home.jsx

This is one of the two parts (pages) of our app component, but it is also divided into further two components. On the right-hand side it has a huge illustration, on the left, there is a home-panel that consists of the logo, the button, and some text. Try visualizing the below diagram on the webpage, we’ll use these throughout this tutorial.

We’ll make this one a class component. To create a class component, we will extend our class Home with React.Component and should add a mandatory render method, note that this is the only difference between a regular javascript class and a react class component. For now, it is a stateless component throwing out a group of react elements on the page without keeping track of any data, later on, you’ll encounter states and lifecycle methods as well.

import React from "react";
import HomePanel from "../components/home_panel";
import svgs from "./../assets/index";

export default class Home extends React.Component {
  render() {
    return (
      <div className="home-container">
        <div className="hero-image">
          <img src={svgs.explore} alt="Through the desert SVG" />
        </div>
        <HomePanel />
      </div>
    );
  }
}

Dividing the Home page into two sections, - one is the hero image on the left side and the other one is the Home panel which is an empty component for now. For the hero image, we have imported an SVG named explore from the assets folder.

Remember that in react elements, to specify the class name we use className attribute and not class as we used to do for HTML elements.

Now that we have started writing the Home page we need to see how it looks, so to render it on the page, we are gonna add it to the top app component which is already rendered on the page via root.render in index.js. Your app component looks like this now,

import React from "react";
import Home from "./pages/home";
const App = () => {
    return (
        <div>
            <Home />
        </div>
    )
}
export default App;

Note: You always need to export these components, in order to use to somewhere else.

This is how it shows up on the page,

HomePanel.jsx

Initial code for HomePanel.jsx, It’s a function that returns nothing.

Let’s start adding content to it.

HOC: Higher order components are the React components that consist of some other components as their child element.

As HomePanel is a higher-order component, we need first to create the child components that are to be used by HomePanel. Let’s first look at the component tree of HomePanel, to understand the structure we need to build, and then we will start building the parts one by one, finally integrating them to build the HomePanel.

As you might have recognized by now, component nodes are notated by <CompName/> and the simple text on the node represents a div. Before visualizing it on the page, try relating the two diagrams below,

You see we have two components as children of HomePanel,

• Logo

• StartButton

<Logo/>

Let’s start building the Logo, we are going to use it inside the Planning page as well, so you can call it a reusable component. Look at the logo structure on the left and the final logo on the right to get an idea of what you are supposed to build exactly.

⚠️ dependency: You see that component <ImLocation/> in the above diag, it’s actually a react icon which you can see in the right-hand side image, we import it from a library called react-icons, you can install this library using npm install react-icons in the terminal of your root directory.

To select the react-icons of your choice, go over to the official react-icons website.

Now that you have the needed dependencies let’s write some code,

import { ImLocation } from "react-icons/im";
const Logo = () => {
  return (
    <span className="Logo">
      <ImLocation />
      TheTrips.com
    </span>
  );
};
export default Logo;

Let’s add the logo and some other text elements, also an SVG illustration, to our home-panel

import React from "react";
import svgs from "../assets";

export default function HomePanel() {
  return (
    <div className="home-panel">
			<Logo />
      <h1>Have stories to tell not stuff to show.</h1>
      <p>Plan your trip now!</p>
      <div className="plan-image">
        <img src={svgs.trip} alt="destination on map" />
      </div>
    </div>
  );
}

Note that we are adding the SVG illustration as an img element and inside a div for styling purposes.

This is how it looks now,

<Start/>

This is a button component, you might think why create a button component when we can use the HTML button element? But the thing is, here we need text as well as icons on our button and we also need to make sure this button takes us to a certain subroute in our application, here clicking on this start button will take you to the planning page from the home page. So in conclusion we have got some elements to combine to create this button.

This is how we are going to structure this component

This is how it finally looks

import { FiArrowRight } from "react-icons/fi";

const StartButton = () => {
  return (
    <button className="start-button">
      <p style={{ margin: "0 0.3rem" }}>Start</p>
      <span>
        <FiArrowRight size="1.2rem" />
      </span>
    </button>
  );
};

export default StartButton;

 StartButton.jsx 

For the paragraph element <p>, inline styling is added using the style attribute.

Inline styling is added as a javascript object with properties as CSS properties and their values , like { margin: "0 0.3rem" }. And because we are using this “javascript” object to provide style inside jsx, we need to wrap it inside {} again, as we do for any javascript statements inside jsx, {{ margin: "0 0.3rem" }}.

Now add <StartButton/> to the HomePanel.jsx

import React from "react";
import svgs from "../assets";
import Logo from "./logo";
import StartButton from "./StartButton";

export default function HomePanel() {
  return (
    <div className="home-panel">
      <Logo />
      <h1>Have stories to tell not stuff to show.</h1>
      <p>Plan your trip now!</p>
      <div className="plan-image">
        <img src={svgs.trip} alt="destination on map" />
      </div>
      <StartButton />
    </div>
  );
}

HomePanel.jsx

On scrolling down your page should look like this

Our Start Button looks nothing like the target image so far, now we need to add some Styling, you remember how the final HomePanel looks right? If not scroll back up and take a quick look.