
Show HN: Open – Free React landing page template - DavideP86
https://github.com/cruip/open-react-template
======
jwdunne
This is not a good use case for react. At all. A landing page should do one
thing and one thing well: drive an action. The less distracting interactivity
the better. The only thing you want interactive are your CTAs. The overhead of
using React, even if using a static site generator, isn’t worth it. Not when
you can whip up a simple HTML/CSS page in less time that’s far far easier to
build and deploy. Because the faster you get it out, better. The less time
between TTFB and full interaction, the better. Otherwise you’re wasting time
and ad spend.

And don’t get me wrong, I like React. And the projects have used it on have
impressed clients beyond what we could achieve with just using backend HTML
templates. But for a landing page that you’re driving paid traffic to? Not a
good use case at all.

~~~
emagdnim2100
For what it’s worth - there’s definitely no speed up, for me at least, to ship
a pure handwritten HTML + CSS page vs the same page using create-next-app. The
latter makes it trivially easy to add new functionality, etc; the former
guarantees I have to start over. I also get a bunch of stuff - TypeScript,
code splitting, minification, etc - for free, literally no work. It’s nice.

Using Next with Preact instead of React makes the total gzipped JS bundle
around 20kb. Takes no time to set up.

If you’ll only ever build one website, sure, use basic tools. If you can
amortize the cost of learning the toolchain across many projects, use better
tools! (I’m not saying that’s only React by any means.)

~~~
jwdunne
Why would I need TypeScript, code splitting and new functionality on a single
page with one purpose: to sell?

I’m all for extensible solutions when required but React does not buy me much
for the overhead on a landing page that I drive paid traffic too.

Now if a client had marketing team that needed to spin out a new landing page
along with an ad on demand without code, I’d use React to build a landing page
builder. The server would generate a static page and I’d have something cache
that (and purged on modification of that page or a release). That’s perfect
use case for React.

But a single page that I’m driving paid traffic to for a new business? Not in
react. If I needed two, I have no shame, I’d copy and paste. Then at 3 I’d
consider static site generation - on the basis that the build produces static
assets only. Perhaps if the campaigns do their job, I can invest in tools that
empower my marketing guys to build landing pages for their campaigns.

The fact is I don’t need the interactivity of React on a landing page. I don’t
need more functionality on a landing page than CTAs, sales copy and social
proof. If I’m putting anything more than that on a landing page, I’m failing.
If the landing page is not 100% focused on what I want, which is usually sales
or the entry to a funnel, it’s failing.

Now if the product you’re selling, as I said below, IS highly interactive and
user friendliness is a selling point, I can see React being of use for live
on-page demos of features. Because that’s what you’re selling!

------
arnaudsm
What's the advantage of using React for a landing page that could be a 10KB
static HTML file ? (non-sarcastic question)

~~~
protonimitate
I'm seeing 714kb of data loaded over 924ms.

Not as small as possible, but I don't think this really qualifies as bloat.

Imo the benefits of using React boilerplate for a landing page would be: \-
Quick to set up / customize (faster than starting from scratch in vanilla js,
anyway) \- Flexible. Allows devs to quickly pivot the landing page into a
"landing page + [whatever]" if needed

If pure speed to load is your endgoal, then go with a static page. However, I
think a vast majority of users won't notice and/or care about the small
difference in speed or "bloat".

I guess to flip the question, what's the benefit of using a static HTML file
over React, other than a 10kb footprint?

~~~
icholy
> I'm seeing 714kb of data loaded over 924ms.

That's really bad!

~~~
protonimitate
How so? Anything < 1 sec of load time on average is "good enough" for 90% of
use cases.

The only way you could possibly quantify this is by collecting data on # of
conversions between the "optimized static site" and this react boiler plate.

Spoiler: the time you waste collecting this data could be spent working on an
MVP that this landing page is supporting ;)

~~~
drusepth
Please don't take this as argument, but do you have any studies/sources that
support anything <1 sec of load time being "good enough" for 90% of use cases?

Maybe I'm naive, 90% seems like an extremely high estimation to me.

~~~
folkhack
It's an over-generalization and I'll throw my own anecdata in here from
ecommerce: I've seen MAJOR improvements with conversions when I can get
something from a 1s load-time down to <250ms. I don't have any published
studies out there on this but you can definitely find TONS of data on faster
load increasing customer interaction/conversions.

Specifically, it's an interface-to-interface thing as much as a first load
experience... if a customer can browse my stores with near-instant loading of
product pages (or maybe even pre-loaded) they are more likely to look at more
products. If they're more likely to look at more products, they're more likely
to buy, etc etc. Sure 750ms doesn't SEEM like much, but what about someone
who's shopping for a formal dress? They may be looking at 20+ unique SKUs
within a shopping experience so take 20 * 750ms and there ya go.

We don't control things like network conditions, etc. and even in 2020 we must
be respectful to the end client in regards to transmitted data to run an
experience.

I know I didn't link to any studies here so it's all moot, but I'm just
sharing my in-industry experience with optimization to illustrate that lots of
people don't settle for "90% of the time <1s is good enough".

------
ahmedfromtunis
Thank you for open-sourcing this and sharing it here. I'm sure a lot of people
would find this useful.

That said, I wouldn't recommend for people looking for readymade landing pages
to use React (or any other such framework) UNLESS they're already familiar
with it. Otherwise, it would be a waste of their time -- setting up the
development environment and then deploying it.

For such a case, it'd be better off writing some HTML and CSS by hand (maybe
with some help from Bootstrap or any other such framework), push it to some
git repo and throw it at Netlify. It's easy and free.

Now, this is obviously just my opinion. So, please don't feel obliged by it in
any way. However, I'd be glad if someone just told why I might be mistaken;
and how React would make for a great choice for this kind of projects?

Again, OP, thank you for sharing this with us!

------
oscarteg
Using React is really bad for your SEO. If you want to use React, use
something like Nextjs or Gatsby to compile it into a static HTML website.

~~~
have_faith
I've built API powered React sites with almost no consideration for SEO that
Google has indexed without issue. My experience has been that as long as the
API requests for content are quick Google is happy to wait and index correctly
as expected. YMMV obviously.

------
deedubaya
When you’re swinging a hammer, everything looks like a nail

------
paulintrognon
The site looks great but you should have used a static site generator (like
GatsbyJS) or at least a server-side rendering framework (like Next.js[1])
rather than create-react-app.

There is no need for this kind of website to be generated client-side.

[1] The latest version of Next.js does static site generation. Which is trully
fantastic: you get all the power of React but the site is served as HTML. The
generated site can even be accessible with JavaScript disabled!

------
deftturtle
As others have pointed out, you could use a static html page, vanilla js, etc,
but ignoring this, I see value for future learning. Sure, there are
alternatives, but it looks like the industry wants React skills. I've never
used React, and I'm pretty new to web design, so this makes me interested in
learning. It's a small project, one which I could modify and study.

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/](http://bettermotherfuckingwebsite.com/)

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

~~~
folkhack
I mean this 100% in good faith:

You couldn't pay me enough money to post a "Controversial Opinions" section to
a site that also links to my current resume on the same page.

It's best to keep this stuff separate from your professional life.

~~~
deftturtle
I've moved it elsewhere, thanks! I didn't mean to upload that page yet, got
careless and hadn't refined it.

------
dbetteridge
On a 30mb fibre connection, I'm seeing 4 seconds TTFP (Caching disabled in
Edge)

I love react as much as the next person but for a static site that doesn't
present me a Map/Game/Shopping interface I would personally have clicked away
before 4 seconds.

------
Rudeg
It’s the copy of [https://linear.app](https://linear.app)

------
mosselman
Why react?

~~~
nullandvoid
Why not? It's the most popular UI framework. The second you start building a
SAAS product on top of those pages, you're not going to want to be in vanilla
land.

~~~
spyke112
Uhm, probably not the best idea to mix your saas application, with your
business website. I would definitely not recommend that.

And i will also echo the other comments, saying that this is definitely
overkill. If you're doing a single landing page, jsut go with static html/css.
If you need some content management, then either go with a fully fledged CMS
or do the hipster thing and compile into static site.

~~~
ttty
Most likely you'll share some parts... Having 2 systems (html and react) much
higher cost of maintenance than just 1 in react at a small overhead

------
schwartzworld
dev: makes something using popular technology they are comfortable with, gives
it away for free

hn: you did it wrong

Seriously, there are plenty of bootstrap templates that don't need react, quit
complaining, nerds

------
cpursley
These are great! It would be nice to see them available as gatsby.js (static
site generator using react) themes.

