Penny Drago

Background

React was the next module after JavaScript that I completed for the Front-End Web Development course with Academy Xi. I found that learning React, which is a JavaScript library, extended my knowledge of JavaScript and opened up a different way of creating single-page applications. The topics included components, props, state, events, side effects, data fetching and client-side routing. I was able to apply these skills to create a React single-page application.

Learning journey

I found learning React difficult for quite a while, and I was adjusting to having less control as React does things behind the scenes compared to vanilla JavaScript. With time and especially through completing the project, I realized that React has advantages such as the use of components for reusable code. During the learning process, I understood some concepts quite quickly, but I needed several reviews of content to understand other concepts including props and the useState hook. I found that completing the summary assignments helped to consolidate my understanding of a topic. My learning process could have been improved by practising more, re-reading over content and watching video tutorials, and being compassionate with myself.

Some of my thoughts from the learning journey:

• Keep going, even when it seems like concepts are beyond reach. Practice and more practice will help those concepts to settle in.
• Look for other learning methods, including watching tutorials and reading books, to supplement learning.
• Complete small projects to practise the skills and then extend on those skills when comfortable.

Project

To create a React single-page application, I used a slightly different process to the process for my JavaScript project. Because I would be setting up my own data file (rather than using an external API), I started the project by brainstorming ideas for an application and then narrowing it down to a restaurant's website. I found images for inspiration and sketched out a plan for the components. I used Create React App to create the foundation of the application. To build the application, I used an incremental approach. I built the main page components, which were initially empty except for h1 elements, and applied some basic CSS styles. For the navigation bar, I added in client-side routing using React Router. I developed the booking form and booking card components. My general method to display the meals and desserts was to build smaller components with static data, apply basic CSS styles and then add in dynamic data. Once I was happy with the overall layout, I set up the GET request to the data file to display bookings and the POST request to submit bookings and save them to the data file. To complete the project, I polished the CSS styles.

A highly effective strategy for me to complete this project was to break big tasks/functionality into small manageable tasks and work steadily through the task list. This really helped me to manage the project. Also, I found it helpful to add in high-level CSS styles as I developed the components and then polish the CSS styles once the functionality of the application was complete. I think that the process of completing the project could have been improved by working through more exercises to practise the skills before starting the project.

Some of my thoughts from completing the project:

• Recognize when coding starts to become easier.
• Plan a logical process and work through it step-by-step, remembering that code can be changed if needed.
• React has benefits such as being able to create reusable blocks of code, but it also requires careful consideration and planning of application design.

Summary

Looking back over my React learning journey, I can see how I have progressed from my starting point of having no knowledge about React. I found the experience of combining my knowledge of HTML, CSS and JavaScript with the React library to create a React single-page application to be invaluable practice for applying these skills as well as using VS Code, Git and GitHub to complete the project. After my initial difficulty in learning to use React, I'm now excited to see how I can use React in future projects. I would like to re-create a website using React or complete more projects using React.

To see the GitHub repository of my React project, visit Cerulean Coast Restaurant.

Background

As part of my Front-End Web Development course with Academy Xi, I embarked on a journey of learning JavaScript. I found JavaScript to be a huge step-up from learning HTML (hypertext markup language) and CSS (cascading style sheets). While reflecting on the topics covered over the last 8 weeks, I've realised that I have learnt a lot about JavaScript foundations. Understanding the building blocks such as variables, data types and functions provided a base for progressing onto more complex topics including array iterator methods, DOM (document object model) manipulation and communication with servers. The combination of these skills enabled me to build an MVP (minimum viable product) of a single-page web application for my JavaScript project.

Learning journey

I approached the JavaScript phase of the course with the expectation that it would be challenging. However, I wasn't completely prepared for the steep learning curve in a short timeframe. For the most part, I was able to read through the topics to keep pace with the lecture material covered each week, which was helpful for my understanding of the lecture content.

Learning JavaScript as my first programming language has been a roller-coaster ride for me; I have been able to easily grasp some concepts, whereas other concepts have taken longer for me to learn. I think spending more time practising the skills and reading other resources would be beneficial to establish my understanding of concepts.

Some of my key reflections from my learning journey:

• Persist and keep progressing through the topics.
• Look for other ways to learn the topic, including reading books and watching video tutorials.
• Practise often to cement the knowledge.
• Try to adopt a flexible mindset.
• Acknowledge that learning a programming language for the first time is challenging.

Project

I learnt a lot from completing my JavaScript project, for which I designed and built a web application to search for Nobel Prizes and display the results. This was my first practical application of combining my knowledge of JavaScript programming, connecting to an API (application programming interface) to retrieve data, and manipulating the DOM to display the search results.

To build my single-page web application, I started by selecting a subject and deciding on the interactivity for the application. I sketched wireframes and chose a background image, colour theme and font. Then I set up the local Git repository and remote GitHub repository for the project. After that intial set-up, I developed the basic HTML structure and CSS styles, including a template for the search results that would be displayed after user interaction with the web page. I then built the interactivity using JavaScript, testing during the build process and adjusting the HTML and CSS code as needed.

During my project, I found that making regular commits and pushes of my code to GitHub helped me to separate tasks and also reminded me of my progress on the project. I managed my time by allocating blocks of time for both large tasks (e.g., write HTML and CSS code) and small tasks (e.g., implement JavaScript code for the light/dark mode functionality).

Some parts of my process could have been improved. For example, it would have better to focus on getting the MVP working first and then spending time polishing the visual appearance. Also, I would like to further practise applying algorithmic problem solving in future projects.

Some of my key reflections from the project:

• Test out code in the browser console first and then transfer the working code to the JavaScript file in the project.
• Break a functionality goal into smaller parts. Write and test small pieces of code before incorporating it into a bigger component.
• Take a break when stuck on a coding problem and come back to it later with a refreshed approach.
• Stay aligned with the requirements of an MVP, and keep a list of possible improvements that could be implemented in the future.

Summary

Overall, I'm pleased with my learning journey and my JavaScript project. I'm glad that I've now developed the skills to create a dynamic web page.

To see my JavaScript project, visit Nobel Prize Explorer.