As veterans of React, we all once struggled to pick up the basics. New developers looking to learn this framework usually need to wade through dense Youtube tutorials, sites, or the official documentation. Our goal is to condense that information into a simple, easy tutorial to learn the basics of React, acting as an entry point for future React learning. We wanted to leverage gamification techniques to maximize the engagement and knowledge retention within our tutorial.

What it does

Reacting to 2020 teaches modern React through a series of games to improve the overall retention rate for people trying to learn React. The user can play through the sequence of tutorials to learn React hooks, components, JSX, props, and higher-order functions. Each module is accompanied by a different visual to signify a developer's progress through the tutorial.

How we built it

We used React and Typescript to build the structure of the tutorial. Sass was used to create the visualizations and animations of all the events.

Challenges we ran into

  • Each tutorial question accepts different code samples and syntax so we had to build a custom checking system that would catch all potential submissions.
  • Typescript and Sass was completely new to most of us.

Accomplishments that we're proud of

  • Completed a comprehensive tutorial on the basics of React
  • Designed and animated awesome visuals and animations of 2020 events to accompany each tutorial
  • Created a tutorial with user-centric affordances such as a pass/fail indicator and console output reflecting the state of the compiled code in real-time.

What we learned

  • Typescript
  • Gitflow
  • Sass
  • React

What's next for reacting-to-2020

  • Extended tutorial topics: More on React Hooks, GraphQL using React, How to use React to interact with the back-end, Using React with Redux
  • Acknowledgement page to recognize the 2020 events that were featured on the project, highlighting ways you can donate or contribute to causes tackling these major issues

Built With

Share this project: