Building React FAQ
Tags: react, imadethis
Published: 2017-05-24 20:51:06

---
title: Building React FAQ
published: true
description:  From a few links in a Readme file to fun little side project
tags: react, reactjs, imadethis
---

If you're like me it's hard to keep track of all the videos and posts you've read about React.  There's lots of information out there but, it's all over the place.

Someone would ask a question about React and I would think.
>  I remember seeing a post about that somewhere ðŸ¤” or was that on twitter?

What started as a few links in a Git repo has become a fully searchable static site [React FAQ](https://reactfaq.site) here's how it happened.


##It started with a question

Here's the question that started it all from @wesbos

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Moving my React string refs over to functions though I don&#39;t understand why this is better. Anyone? <a href="https://t.co/KoXJOvOniL">pic.twitter.com/KoXJOvOniL</a></p>&mdash; Wes Bos (@wesbos) <a href="https://twitter.com/wesbos/status/768094572144631808">August 23, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

In this case I remembered a resource and responded.
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/wesbos">@wesbos</a> <a href="https://twitter.com/_developit">@_developit</a> <a href="https://twitter.com/dan_abramov">@dan_abramov</a> posted this a while back <a href="https://t.co/8g449GgE2A">https://t.co/8g449GgE2A</a></p>&mdash; tim arney (@timarney) <a href="https://twitter.com/timarney/status/768097947334606848">August 23, 2016</a></blockquote>

I would often â™¥ï¸ these tweets as a way of *bookmarking* them for later reference.  This seemed like a good idea but combing through thousands of *"likes"* etc... isn't great.

I had to find a better way to track resources that would require little effort to maintain and be easy to track. 

> Maybe the old trusty Readme file with some links would do the trick ... maybe others would find it helpful as well.

##Let's Verify

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/timarney">@timarney</a> Oh please do! You have no idea how many emails and questions I get about this kind of stuff. Serious - would be super helpful</p>&mdash; Wes Bos (@wesbos) <a href="https://twitter.com/wesbos/status/768104881467035648">August 23, 2016</a></blockquote>


That was all the verification I needed.

So I started a [links repo](https://github.com/timarney/react-faq/commit/92503d37097ca85e737f77ea2ed0a9ed2ef2a0d6) to collect resources in a simple Readme.md file. **Three links total** at that point.

Overtime the list grew to the point where it became hard to manage. I broke the repo into pages.  That was a decent next step but still not ideal (hard to search).

## Making it Static

Listening to [JAMstack Radio](https://www.heavybit.com/library/podcasts/jamstack-radio) got me interested in static sites.  React FAQ seemed like a good place to play around with one of the static site generators.  I ended up picking [Gatsby](https://github.com/gatsbyjs/gatsby).  Given I had already broken the repo into pages porting things over to Gatsby was super easy.  The site is mostly written in Markdown.  Gatsby supports Markdown, HTML, and React.js out of the box.

## Hosting

For hosting [Netlify](https://www.netlify.com/pricing) was an easy choice it's free for open source.  Netlify auto deploys when I push to the repo so updates are painless (just as easy as updating the original Readme).

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Received an email from <a href="https://twitter.com/Netlify">@Netlify</a> ... &quot;Weird I didn&#39;t push any changes&quot;. Noticed later there was a PR to the repo and that was the preview ðŸ”—<br>ðŸ˜± <a href="https://t.co/uLUuNsiwHm">pic.twitter.com/uLUuNsiwHm</a></p>&mdash; tim arney (@timarney) <a href="https://twitter.com/timarney/status/847519263707533312">March 30, 2017</a></blockquote>

## Search

The final piece, and the biggest thing for me was making it searchable.  I started out trying to hook up a custom Algolia search.  I might circle back on this idea but given I have limited time to commit to the project this didn't work out.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Has anyone tried hooking up <a href="https://twitter.com/gatsbyjs">@gatsbyjs</a> to <a href="https://twitter.com/algolia">@algolia</a>?  <br><br>Might repurpose this <a href="https://t.co/oz6sCZ2KXB">https://t.co/oz6sCZ2KXB</a>  Markdown files.<a href="https://t.co/UKEGXvO1t1">https://t.co/UKEGXvO1t1</a> <a href="https://t.co/JfOXLJsH32">pic.twitter.com/JfOXLJsH32</a></p>&mdash; tim arney (@timarney) <a href="https://twitter.com/timarney/status/836576908720635904">February 28, 2017</a></blockquote>

All is well that ends well.  Turns out there's a great service for that called [DocSearch](https://community.algolia.com/docsearch) from Algolia.  The same search that powers the React Docs.  Just had to add a couple of script tags and done ðŸŽ‰.

![React FAQ](https://thepracticaldev.s3.amazonaws.com/i/yxxwybf3ygm1w0s6zv0t.png)


## Mission Accomplished 
No more hunting down resources all over the place.  From Readme.md to fun little side project [check it out](https://reactfaq.site) and let me know what you think.

Have something to add to the site?  Pick an [appropriate page](https://github.com/timarney/react-faq/tree/master/pages)  add the resource and submit a PR ... would love some more contributors.