DEV Community

Cover image for Free React landing page template
Lasha Kakabadze
Lasha Kakabadze

Posted on • Updated on

Free React landing page template

Introduction

As you may have already guessed from the title, I'm going to go over my most recent React landing page template.

I have published my first open source library just a while ago, and you guys seemed to have loved it. As a token of appreciation, I'm posting about my second project.

Limited templates

React resources and landing page templates as a whole, are quite difficult to find on the internet, especially the ones that are not outdated or don't have a performance issue.

For that reason, I have used some of the most popular libraries to create this project. Including, but not limited to, ant design and styled-components for developing the UI, i18next for localization and react-reveal for making some subtle animations, I know this might sound a lot, but I plan on expanding this project in the future.

landy

Google Lighthouse

1

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

Features

Landy is a free React landing page template designed for developers and startups, who want to create a quick and professional landing page for their business or project. This project is also great for beginner developers, who are learning React or Frontend Development in general, as you are going to come across some of the most basic principles in this project.

This React template comes with multi-lingual support, smooth animations, contact form built with React Hooks and error validations, set of ready to use sections and most importantly, all of the content is stored in the JSON files, so that you can manage the texts and images without having any prior knowledge in React.js.

What's included?

🎁 Modern – Template created using the latest features of React (State management using Hooks, Code-Splitting to reduce the bundle size)

🏷 Responsive – Highly responsive and reusable UI components, that change depending on the provided props

🚀 Fast – Buttery smooth experience thanks to the implementation of best practices and no third party dependencies, resulting in PERFECT Google Lighthouse scores

🌍 Internationalization - Prebuilt standalone file that works in every environment and doesn't require reloading the page to translate the content

🛸 Routing - Each file inside the src/pages directory will generate its own route, so you don't have to manually handle the routing

🤙 Contact Form - Contact form written in React Hooks, with uncontrolled form validation to reduce unnecessary performance penalty. You just need to provide the endpoint

⚙️ Maintenance - All of the content is stored in the JSON files, so that you can easily manage the content of the website

About the project

You can view the live demo or check the source code.

Top comments (17)

Collapse
 
frankismartinez profile image
frank martinez

Well done Lasha.

It's odd how few LP templates are available for React; yet CRA is where founders I work with often start, to build their first products. And then they get stuck because CRA doesn't offer any opinions on setting up CTAs, testing workflows, collecting emails.

Collapse
 
adrinlol profile image
Lasha Kakabadze • Edited

You are absolutely correct.

This is an initial landing page I created in just a few days, since as you mentioned, there are only a few free LP templates available on the internet.

It's stil far from perfect, so I plan on expanding it in the future, adding some additional functionalities and sections, so that the startups can grow their business quicker.

Collapse
 
hellosfo profile image
hellosfo

Great job Lasha,
i clone the repo to my vscode..
After npm start:
missing script:start
?? what i'm doing wrong?
can you do a tut about Templete for JS beginners...you may wanna start a youtube channel ...you be a great teach..!!

Collapse
 
hellosfo profile image
hellosfo

medium.com/javascript-training/int...

some things like that will be good..
Thanks

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Looks like a prime example of the type of page/site that doesn't need React if I ever saw one

Collapse
 
adrinlol profile image
Lasha Kakabadze

You don't have to limit this template to a landing page, you can also expand it to add more content, implement lazy-loading, add more pages with your needs using built in, declarative routing.

Collapse
 
bennaceurhichem profile image
Bennaceur Hichem

Amazing Lasha ! Thank you 😍

Collapse
 
adrinlol profile image
Lasha Kakabadze

Thanks a lot Ben,

glad you liked it!

Collapse
 
adrinlol profile image
Lasha Kakabadze

Thanks a lot Dylan!

Collapse
 
roshankrsoni profile image
Roshan Kr Soni

thanks for sharing brother

Collapse
 
adrinlol profile image
Lasha Kakabadze

Glad you liked it Roshan!

Collapse
 
officialnqt profile image
Nurudeen Qoyyum Timi

Looks nice

Collapse
 
ngonid profile image
NgoniD

Thanks Lasha, this is time saving and generous.

Collapse
 
adrinlol profile image
Lasha Kakabadze

Glad you liked it!

Collapse
 
nescalan profile image
Nelson González Escalante

Thanks for this template

Collapse
 
adrinlol profile image
Lasha Kakabadze

You are welcome!

Collapse
 
yoramgondwe profile image
YoramGondwe

This is so helpful thank you so much.

One question how did you make the template I really want to learn.