blog 408

Discuss something you learned in class today or this week.

This was our final week of class and I’ve been diving deep into my capstone project. One thing that has caught my attention is figuring out how to do certain basic things but in a React way. For instance, my app has a header and a footer on each page, but using React router allows me to use a single component to render this to “each page”… The challenge here was that I wanted to mark an active page as a different color in my menu. This would be super easy with standard CSS but because I was never actually re-rendering the header, I needed a different solution. While there are likely many ways to accomplish this, what I did was set a global state to the name of the page on each component load, then conditionally render the color of the svg in the menu based on that state. I ran into similar problems with my hamburger menu. While these challenges may seem like a reason to use vanilla JS with HTML and CSS, the benefits of React certainly outweigh these difficulties. The quick responsive sites and fun of JSX make React my new favorite choice for any project going forward.

Explain the use cases for and differences between bind, apply and call.

These methods are annoying inconveniences of class based JS and make me so happy that we have arrow functions and hooks to simplify this stuff. “this” always refers to an object. “this” refers to an object which calls the function it contains. In the global context “this” refers to either window object or is undefined if the ‘strict mode’ is used. The bind() method creates a new function where “this” refers to the parameter in the parenthesis in the above case “car”. This way the bind() method enables calling a function with a specified “this” value. The call() and apply() methods also belong to the Function.prototype property. You can use call()/apply() to invoke the function immediately. bind() returns a bound function that, when executed later, will have the correct context ("this") for calling the original function. So bind() can be used when the function needs to be called later in certain events when it's useful.

How do you handle code organization?

This is a broad question but since we’ve been learning React I will approach the question from that perspective. While working on my capstone I’ve learned that as a React project grows the organization becomes extremely important. As you create more and more components we must find a way to keep track of it all. Keeping a separation of concerns is my primary organization method. This means keeping a components folder within the src folder, and another folder for global state whether it be context or redux. Another useful method is to create a folder for each component that houses the actual component js and an index.js that just imports and exports the component so that it can be referenced more easily while remaining organized. One benefit of this structure is that you can put everything related to that component within this folder, whether it be CSS, images, sub-components…

How do you handle dependency management?

NPM provides a great tool for managing dependencies in our package.json and package-lock.json files. When working on a new project I will often install packages that either a) don’t fit my needs or b) I eventually write my own code for. This will often leave my dependency tree full of unused packages. It is important to remove these as you go and try to clean up afterward as well. You can also go into your node_modules and remove any unnecessary packages here.

What is React.cloneElement? And the difference with this.props.children?

The React.cloneElement() function returns a copy of a specified element. Additional props and children can be passed on in the function. You would use this function when a parent component wants to add or modify the prop(s) of its children.

Walk us through the process of the creation of an application or website you’ve built.

First off, there is a ton of planning involved in creating a workflow for creating an app or website. Starting with a brainstorm of features, evolving into wireframes, mockups, and prototypes, and coming to life with psuedo-code and eventually building actual components and connecting everything together. My personal style (so far) is to make a basic skeletal front-end to inform what my backend needs. As the front end takes shape I will start constructing and connecting the back end, then tying it back to the front end. Once this connection is made it is time to polish the front end, test, fix, break, rinse, and repeat. No project is ever truly “complete” and you can always iterate version 2.0.

What are the differences between functional and imperative programming styles, and explain your preference, if any.

Imperative programming assumes that the language knows how to do something while declarative styles such as functional programming requires a set of step by step instructions. In my experience, these two styles work together to a certain extent, especially in the React world. We tell React what to render to the screen and it takes care of all of that for us. That said, there is certainly a functional aspect to building out *functionality* in a React app. It really comes down to the idea of higher and lower level programming even if within the same language such as JavaScript. We have higher order functions such as map which make our lives easier, but sometimes we still need to provide a detailed set of instructions. Functional/declarative and imperative programming styles can co-exist and are often mutually beneficial.