ReactJS: Tech Demo — Learn Typing
In order to learn ReactJS, I decided to create a small useful tool to learn to type. I just recently had found the typing exercises I did when I was 10, so using that data as a basis I created a small react site.
Demo: http://typing.nealbuerger.com
SourceCode: https://github.com/borgfriend/Learn-Typing
Core Prototype
The prototype only took a look at how to create a single lesson. The lesson was hardcoded and simply took a look at how the lifecycle methods of ReactJs work.
Issue Keyevent Binding
I discovered pretty soon that my typing lesson was a quite unusual case for the key event binding for React. I was creating a new type of input field that displayed the old text and change the display depending on the input of new text.
Solution:
For my unique case, I added an additional event listener to the document using and passed the information into the react app.
Issue Design
Since the goal was to look at various technologies I analyzed ant.design, semantic-ui, and material-ui.
Solution
Each of the GUI-Frameworks has their pros and cons. It was a difficult choice, in the end, I created the app using material-ui simply because I liked how it looked. Diving deeper into it how it deals with styles (while incredibly flexible) I would need to get a little more familiar with it. For the next project, I will probably try out something else.
Functional Prototype
To make the app a little more useful, I converted all lessons into a single JSON file. I considered to create a server with a database, but as I only had around 20 lessons and the resulting JSON file was 67kb I decided to simply include the entire JSON file.
With more lessons, I needed a lesson overview page and routing. I added react-router and used it with the tools it initially provided. Using react-router can be a little awkward at first. But as soon as you get the hang of it it is a powerful tool.
Improved Functional Prototype
Problem Slow Display of Characters
For short lessons react worked great. However, if the lesson had more than ~500 characters the react became extremely sluggish, with even longer texts it took ages only to type a single character. React was rerendering all components on every keypress.
Solution
Basically, the problem was caused by inefficient state management and updating techniques. I added in mobx to deal with all the states and rewrote the core prototype to take advantage of the mobx observers. An additional benefit was to use mobx-react-router which can create a routingStore and lets you avoid the withRouter() stuff.
Current Version
For the last iteration of the project, I refactored the entire code to be more readable and maintainable in the future. For now, I stopped working on this project. It should be only a quick tech demo to show how React code should look like.
Image: Green Typewriter Designed by Freepik