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:
- Click here to download the app
- 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. - 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:
- Clone the repo
- Install the dependencies
npm install
- Modify the app in the /js folder
- Build the app
npm run webpack
git clone https://github.com/ccoenraets/react-trivia
Credits
Initially inspired by Ember Jeopardy.
Pingback: Employee Directory: Sample Application with React Native and Node.js | Christophe Coenraets()