26
Solo Week + React (pt. 1)
This should've been yesterday's post. Last night, rather than write or work on code, I went out to dinner with friends. Great decision.
Today's a Saturday and although it was our first class-free Saturday since this program began, I did a bunch of work. It felt good.
We spent this past week planning our Front-End Capstone (FEC) project. I'm not a huge fan of planning, and although I get along great with my current teammates, I'm not a huge fan of how our process played out. That's ok - it's a learning project. But I do wish we had started writing code at least a day sooner. It would've been manageable, and in my opinion, more productive.
This being a front-end project, I've been operating almost entirely with React. It's been going well. I mean, the thing is getting built, but even more, I've learned some new things, and have gotten more solid on some previously shaky things. Of course, today's work has raised some questions, too. I'll start with those questions.
When we write little helper variables to help with conditional rendering or just more concise, why are those declared in the render function and not in the class component definition?
I'm starting to understand something that puzzled me in my earliest React days. So I believe React re-renders components (or parts of them) upon state change. That's why you use setState (the function) and not regular object access (dots or brackets) to change state variables. I imagine setState triggers that re-rendering.
I'm using ComponentDidMount to fetch data and populate state variables. It looks like this:
this.setState({styles: data.results})
this.setState({selectedStyle: data.results[0]})
this.setState({stylePhotos: data.results[0].photos})Something about this doesn't seem right. Should I have separate state variables that refer to the same parent object? The problem I'm solving with this is that the component renders stylePhotos (it maps over the photos) and so trying to access those photos on initial page load with something like
styles.selectedStyle.photos breaks the page (more on this later) because selected style is an empty object on page load (so is styles for that matter) and you get an error for trying to access values on undefined objects.So to get around that, I've initialized the state like so, which doesn't throw errors:
this.state = {
styles: [],
focusedImageIndex: 0,
carouselIndex: 0,
selectedStyle: {},
stylePhotos: []
};So yeah, the question is: Is there a better way to do this?
We decided as a team that we'll use Context (which I think is a state-management library like Redux) in this project. Maybe Context will be the answer to my question above. But I wonder how much refactoring work I'm creating for myself by not starting with Context right off the bat.
I'm not deliberately expanding my React knowledge. Instead, I'm using it in the limited way that I know and assuming that if and when problems occur, that I'll be able to troubleshoot my way out of them. Is that a terrible approach? Should I do a deeper dive and find some tools that might help me later? Will I be able to remember those tools and recognize opportunities to apply them with that approach? I'm a hands-on learner, so would I need to write test/learning code as I went through the docs. And would that process eat up time that I should be applying to the current project?
Alright this post is long enough to stand on its own, and it's getting late enough for me to put the computer down. I'll come back to this in a part-two.