DEV Community

loading...
Cover image for Free React landing page template

Free React landing page template

adrinlol profile image Lasha Kakabadze ・Updated on ・2 min read

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.

Discussion

pic
Editor guide
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 Author

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
britzdylan profile image
Dylan Britz

Nice Work

Collapse
adrinlol profile image
Lasha Kakabadze Author

Thanks a lot Dylan!

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
bennaceurhichem profile image
Bennaceur Hichem

Amazing Lasha ! Thank you 😍

Collapse
adrinlol profile image
Lasha Kakabadze Author

Thanks a lot Ben,

glad you liked it!

Collapse
officialnqt profile image
Collapse
ngonid profile image
NgoniD

Thanks Lasha, this is time saving and generous.

Collapse
adrinlol profile image
Lasha Kakabadze Author

Glad you liked it!

Collapse
jonrandy profile image
Jon Randy

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 Author

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
nescalan profile image
nescalan

Thanks for this template

Collapse
adrinlol profile image
Lasha Kakabadze Author

You are welcome!

Collapse
roshankrsoni profile image
Roshan Kr Soni

thanks for sharing brother

Collapse
adrinlol profile image
Lasha Kakabadze Author

Glad you liked it Roshan!