Week 10: Starting Our First Partner Coding Project - Backend Buildout and React Web Framework

Welcome to Week 10 of the Hack Reactor documentation. When I look back on how much I have been working, studying, and learning in Software Engineering since November 2022, it truly excites me at the possibilities this field can create for the flexibility of working from anywhere at any time and genuinely contributing massive value. More so, I had this idea of how creating code can be similar to art.

The same creative energy and imagination that produces art are also found in programming. Those who code, like artists, strive to make something beautiful, functional, and meaningful. Programming is often likened to being a masterful creator - much like an artist. It calls for an eye for innovation and originality, a capacity for precision, and the skill to turn indefinite thoughts into tangible objects. As a painter trades in brushes and canvas, a programmer calls on languages, frameworks, and tools to bring their ideas to life. Both must be experienced in their craft and have a profound comprehension of the medium they are working with, able to wield it like a prized author. Programmers must maintain their knowledge and stay current with the latest strategies and technologies. They need to feel comfortable with trial and error to create something innovative and one-of-a-kind. The same inventive brilliance that gives form to art breathes life into programming. Coders, similar to artists, work to make something special, effective, and meaningful.

Now this excitement in the field also has the perspective that this field will drastically look different in how we think about what are programming and coding as; the rapid advancement of AI tools for coding will transform a coder into needing to know the right and practical question or prompts, in addition, understand the direction to take when utilizing the highly accurate and effective AI assist coding tools that are becoming more and more effective at producing code for projects and tasks. I am in agreeance with numerous others in that AI will disrupt society as we know it for many people who are white-collar workers and; that one needs to learn how to utilize this technology to create value for others and themselves and also understand that history repeats itself, and this is another technological advancements in human history that will propel humans to another level of prosperity and capabilities. 

This week's learning covered React framework in more depth than the first two days of this shorter week (we had Friday off as the program follows every second Friday there is no class). On Wednesday and Thursday, we had partner projects where we had to connect RESTful APIs to our microservices in the backend and then integrate our forms from our models in the front end using React. I'm very grateful to have a partner that is easy to work with, and we have a similar understanding of connecting everything in the project. I learned a lot working with her and utilizing git and working off several different working branches, and then committing to a main branch to save our work together. To continue for this week, here are this week's learnings: 

React Javascript Destructuring

Array destructuring is a feature in JavaScript that allows you to extract elements from an array and assign them to variables in a single statement. It can save you from writing multiple lines of code to extract array elements and assign them to variables. You can destructure an array using square brackets on the left-hand side of an assignment expression.

Docker container deletes images

docker build command . -t “name of image”

docker run -it -v “$(pwd):/app” -p 3000:3000 “name of the image” bash

npx create-react-app blueberry

What is NPX?

NPX is a package runner tool that comes with NPM 5.2+ and higher. It allows you to execute a package you haven't installed globally easily. It can be used to run command-line tools, and scripts, or even install packages without the need to install them globally, making it a useful tool for development workflows.

What is state in React?

State in React is an object that represents the current state of a component. It can be updated by calling a function provided by React called setState() . When state is updated, React will re-render the component to reflect the new state.

What is the difference between input and textarea in JSX HTML?

In JSX HTML, the <input> element is used for single-line input fields, while the <textarea> element is used for multi-line input fields.

The on change handler for example textChanged

event.target.value inside the function that is going to handle the change event

Import React useState function from React and create a piece of State

Key takeaways for Use State -

1. using array restructuring, we create a variable to hold the initial state
2. we also create a variable to hold the function that we call to update the state
3. we pass the initial state as an argument to useState

Docker first then run the container and create react in a directory then cd into that directory and start the server

Why in React we don’t use “for”

React wants us to use htmlFor instead of for in JSX because for is a reserved keyword in JavaScript, and using it in JSX would cause an error. Instead, we use htmlFor to specify the for attribute on an HTML label element. This is important because using a label associated with an input element improves accessibility for users who rely on assistive technology.

Front End SPAs

Single Page Applications (SPAs) are a type of web application that loads a single HTML page and dynamically updates the page as the user interacts with the application. This is in contrast to traditional multi-page applications, which load a new HTML page for each interaction. React is particularly well-suited to developing SPAs due to its ability to efficiently manage state and handle dynamic updates to the UI.

React Router

React Router is a popular library for routing in React applications. It allows you to define routes in your application and map them to specific components. This enables you to create a more complex UI with multiple views, without having to reload the page. With React Router, you can easily navigate between different views, pass data between them, and handle dynamic route parameters.

What is Docker