100 Days of Code: Day 76
100 Days of Code, Round 1
Goals For Today:[ultimate_icon_list icon_size=”16″ icon_margin=”20″][ultimate_icon_list_item icon_type=”custom” icon_img=”id^4091|url^https://www.blissfullemon.com/wp-content/uploads/2018/05/done.png|caption^null|alt^null|title^done|description^null”]Work on React challenges at Free Code Camp[/ultimate_icon_list_item][/ultimate_icon_list]
It has been a pretty good day in the coding world today. I had to do a few things this afternoon, so I did not spend as much time coding as usual. Fortunately, the little time I had was very well spent.
I did a bit of research on a few things I didn’t completely understand and was able to get through 16 challenges. That’s not too bad. I’ll have more time tomorrow to finish the last 19.
On a side note, I am really happy with my approach to learning React. That is, watching video-based courses prior to working through the FCC React challenges. Now that I am back to the challenges, I have a much better understanding of what I am reading. The written challenges complement the video content very well. Some of concepts are explained better within the challenges, while others were explained more clearly in the video. And each contains information that the other lacks.
When I learn Redux, I think I may take the same approach. I like combining methods and resources so I can get the best understanding of the concepts. Then, of course, I can fill in any gaps with additional research.
What I Learned Today
- How to pass props (properties) of the parent class to stateless functional components
- Passing an array as props from the parent class to the child component
- Defining a default value for props passed to the child component
- Overriding the default value within the child component
- How to specify a property type by setting propTypes on a component
- Specifying that a property is required using the isRequired keyword
- Using the this keyword to access the props of the parent component when the child component is an ES6 class component instead of a stateless functional component
- The difference between stateless functional components, stateful components that extend the React.Component class, and stateful React components, which maintain their own internal state
- How to create a stateful component by initializing the state of the React component within its constructor
- Using this.state to access the state of the component and render the value of state to the user interface
- Setting the state using this.setState
- Explicitly binding this to a class inside its constructor in order to allow methods to access the props of the class without this returning as undefined
- Managing the state of a component and using said state to control other elements, like the visibility of a UI element
- How to use click handlers with buttons to set the state of a component
- Creating controlled inputs and forms, as recommended in the React documentation