Show HN: Open – Free React landing page template

Gatsby doesn't compile to a static HTML website. It compiles to a static site. There's a subtle difference. The pages are rendered on the server and served as static assets, but the entire React routing and content loading is still there. When a visitor loads a page it renders and then gets turned from plain HTML back in to a React again. When you navigate from one page to the next all the content for further pages is preloaded. You are not loading a full HTML page for each link you click on (which is exactly what makes it feel so lovely and fast - everything is being preloaded behind the scenes).

Plus I don't like static html. If I setup webpack (you want different files, proper es6, imports...) You can easily add react.

No need to shift your thinking between static html and react.

Much easier to have 100 websites just with react. Can share components, hooks...

End of the day, faster Dev time, consistent projects, more enjoyable experience, reusable components. I trade that for a few Ms of speed.

This is how I got into making my own website. I came across BMFW [0], and studied the CSS file. I styled my plain html, adapted their CSS, and then kept going, finding inspiration from other sites and projects along the way. Almost 4 years later, my site [1] is a lot better, though still not perfect or finished.

I plan to download this React template, and use it as a learning opportunity. I'm definitely more interested in learning Vue or another hipster ass framework, but at this point I've done zero learning. Gotta start somewhere.

[0] http://bettermotherfuckingwebsite.com/

[1] https://www.calebyers.com/about.html

Websites should be as small as possible (max 100Kb).

A static page outperforms React, especially if systems like Hugo or Jekyll are used to keep themes separated from content

1. I’m using that much JS 2. Said JS is spaghetti 3. My split testing tool needs integrating with my ‘spaghetti JS’ 4. I’m creating enough landing pages the overhead of duplicate HTML/CSS is high

In reality, if I’m starting out quick:

1. I’ll use little JS because it isn’t necessary 2. The JS I do write isn’t large enough to become spaghetti 3. I’ll duplicate it twice and rethink if and only if I need yet another similar LP 4. Use an off the shelf split testing tool because they work and I need to move quickly

The faster I can get traffic to my landing page, the sooner I learn. On a new business, I’m starting from nothing. So HTML/CSS it is.

The most problematic assumption you’ve made is that if it’s not React, it’s spaghetti. I see this line of thinking trotted out by many React enthusiasts. And maybe for sufficiently complex frontend projects, there’s truth. But you know what also eliminates JS spaghetti? Not using JS unless it’s necessary. It’s possible and desirable to use as little JS as possible.

For example, if I want to generate leads, I need at least one but maybe all of these CTAs:

1. A form 2. A phone number / call button

That’s it. Where is the need for JS here?

Now if you told me your landing page included a full interactive demo of certain features of a SaaS product, which sounds cool and worth testing, I’d entertain using React. But that’s assuming all landing pages I ever need to create are for SaaS sign ups. Even for a SaaS, that assumes the conversion is a SaaS sign up. Right off the bat, a SaaS might (and probably should) want to:

1. Increase mailing list sign ups 2. Generate leads for higher priced plans (or all plans if you need to talk to sales) 3. Offer a free resource and retarget

Where’s the JS here? In both cases, it’s a form or a button at most.

As I said in my original comment, I’m not one of those that discounts SPAs. It’s useful and I’ve had great results. But if I’m outsourcing an LP, and the proposal outlines React as a solution, I’m gonna pass. Wrong tool for the job.