Building a Trivia App with React

I sometimes use a Trivia app at the end of my talks as a replacement for the traditional summary slide, and we have also been using Trivia games as a fun activity at different Salesforce Developer events.

In this article, I share a React version of the Trivia application. The app is written with React and ES6 (ES2015), and is built with Babel and Webpack.

Check out a hosted version here: https://ccoenraets.github.io/react-trivia/


Make it Your Own

The questions in the example above are just placeholders. It’s easy to create your own questions:

  1. Click here to download the app
  2. Modify data.js with your own questions
    The questions are loaded this way so you can easily load index.html from the local file system (using the file:// protocol) without runnning into XHR cross origin issues. See the commented out componentDidMount in app.js for an alternative XHR implementation.
  3. Open index.html. You can just double-click index.html on your local file system: no need for a web server.

Source Code and Build Instructions

The source code is available in this repository. If you want modify the app and create you own build:

  1. Clone the repo
  2. git clone https://github.com/ccoenraets/react-trivia
    
  3. Install the dependencies
     
    npm install
    
  4. Modify the app in the /js folder
  5. Build the app
    npm run webpack	
    

Credits

Initially inspired by Ember Jeopardy.

55 Responses to Building a Trivia App with React

  1. Brindha August 23, 2016 at 8:58 am #

    I’m especially very proud of this because it went from idea production in a less than one day. This coming from a predominantly developer of back-end. Now i have use Trivia app very awesome and better performance. I love how react can be used by people such as myself, that don’t have superior JS skills, to pump out content marketing like this in no time.

  2. anitha March 3, 2017 at 1:59 am #

    Iam new to this field & have been reading as many articles a possible to enhance my knowledge in the past few months. Of all, I find your blog posts to be the most useful (along with a couple more) & I have learnt a lot this way. Thank you so much for spending so much time in researching & writing such wonderful articles

  3. kettyroy November 14, 2017 at 6:25 am #

    Wow! How could you imagine it? It’s incredible!

  4. kevin Luther January 22, 2018 at 4:32 am #

    Just discovered your blog, and I’m in LOVE with it! Amazing layout an content. Love your style, you rock!! Thanks a million and please carry on the rewarding work. I think this is engaging and eye-opening material. Thank you so much for caring about your content and your readers.

    Visit : fast custom essay writers

  5. kevin Luther January 26, 2018 at 11:01 pm #

    Your blog inspires me every time when I read it. I love reading blogs. I don’t excite always by reading blog posts. But in your blog I find something that implies in blogging. Anyway, you’re unquestionably a great blogger and you have a skill to make your reader to keep reading your blog again and again. Keep up the magnificent work. Continue moving the people!

    Visit : fast custom essay writers

  6. Ayo Adekola March 12, 2018 at 12:45 pm #

    nice 1 .

  7. CIIT Noida April 19, 2018 at 3:18 am #

    Thanks for sharing this amazing post with us.

    Hadoop Training Institute in Noida

    Best Hadoop Training in Noida

  8. Dinesh Kumar June 11, 2018 at 7:21 am #

    This article has covered so many
    topics that are helpful for mobile app development, visit mobile app
    development
    for more new
    ideas, we are thankful for this article.

  9. Dinesh Kumar June 11, 2018 at 7:52 am #

    This is really very helpful and very useful information described.visit,
    Mobile app and Website Development company in India for more new ideas. We are really thankful for this article.

  10. Garry August 13, 2018 at 7:17 am #

    The brand is situated in San Leandro, north face
    deal, close to its corporate kin, Jan – Sport. https://phdify.com/
    On the off chance that you consider winds in the latrine a decent intends to terrify your companions at Halloween, there are latrine covers with a snake theme only for that reason.

  11. DMG DMG September 21, 2018 at 7:43 pm #

    Thank you again for giving me the chance to contribute to the blog that actually got me started on WordPress all those years ago! It has been a surreal and fun ride.

    http://www.fidelity.com.ng
    Latest News, Gist, And Entertainment | Fidelity Website.

    http://lagosmp3.com.ng
    Mp3, Mp4, Video, Music Download, Lagos Mp3, Slimcase, Kiss Daniel, Olamide Badoo, Wizkid & Davido

    I love the content!

  12. Oladejo Joshua Jay December 3, 2018 at 12:10 pm #

    Will try it some day

    Hot Entertainment and News Here

    Latest Music Download Here

    Latest Video Download Here

  13. chandu chinnu January 22, 2019 at 5:08 am #

    Great Info About Gadgets, Thanks For Sharing
    Gadgets of the Future
    New Gadets In India
    Gadets In Amazon

  14. TargbaBenjamin February 7, 2019 at 2:52 pm #

    Keep on the good work sir. http://www.legacytips.com

  15. Desirebaze Media February 15, 2019 at 11:48 pm #

    Nice
    DOWNLOAD MP3
    Musics
    Mixtapes
    News
    Videos
    Article
    Sports
    Lifestyles
    Albums
    Mp3 Download

  16. james February 22, 2019 at 12:32 pm #

    Navient also built same way and its way better than many other apps in student loan servicing. https://navient.me/

  17. Ayomide Oluwaferanmi March 14, 2019 at 10:26 am #

    https://www.loadedsoft.com

  18. rachelz April 2, 2019 at 8:00 am #

    app building is fashion to me check my mod app of Gbwhatsapp

  19. Selenay Dilara April 3, 2019 at 10:05 am #

    Spor salonu olarak White Club spor merkezimiz çeşitli kurslar ile İzmir’li spor severleri eğitimler vererek kişisel gelişimlerine yardımcı olmaktadır. Reveşta olan ve fazla tercih edilen kurslarımız kickboks kursu | pilates kursu | cimnastik kursu | piyano kursu vb. çeşitli kurslarımıza adreslerimizden ulaşabilirsiniz.

  20. Serpil ÇİÇEKÇİ June 20, 2019 at 8:46 am #

    Marmaris tekne turu olarak hizmetlerimiz, marmaris efes turu | Dalyan tekne turu | kleopatra plajı | marmaris pamukkale turu gibi ve daha fazla avantajlardan yararlanmak için bizimle iletişime geçin.

  21. Cakiroglu Nakliyat June 22, 2019 at 2:50 am #

    Çakıroğlu Nakliyat, Asansörlü nakliyat | Ofis taşımacılığı | Piyano taşımacılığı | Buca evden eve nakliyat | Karşıyaka evden eve nakliyat | İzmir eşya depolama vb. hizmetleri en kaliteli ve profesyonel şekilde müşterilerine sunmaktadır.

  22. Thinkkers January 24, 2020 at 12:36 pm #

    great. Just wondered if you could get choices mod apk with unlimited keys and diamonds.

  23. gtacheat code February 20, 2020 at 2:16 am #

    It is an amazing article and proves knowledgeable information and I am read this blog and I really like this blog thank you to shares with us. If you have interest in games then visit this amazing website for cheats and commands – gtacheatcode and click here for GTA cheats ps4.

  24. ab March 8, 2020 at 8:05 pm #

    Petroyasan CO Is A 30 Year Old Company Of Top Iranian Used Oil Recycling Plant Manufacturers , Oil Distillation Plant , Grease , Solvement 402 , Sulfurization ,Waste Engine Oil Distillation Plant Manufacturers And Other

  25. sunil singh March 31, 2020 at 5:57 am #

    nice blog on trivia app on react i m also app developer know how to develop app in react

  26. charles david May 6, 2020 at 8:22 am #

    Get the latest version of the choices stories mod apk 2020 with full of unlocked features and premium access lifetime.

  27. alisa anderson June 5, 2020 at 2:14 pm #

    Thanks for sharing this amazing post on trivia app i like to share this on my Instagram and want to get more like for you. https://likesfinder.com/instagram

  28. Apk Modo July 21, 2020 at 4:19 pm #

    Get the latest version of the choices stories mod apk 2020 with full of unlocked features and premium access lifetime.

  29. yuvaraj singh July 29, 2020 at 5:15 am #

    Thanks for sharing
    Leanpitch provides online training in DevOps during this lockdown period everyone can use it wisely.
    DevOps Online Training

  30. freelicense key August 10, 2020 at 11:16 am #

    I really like you article, thanks for sharing that type of knowledge.
    malwarebytes premium lifetime

  31. God Yato August 24, 2020 at 5:08 am #

    Wow, I can build trivia app now because of your post. such as wonderful guide. Can we make wordpress themes
    with it??

  32. God Yato August 24, 2020 at 5:10 am #

    So, have u used gb whatsapp, download from here, visit GB Whatsapp

  33. dj jaysix August 26, 2020 at 12:17 pm #

    i still need to learn more after reading this post
    FOR LATEST NIGERIAN SONGS, DJ MIX, AND UPDATE CLICK LINK https://onebeat.com.ng/

  34. yuvaraj singh September 4, 2020 at 1:40 am #

    Thanks for sharing this informative content , Great work
    To crack scrum master interview : Scrum Master Interview Questions

  35. yuvaraj singh September 7, 2020 at 6:50 am #

    Very helpful
    Leanpitch provides online training in Scrum Master during this lockdown period everyone can use it wisely.
    CSM online

  36. yuvaraj singh September 9, 2020 at 3:18 am #

    Thanks for posting this article
    Leanpitch provides online training in Advanced Scrum Master during this lockdown period everyone can use it wisely.
    Advanced Scrum Master Training Online

  37. Mahraja Express October 8, 2020 at 3:42 am #

    Thanks for sharing this informative content , Great work
    Regards
    Monthly Rashifal Hindi

  38. Mahraja Express October 12, 2020 at 7:15 am #

    I have get here very informative information. Thanks for share with us. Thanks so much. Luxury Train Tours

  39. Gourav Bajaj October 28, 2020 at 3:51 am #

    wow superb post! Awesome ideas which you have shared. Thanks for sharing. Currently I am working on trivia mobile application for my client, so this post helps me alot.
    Thanks and Regards
    Gourav Bajaj

  40. freelicense key October 29, 2020 at 1:19 pm #

    Assume one week from now your instructor is going to you an online talk which epitomizes all themes important to breeze through tests one month from now. As the talk is significant, you intend to record it with Movavi Screen Recorder in full HD to catch every single detail with incredible sound. In any case, subsequent to having it recorded, movavi activation key mac you discover that there were some long breaks, interferences and stops, as’ will undoubtedly occur in online classes. You can alter the recorded video with Movavi Video Editor Plus and alter out every single superfluous part.

  41. yuvaraj singh November 23, 2020 at 3:07 am #

    Read this blog to get great content
    To crack scrum master interview : Scrum Master Interview Questions

  42. Lily 22 December 2, 2020 at 8:18 am #

    Hello, all..
    my name is Lily I work at live draw sdy if my friends want to learn about guessing numbers, please contact me

  43. yuvaraj singh December 22, 2020 at 2:31 am #

    Informative content , Great work
    Leanpitch provides online training in Enterprise agile coaching during this lockdown period everyone can use it wisely.
    Enterprise Agile Coaching

  44. yuvaraj singh January 8, 2021 at 2:04 am #

    Thanks for sharing this.,Great work
    Leanpitch provides online training in Scrum Master during this lockdown period everyone can use it wisely.
    Join Leanpitch 2 Days CSM Certification Workshop in different cities.

    CSM certification online

    CSM online

    CSM online certification

    Scrum master certification online

    CSM online training

  45. Variable Sets January 12, 2021 at 1:36 am #

    Hi, Thanks for sharing an informative post! The points you tell about the trivia app is great. I appreciate your work and experience. I will recommend this interior to others, more people get opportunities. Thank you!

  46. Ravikumar February 2, 2021 at 7:44 am #

    Thank you for sharing this content, Good work.

    To crack Scrum master interview: Scrum master interview questions

  47. Saket Kumar February 12, 2021 at 6:16 am #

    Thanks for sharing this post. Nice post

  48. john nickson March 20, 2021 at 3:18 am #

    Nice blog, I really appreciate the hard efforts you would have taken while creating this informational blog
    We are the best hotel management institute in Allahabad providing 100 % placement in big brands hotels.
    Click on the links below to reach us:
    Best Hotel Management college in Allahabad
    Hotel Management institute in Allahabad
    Diploma in Hotel management in Prayagraj
    best college for hotel management
    Hotel Management college in Prayagraj
    Best Hotel Management college in Allahabad
    Best Hotel Management college in Allahabad
    Best Hotel Management college
    Hotel management college in Prayagraj
    Top hotel management institute in Prayagraj

Trackbacks/Pingbacks

  1. Employee Directory: Sample Application with React Native and Node.js | Christophe Coenraets - January 9, 2017

    […] Trivia application built with React (hosted live here) […]

css.php