Building React FAQ

tim arney — Wed, 24 May 2017 20:51:06 +0000

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 here's how it happened.

It started with a question

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

Moving my React string refs over to functions though I don't understand why this is better. Anyone? pic.twitter.com/KoXJOvOniL
— Wes Bos (@wesbos ) August 23, 2016

In this case I remembered a resource and responded.

@wesbos @_developit @dan_abramov posted this a while back https://t.co/8g449GgE2A
— tim arney (@timarney ) August 23, 2016

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

@timarney Oh please do! You have no idea how many emails and questions I get about this kind of stuff. Serious - would be super helpful
— Wes Bos (@wesbos ) August 23, 2016

That was all the verification I needed.

So I started a links repo 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 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. 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 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).

Received an email from @Netlify ... "Weird I didn't push any changes". Noticed later there was a PR to the repo and that was the preview ðŸ”—
ðŸ˜± pic.twitter.com/uLUuNsiwHm
— tim arney (@timarney ) March 30, 2017

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.

Has anyone tried hooking up @gatsbyjs to @algolia?

Might repurpose this https://t.co/oz6sCZ2KXB Markdown files.https://t.co/UKEGXvO1t1 pic.twitter.com/JfOXLJsH32
— tim arney (@timarney ) February 28, 2017

All is well that ends well. Turns out there's a great service for that called DocSearch from Algolia. The same search that powers the React Docs. Just had to add a couple of script tags and done ðŸŽ‰.

Mission Accomplished

No more hunting down resources all over the place. From Readme.md to fun little side project check it out and let me know what you think.

Have something to add to the site? Pick an appropriate page add the resource and submit a PR ... would love some more contributors.