100 Days of Code: Day 77

Home / Technology / Web Development / 100 Days of Code: Day 77
During my coding adventures today, I completed another 13 React challenges and learned more about React components, hooks, and styling JSX elements.

[vc_row css=”.vc_custom_1526680382655{margin-top: 15px !important;margin-bottom: 60px !important;padding-right: 10% !important;padding-left: 10% !important;}”][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%2277%22%2C%22color%22%3A%22blue%22%7D%5D” title=”100 Days of Code, Round 1″ percentage_value=”27″ title_color=”#3e3e3e” bar_color=”#1b7da9″ track_height=”20px” track_color=”#e7f6fc” m=”20″ extra_class=”” units=”%”][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Goals For Today:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][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”]Continue with the React challenges at Free Code Camp[/ultimate_icon_list_item][/ultimate_icon_list][vc_column_text]I made it through another 13 of the React challenges today at Free Code Camp. That includes several challenges that focus on React Components and hooks. In case you aren’t keeping count, that means I only have 6 challenges left to finish. I don’t think it will take more than a few hours tomorrow morning to get it all done, but I’ve been wrong before. We’ll see!

What I Learned Today About React, React Components, & JSX:

  • Some of the important principles of React, including its unidirectional data flow, breaking down complex stateful apps into one or more stateful components, and separating state logic from UI logic
  • How to pass state as props to child components by using propertyDescriptor={this.state.property} within the parent component and this.props.propertyDescriptor within the child component
  • Passing methods, handlers, and other props from a React component to a child component
  • How to work with some of React’s lifecyle methods (or hooks) like componentWillMount() and componentDidMount()
  • Adding event listeners within the componentDidMount() method and cleaning up components by removing event listeners within componentDidUnmount()
  • How to use the lifecycle methods componentWillReceiveProps() and componentDidUpdate()
  • Manually specifying whether a component should update after state changes using the method shouldComponentUpdate()
  • How to modify the inline style of JSX elements:
    • using style attributes with JavaScript objects instead of strings
    • using camel case property names instead of hyphenated property names
    • specifying size units for fontSize unless the size is measured in pixels (px)
  • Assigning repeated styles to a constant to use instead of inline styles, which helps keep the code from becoming too muddled
  • Writing plain JavaScript code outside of the component’s render method
  • Accessing any variables or methods using curly braces to specify the JavaScript within the render() method, which is interpreted as JavaScript inside the JSX code
  • Use an if/else statement or conditional operators to determine what elements (if any) are rendered

Things I Want To Explore Further

  • Using conditional operators instead of if/else statements to render certain elements, as well as ternary operators. I understand the concept and had no major issues with the challenges. However, I still want to do a bit more research and see some more examples of their use. It can’t hurt.
  • I also want to spend a little more time with binding and the this keyword. Again, I mostly understand it, but if I had to answer any questions or explain it to someone, I don’t think I could. That’s generally how I determine how well I understand something. If I’m not comfortable enough teaching it, I probably don’t know it as well as I should.

[/vc_column_text][/vc_column][/vc_row]

Let's chat!

%d bloggers like this: