8 ms·
Show HN: Open – Free React landing page template
- mosselman 6y agoWhy react?
- Etheryte 6y agoWhile maybe slightly curt, I do echo this statement. Nothing on the demo page displays anything you couldn't do with a static page. Using tools devs are familiar with can often be good, but here it's hard to see the benefit.
- nkozyra 6y agoI suspect the audience is people with a React site already but in that case I'd expect they already have a landing page. These corporate sites are really the ones that should just be old fashioned HTML + CSS if possible.
- nullandvoid 6y agoWhy 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.
- brabel 6y agoBecause you want your landing page to load instantly and React or any other JS-generated site just can't compete in loading speed with a static HTML page.
- frankzander 6y agoBecause you need a bit of CSS knowledge and to know how intersection observers have to be configured and then everything works with few lines of JS and CSS ... it's lightweight and SEO friendly and not bloated as if you use REACT.
- spyke112 6y agoUhm, 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 6y agoMost 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
- WolfOliver 6y agoIMO landing pages and SaaS applications should be different projekts/repos
- frankzander 6y agoBecause a startup without a react landingpage isn't really a startup and not as hipster as the other new companies in town ;)
- pacomerh 6y agoeh, not necessarily, you could claim using a popular framework has it's benefits. It's easier to transition it to a full app whenever the time comes. The author could've chosen something less hip?, sure, but again React is widely used and it has proven to be useful in many app scenarios.
- oscarteg 6y agoUsing 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 6y agoI'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.
- deleted 6y ago[deleted]
- IceDane 6y agoCitation needed. Google bot runs JavaScript these days. I'm sure proper SEO is possible in the worlds most popular UI framework.
- leerob 6y agoSingle-page apps (SPAs) using client-side rendering (CSR) like React do get indexed by Google, it's just not instant. Depending on how long it takes for the content to load, the Googlebot might not be able to figure out the correct on-page SEO. If SEO is a critical requirement, I'd recommend either server-side rendering (SSR) through a framework like Next.js or completely static sites through whatever framework you prefer (Next.js, Gatsby, 11ty, Hugo, Jekyll, etc, etc).
- duxup 6y agoI suspect folks using a free react landing page template aren't super concerned about SEO.
- onion2k 6y agoIf you want to use React, use something like Nextjs or Gatsby to compile it into a static HTML website. 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).
- arnaudsm 6y agoWhat's the advantage of using React for a landing page that could be a 10KB static HTML file ? (non-sarcastic question)
- protonimitate 6y agoI'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?
- arnaudsm 6y agoThanks for the answer, those are valid points! I think most web developers forget that most visitors don't have fiber connections and high-end hardware like them. This page renders at 15 fps on my mom's laptop with an old Core I3. I kept my old ThinkPad just to test my websites.
- icholy 6y ago> I'm seeing 714kb of data loaded over 924ms. That's really bad!
- protonimitate 6y agoHow 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 ;)
- ahmedfromtunis 6y agoThank 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!
- jwdunne 6y agoThis 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.
- adamqureshi 6y agoDamn good stuff here. Can you build me a landing page to test a new business? :-)
- jwdunne 6y agoLet’s talk, james@happyshrimp.co.uk :)
- ttty 6y agoI can develop faster in react than static html... Once you need a/b testing you're screwed with the static HTML. You got to start adding more logic in your spaghetti Js and then you can't even reuse html. Boom, looks like a mess now
- jwdunne 6y agoThere are a number of assumptions here: 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.
- deedubaya 6y agoWhen you’re swinging a hammer, everything looks like a nail
- paulintrognon 6y agoThe 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!
- cpursley 6y agoThese are great! It would be nice to see them available as gatsby.js (static site generator using react) themes.
- Rudeg 6y agoIt’s the copy of https://linear.app https://linear.app
- dbetteridge 6y agoOn 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.
- deftturtle 6y agoAs 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 6y agoI 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 6y agoI've moved it elsewhere, thanks! I didn't mean to upload that page yet, got careless and hadn't refined it.
- schwartzworld 6y agodev: 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