Building a Trivia App With React
Check out this Jeopardy-like trivia app built using React, ES6, Babel, and Webpack.
Join the DZone community and get the full member experience.
Join For Freei 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 was written with react and es6 (es2015), and was 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 running 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 to modify the app and create your own build:
1 - clone the repo
git clone https://github.com/ccoenraets/react-trivia
2 - install dependencies
npm install
3 - modify the app in the /js folder
4 - build the app
npm run webpack
credits
initially inspired by ember jeopardy .
Published at DZone with permission of Christophe Coenraets. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments