Recently, I’ve found a new toy. Codewars is an excellent place to practice my coding skills and learn ‘problem thinking’.
My Codewars badge
There are a couple of benefits to this platform that help me develop my coding skills in different ways compared to my own projects. Firstly, the problems usually revolve around the creation of lower level algorithms to manipulate data directly. Secondly, the solutions are validated using simple unit tests. You are encouraged to add to and alter the tests as you want to which helps debugging and expands my knowledge of TDD
To make a start at learning react, I decided to make a simple website detailing the construction of a stopwatch style App. The website itself can be found at https://first-react.markfoyster.co.uk/. Below is a screenshot of the website, nothing fancy. Just a place to describe the code.
Below is a screenshot of the timer itself. As a React component, as many instances of it as necessary can be included yet they will run independently of each other:
I have found that the component centric nature of React suits an object oriented approach to programming well. Further more and arguably more importantly, React makes it easy to recycle code. When used correctly, components can be made that are extremely abstract from other code within the project. Extremely portable component libraries can be made up using this technology, code that can be used again and again.
With abstract components, as well as being easy to import into projects, alterations / amendments can be made at component level without fear of breaking code elsewhere in the project.
The development environment
For a local development environment, I installed create-react-app installed with npm for a quick and easy “ready to go” setup. The structure is fairly easy to follow and I was able not only to build the timer but a whole website around it that discusses the code and implementation. I used the npm run build command to build a “ready to deploy” static site I could simply upload to my server, it was that easy!
The Code
Below is a link to the repo on GitHub. Note, as described above, the repo contains the code for the entire site, not just the timer component!
Seems a shame to just make a timer. If you look at the code, you will see I made the code boxes a component. In fact, the timer was a class based component whilst the code box was function based. Having tried both, I admit, I prefer the “sweet, syntactic sugar” of the classed based solution. However, the future lies with functional components, they are more efficient and with hooks, their deficits can be dealt with!
What’s next?
I think that being so new to React, there is still much room to improve my existing code. There’s not a whole lot more to do with the timer. The website surround it however needs work. Additionally, I will look at adding some more components. It seems a shame to use the website to only demonstrate one. Perhaps I could choose some components from my “component library” project and convert them into React components?
This is only the beginning with React. As I get more familiar with it, I should move on to using it to implement some ‘full stack’ solutions. Interacting with a database, etc. As things get a little more sophisticated, maybe different websites will be made 🤔.
This a website I am working on for my stepmother. Very much still work in progress but I’ve learnt along the way and hope to continue improving it. You can visit it at https://pastimperfect.co.uk/.
The tech stack includes:
HTML & CSS
JavaScript
PHP & MySQL
Components from my own Component Library
The source is not available on GitHub for security reasons but if there is a particular part feature you are interested in, feel free to let me know and I’ll help if I can.
I decided it was time to go back and extract some code from previous projects. I wanted to take various features, widgets etc that could be re-used in future projects and put them into my own component library. Another attraction to this idea is that I felt in a small way it would be a better representation of how things would be done in a commercial setting.
To that end, I started my GitHub repository and began work. A link to the repo on GitHub is below:
There are a number of different examples. Some just use HTML and CSS 3 while others incorporate JavaScript and occasionally PHP. Examples and details of implementation can be found on the website at https://first-react.markfoyster.co.uk/.
The Future
As time goes on, I may add to this project. However, as you will see in a more recent project, I am quite motivated to use React for future components. Maybe I will incorporate some of those into this library?
