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!
firstReactProject (this link opens in a new window) by mxfoyster (this link opens in a new window)
My first play with React.js, nothing too exciting but having fun 🙂
What else?
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 🤔.