A Week of React Learning: Key Takeaways and Future Plans

Introduction

This week has been a fun week; it's my first week without any assignments for computer science and purely a week where I learned all sorts of React jazz. ✨

Not to mention, this week was the first week where I considered myself officially back on my 100Devs community-taught journey.

This week I learned:

This week, my focus was entirely on React. Here’s what I learned:

Fetching data in React

Having done Scrimba when I first started learning I knew something about fetching data within React, but, I could easily have failed to answer you, this week I fixed my tech debt knowledge about fetching data in a React application.

To start with I got a refresher crash course on the Fetch API. It was something I knew and understood how to use, from a JavaScript point of view. The Fetch API not being part of the JavaScript language, but, is a Web API. Having absolutely nothing to do with the JavaScript specification, and only exists due to the environment in which we are running our code - the browser - which was a wonderful refresher. It is something I am wildly fascinated by.

What I learned about fetching data in React is that the useEffect hook is required to fetch data, this is because:

• without a useEffect hook we can run into infinite loops, and I tested it, it can just keep running, which is not a good thing.

• Fetching data from an external point is a side-effect - and React has no way of handling this asynchronous behaviour. However, with the useEffect hook, we can handle side-effects, this is the entire purpose of the useEffect hook in the first place.

useEffect is a React Hook that lets you synchronize a component with an external system.

In the case of fetching data - you need to synchronise the data you have received with your application, also likely, as I have been doing in my tests, using the useState hook.

I want to use this in my RecipeFinder project. 😊

useReducer hook

I am still struggling with the useReducer hook, but the basics I have understood are:

• it's like a super-powered useState

• using useReducer is best when the state is complex, eg. an object with various properties.

• it takes two arguments, an initial state, just as useState does, and then a second, an action argument, this action argument is what gives useReducer its super powered juice, using this second argument we can update state more efficiently based on actions in our code, which would reduce complexity and errors.

I still have to read and practice more with it. :)

Children in React

I had a crash course on JSX - JSX is just JavaScript under the hood.

It is objects - and I learned that React transpiles its JSX to these objects and it has a hierarchy of children, which are a representation of the DOM nodes that are rendered to the UI.

In doing this, I used Babel a lot.

Look how cool it is, the React component and what it transpiles to.

<MyComponent> 
  <div> 
    <h1> Hiya world! </h1>
    <h2> <span> oh a nested child </span> </h2>
  </div>
</MyComponent>

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*#__PURE__*/ _jsx(MyComponent, {
  children: /*#__PURE__*/ _jsxs("div", {
    children: [
      /*#__PURE__*/ _jsx("h1", {
        children: " Hiya world! "
      }),
      /*#__PURE__*/ _jsxs("h2", {
        children: [
          " ",
          /*#__PURE__*/ _jsx("span", {
            children: "Oh a nested child "
          }),
          " "
        ]
      })
    ]
  })
});

Not to mention I also got a nice exploration on the React Children prop, which, despite being listed as something that increases the risk of fragile code, is something I find cool.

Along with the Children prop, I learned the Children.map to transform Children in React, almost exactly how the map functions in vanilla JavaScript.

I like the pattern. It allows for really nice dynamic manipulation of children elements. I haven't used it much outside of the study lesson though. :) Soon. TM.

Custom hooks

I recall seeing "Custom Hooks" in the title of a YouTube video once, I didn't know much about hooks then, all I knew then was useState and the idea of a custom hook horrified me.

I was wrong.

Custom hooks are freaking awesome.

A custom hook is a module in React. It allows you to create a hook that performs a specific functionality all bundled up into a hook. This means you can share and use this hook anywhere in your code if you need it.

Reducing code duplication.

Higher-order components and render props

I noticed something this week as I was learning React.

A lot of React patterns/code revolve around reducing code duplication. Higher-order components and render props do exactly this.

With Higher order components we have a component and then we return a new one from our higher order one and this new component has extra features. It's an interesting pattern I have to explore more, but the general idea is:

When certain React logic is being reused a higher-order component might be a better option because it will reduce the code repetition, and then you can use that same higher-order component to implement similar logic in a different part of the application by returning a different component and modifying it to your use case.

Render props function much the same way, however, instead, they return a render() method with the data of the new component/data.

Portfolio time...

I also started a revamp of my portfolio.

I have been using a template & that is cool and great, it's neat, and it's functional, and I likely will go back to one, but, I am making my own right now. I am using React.

The goal is to implement a lot of the features and code I have learned.

Learning about context API and how it can be used to toggle between themes was super exciting and I would like to make several for my portfolio. My fear is the design and probably this means I will hunt for a Figma design file and code it myself.

This seems like a better idea to me. 😊

Extras

A few extras I did this week:

• I had a coffee chat with a front-end developer and it was pretty wonderful. I learned a lot from this person and got so many ideas, namely sharing my work and not learning in a vacuum, this is common advice and I have been working on that.

• Their advice was to leverage LinkedIn as well, I am terrible at LinkedIn but, I will start to use it more. 😊

Conclusion

Overall a wonderful week with React and I look forward to more, next week is Scrimba and I am super excited to dive into it and work on the projects. Will be super fun.

This is just the beginning. I am truly super excited to continue this journey.