loading...

First Time Working With JSX

yuanleemidori profile image Yuan-Hsi Lee ・2 min read

For the release of this month in this open-source course, we're asked to do 2 pull requests. An internal one, and an external one. The external one can be in any open-source project on GitHub and the internal one is to work with the project that I mentioned in the previous blog post, Telescope. Today, I'm going to talk about the internal PR that I sent.

The issue I worked on is a UI change of the post title. Due to the no word wrap setting, if the title is too long, it'll only be shown a part of it with ellipsis.
Alt Text

If we wanted to view the whole title, we had to go to the original blog post. We were not able to view the whole title on telescope.

My initial thought was, create a function that toggle between true and false, and, by returning true or false value, the title content can be expanded and collapsed.

However, this project uses React JSX which I've never worked with. I've done some basic React application on the last semester, and that's everything. I tried different approaches, but they didn't work well because of different reasons such as using wrong ways to pass props or the syntax just didn't work like what I expected. I even tried the React Accordion to reduce some work on css, but it seemed to bring me more puzzles to resolve...

Eventually, I simply used inline conditional operator to switch the word wrap setting between nowrap (collapsed) and normal (expanded). And it worked perfectly!

After sending the PR, I, then realized that I didn't finish all the environment set-up. There is a document lists all the setting that we need to modify the code and send the PR. I, again, recalled what the professor said, "Programming is 90% of reading, 1% writing, 9% debugging". Reading documents and code is critical and is usually underestimated the importance.

Following several change requests and reviews, my PR finally got approved and was able to merge. I'm always grateful for being reviewed by experienced developers because they not only bring me new skills or knowledge but also give me some of their experience, such as naming convention, good coding practice. These can't be learned from tutorial videos on YouTube or textbooks, they are accumulated over time and hardworking.

Discussion

pic
Editor guide