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
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
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.
React.cloneElement? And the difference with
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.