Learning to code in React by building a simple Chuck-o-mat. Latest deployed version:
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Add footer Apr 17, 2018
src Fix fetch error May 23, 2018
.gitignore Add basic Chuck Norris joke fetching function Apr 12, 2018
README.md Update (still) to dos Apr 16, 2018
credit-notes.txt initial commit Apr 8, 2018
package-lock.json update project Apr 8, 2018
package.json

README.md

Chuck-o-mat

After learning & doing a few tutorials/courses on React for a few days, I wanted to build a fun web app, to not only work with components, but also to see, how to fetch data from a third-party database via API, how to display it and how to add different details with React.

The plan

Originally, I wanted to use another database, but I switched mid way through, because I didn't liked the content the initial chosen database provided. With that, I needed to adapt the functionality a bit.

user stories

The user:

  • sees a simple interface on load
  • can hit a button to get random Chuck Norris facts
  • can tweet a chosen Chuck Norris fact
  • can set a few different settings to tweak the results

The work process

  1. set up react-app using create-react-app
  2. deploy with simple "nothing to see"-interface
    Dancin' Chuck Norris
  3. set up interface with dummy components
  4. fetch data and display it in the Fact component
  5. sketch out component tree
  6. start from scratch
    1. render simple UI with Chuck Norris portrait & "hit me" button
    2. implement "hit me"-function & render hard coded Fact component
    3. add Tweet function via Tweet Web Intent
    4. fetch data from database & display within Fact component
    5. fetch multiple random facts & display Facts with .map()
    6. add counter, so user can set the number of fetched facts
    7. add settings, where the user can change the name used in the fact, limit the results to "nerdy only" facts
    8. add buttons at the bottom to fetch more random facts and to clear the ui
    9. style everything with external stylesheet (plain CSS)

What I learned in the process

  • in general getting comfortable with using React & JSX
  • how to split the user interface into different React components, as well as refactoring code into separate components
  • how to fetch data using the Fetch-API
  • how to conditionally display components

What I still want to do

  • make settings form responsive
  • refactor code, maybe the settings form in a separate component
  • implement Typechecking with PropTypes
  • smooth out the transition of the settings menu when opened/closed → CSSTransition/TransitionGroup
  • currently the Tweet function is not accessible by keyboard only navigation, it's something, I want to implement as well

[13. April 2018]


This project was bootstrapped with Create React App.

You can find the most recent version of the guide here.

Sources/ Credits