loading...

Building React FAQ

timarney_80 profile image tim arney ・4 min read

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

In this case I remembered a resource and responded.

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

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).

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.

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 🎉.

React FAQ

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.

Discussion

pic
Editor guide
Collapse
pixelastic profile image
Tim Carry

Double thanks, Tim.

First, thanks for putting this list together. React ecosystem evolves quickly. I worked with it about one year ago and am now starting a new project with it again. So many things changed that having a unique place to find curated content is highly valuable.

And secondly, thanks for the DocSearch shoutout. We try to make it as easy to setup as possible. We do crawl the content every day, to update results. In the future, we'd like to create better integration with Netlify so your search content will be updated when your website is deployed. If you'd like to work on a Gatsby/Algolia integration, feel free to reach out as well :)

Collapse
joeybuczek profile image
Joey Buczek

This is a fantastic resource! Thanks for creating and sharing!

Collapse
erinlmoore profile image
Erin Moore

Thanks for this!

Collapse
timarney_80 profile image
tim arney Author

Sure thing hope it's helpful.