Wow. You just started this blog and you already ruined it with that awful pun of yours! Truly a feat on its own.
That was sarcasm by the way. However, what isn’t sarcasm is the level of difficulty I had learning this new programming language: React.
Climbing up the mountain that was this new language was in fact steep but it took to my a very interesting place actually, it took me right back to another mountain that I thought I was already familiar with JavaScript a.k.a JS.
Considering that React was built with JS this should’ve been a no-brainer but, I was surprised on how learning this language tested my understanding of previously code. More specifically it forced to understand that there were different ways of utilizing JS.
With all of these “props, components, states, effects and hooks” it definitely made me learn of the “different” ways to use elements I was familiar with. But with other material such as “importing, exporting, routes and information flow” this was all new territory.
Having said all that I have completed a difficult project today: I coded a Character Creator website where you can name a character, assign a class, change their stats, and add information about the character.
When making this page I started with building the skeleton. I initially created the headers the input boxes, the dropdown and the toggleable stats with simple HTML. (<h1>, <h2>,<h3>, <input>, <table>, <button>). I made the dynamic elements such as the remaining skill points and the base stats with variables which I displayed with string interpolation.
After building the skeleton of the site I moved on to using useState to make my stats go up when clicked on the buttons, and my skill points go down.
This was a very simple process. However there was one teeny tiny issue. Whenever I clicked the plus or the minus… It made all of my stats go up and down. Every. Single. One. This would not do. So after a brief intermission where I talked with my cohort lead I was able to make all of the stats go up independently… And after talking to my cohort lead again I was able to do this without having literal hundreds of lines of code O+O;.
The next step I took was having the states of all of my toggleable elements (the name input, the class selection, the stats, and the flavor text) tracked. With the use of onChange, and useState I was successfully able to track and keep the changes that were done to the page.
Following this was constructing the routes for the different pages that the user could toggle between. Which was done with Route, Router, Switch (which had to be installed).
After this I did some cleaning up of my code and I moved my useStates in order to easily submit all of the information with a fetch POST request to my json server when the user clicked on the “Submit button”
Finally the most difficult part (Which I may or may not still be working on) is displaying the posted information to the server which is done with a fetch request. But… there may or may not hypothetically be difficulty with displaying the actual content on the website as of this exact moment…
It’s all a part of the journey I guess.
Anyways.
Thank you for listening.
Please be happier.
This has been Aeco, logging off.