Because of pandemic, I have much spare time at home so I could complete a long time waiting task — building my portfolio website. During the development of my website, I was exploring how to complete it with ReactJs as I have some basic knowledge of React and JavsScript. Due to being a Web Designer, I have to show my works with a gallery which could pop up some details and image for a project, and I even need the modal could swap between each projects. This was a challenge for me how to finish a function in React and I will explain the process below.
Determination could push you up and finish something you thought difficult to achieve
Actually, I found some React website samples for reference and there was one which linked a JSON data file for fetching data conveniently that it was a good start for me. However, the gallery of it only pop up when a link is clicked, and I want to trigger a modal when a project image is clicked and show brief for a project. Therefore, I did research in Stackoverflow and Google for cases which included a modal function in React as similar as what I want. During the process of try and error, my determination has been challenged but I am glad that I won in the end. Besides, I am quite used to the process of searching solution and testing consecutively in my web work career life.
It is an amazing moment when I found that I could communicate with React
After I finished the function of popping up a modal by clicking a project image, I have understood the basic working pattern of React like how the arguments flow to the executive function in the end. At that time, I am amazed that I could communicate with ReactJs though I had read and followed many React tutorials before, but a real React puzzle could help you learn React thoroughly indeed.
However, I did not satisfy for an individual popup for each project, as a swapping function between each projects could be more user friendly and save time for user from closing popup and clicking a pop up again. In fact, the success of solving the popup function has enhanced my confidence and I am more interested in solving another puzzle. The difficulty is higher at that moment, as the project modal has to fetch each project image and detail dynamically with a JSON file while a user is swapping through the projects. During achieving a solution for the problem, I had been frustrated with failures that I wanted to use modal framework instead. Then one day, I had an idea to combine the code from a pop up function and a modal which could swap the index of array for experiment, as I was successful by following up the two kind of samples. After a half day effort, I completed the modal which could swap between data from an array in a JSON file. Throughout this part of try and error, I found that Chrome’s Developer React tool has helped me to realize the data has been fetched successfully and the recent status of the popup whether it is opened or closed.
All in all, the journey of completion of the two functions of a modal in React was a precious experience for me to learn React profoundly. I feel like I was playing a puzzle game and I have been into it. I would suggest other beginners who have basic JavaScript and ReactJs knowledge to give it a shot for solving a real problem for your project and you will find it is really worthy. Besides, I also learnt that determination has also played a major role for my success in coding and I am grateful for the contributors on web who shared their knowledge and samples as well. Therefore, I also want to share my experience on Medium as I keep checking it everyday. Lastly, I would like to thanks the bless of God. Peace.
P.S. I would like to thanks Dave Ceddia, Tim Baker, and Technophyle for advice and inspiration for me.
