I mentioned in a previous post that I am in the process of creating a prototype web application using React. Unfortunately I am also learning how to debug my React code. I created a base version of the application using the tutorial I mentioned in my previous post. Once I got all of that working, I started expanding.
React takes the code you write and compiles the code so that it runs quickly. This compile step is where I find a lot of errors. I have a console window open that spits out a bunch of important information each time I save a file using my interactive development environment (IDE). Sometimes I will get errors and other times I get warnings. While the code is supposed to run with warnings, it generally means something is wrong and is best to fix it. Otherwise your application may not behave exactly as you thought it should.
The worst problems I have encountered are runtime errors. That means my code compiles just fine but the application doesn't look right or doesn't render at all. The first such problem that took me a while to solve involved the HTML break tag. I had a picture and wanted to have a caption underneath it. To make everything look clean, I laid out everything in a table. To get the layout perfect, I used a test HTML page and then just transferred everything to React when I was happy. I didn't know that React treats the break tag a little different and required a slash in the tag. Instead of using <br>, I had to use <br />. That looks pretty simple, right? Well it broke the whole application. Instead of seeing a funny-looking table, I didn't see anything. In order to find the offending tag, I had to copy each part of the HTML table into React and discover when things stopped working.
Today I ran into another problem. I have a button component that looks very integrated with the entire site. It is something I copied from the tutorial mentioned earlier. The guy giving the tutorial didn't bother to do anything special with the button other than to have it jump to a single page. I have put a number of those buttons all over the place but no matter which button you click on, it goes to the same page. Today I wanted to connect one of the buttons to a different page. I looked through the code and figured out a way to make it happen. Unfortunately when I added the code, it broke everything. Not a single page would load. It turns out that by adding the destination page as a parameter to the button, I broke every instance of that button. Seeing as I had a button on the heading of every page and on the footer, that should have been a sign to add the destination page as a parameter to all of the buttons in the application. Once I did that, everything started working again.
The Internet has been very helpful in solving a number of problems. I tried to embed a YouTube video into my application only to get an error from my browser saying that it can't show the video as a security precaution. A quick search showed that I needed to add a library to React and then things started working great.
I'm sure there will be many more problems I run across, but so far I have been able to solve them in a timely fashion. If I feel I am spending too much time on an issue, I put it on hold and work on something else. Sometimes I will go for a walk and the solution will come to me. Ultimately there are a number of tricks to debugging computer programs and it doesn't matter if you are coding in Python or React. I suppose the most important trick is to not get frustrated. I'm still working on that one.
