Building a basic landing page with React

In this article today, we will explore how to build a website with React framework. Feel free to check out on my articles on how to deploy your own react application to the internet. Which you can find it here, both Netlify and Firebase.

Let’s have a quick recap.

What is React? React is a front-end JavaScript library that is used for building user interfaces or UI components. For more information you may check out both Wikipedia and Official React Website.

Create react app and install necessary library

I have assume that you have both npm and react installed on your machine. If you have not done it yet, check out my first article on how to install the necessary library.

TLDR; Below is the code to create a base react template.

npx create-react-app react-website

Again, this will create a base template folder called react-website where all the basic source code will reside in this folder. Before we start to get our hands dirty and dive into the code, there is one more library that we wanted to install.

npm install react-router-dom

React-router-dom is basically the go-to library for managing routing in a single page application. You see, in traditional html webpages, we will be sending to physical static html pages that is in your domains folder, for example, if user clicked on Contact Us page it will send user to the file ContactUs.html which then contains all the content that is meant for the page, but in react that is completely different. By manipulating Virtual DOM, we display the content we want dynamically on the same page, hence we are using this routing library to display content according to user click. We will cover more on the details when we are implementing the landing page.

To check whether you have installed the library, you may check out desired library is listed as dependencies in your package.json file.

Dependencies to run your project

Let’s write some code

First, we will clean up some code from the template.

Index.js,

Remove the code that reports web vital, as this is out of scope for now. We can do the same with lighthouse in the Developers Tools (Ctrl + Shift + I) or right click and select inspect.

As for React.StrictMode, I prefer to leave it in the code. This is a helper component that will run additional checks on your code, so this is actually allows developers to write good codes.

According to the site, StrictMode currently checks on:

• Identifying components with unsafe lifecycles
• Warning about legacy string ref API usage
• Warning about deprecated findDOMNode usage
• Detecting unexpected side effects
• Detecting legacy context API

For more information, you may check out stackoverflow’s post on StrictMode. But bear in mind that once StrictMode is enabled, your component will be rendered twice as this is to ensure the component is working as expected. A heads up so that you won’t panic if you need to debug your own react application in the future.

Another thing to note is that StrictMode will only affects development builds and not production build, so there is nothing to worry about.

Next, we will move on to App.js.

So our main goal is to create a website that has 3 pages, main page/Home page, About Us Page, and Contact Us Page.

<Router> component will allow all children to use <Link>, you can think of it as <a> tag in html. <Switch> component will then route the user based on the url entered in the address.

For example: ‘/’ means that if a user is in the base url direct to Home component.

When path={“/ContactUs”} then your url should be http://localhost:3000/ContactUs

Of course the react-router-dom is not just a simple routing library, it is actually a powerful tool, for now we will use it for basic web page routing only.

Say if you want to have dynamic routing, you configure with the following:

<Route path={'/:userID'} component={UserProfile}/>

We will continue to talk about this in the future episode.

So now we have a bare-bone website. Let’s try to add a bit more to the site.

Let’s make it looks nicer

So I believe a good web page design should always have atomic design in mind, and with React components we can do exactly that. I will not get into too details on this. You may check out chapter 2 from the book Atomic Design.

So now we will set up a template for our website, make sure that you always do a template so that you will have a unified .

So recall that we have an unexplained component, <Layout> think of it as an template for your application.

By doing this, we only need to generate content that is appropriate for the page while rest will be handled by this layout file. By doing this, we can avoid unnecessary rendering, and also to keep all the main styling code in one place.

I will assume that you have some basic knowledge on writing simple css for styling, there is plenty of resource out there if you want to learn.

With some simple css and html code, we have a basic website as follow:

Home Page

About Us Page

Contact Us Page

To summarize, we created one component for each page: home, contact us, and about us. Within those page, it is consists of smaller components.

For example, in Home page, we have included a pricing component and also a review/testimonial components. In short, we are only adding content that we need for each and every page.

Now you have a simple react website with some basic styling and routing enabled. Feel free to use this as a template for your project, and add more content to fill up the sample site.

So now that we have a foundation to expand upon, you may also try the following:

1. Adding a photo grid to the website,
2. Adding a google map to the site

3. Integration with third party ui component library.

4. Set up cloud functions to send email or write to excel sheet when user fill in contact form.

For the full source code, you can check out this Github repository.

In the next article, we will look into how to retrieve image from Instagram.

As usual just a disclaimer, this is not a guide on teaching people how to code but to explain what I usually do when writing a web application with react. Hopefully this article will let you have a better understanding on the tools that we have used.

Do let me know if you have any other interesting topic that you want to see. As always, thanks for checking out this post and Ii hope that you learn something today.