Skip to content

Latest commit

 

History

History
89 lines (52 loc) · 3.98 KB

README.md

File metadata and controls

89 lines (52 loc) · 3.98 KB
Raw

Reading Material React Week 3

Agenda

These are the topics for week 3:

  1. Hooks II
    • Building custom hooks
    • Using other people's custom hooks
  2. Third party React tools
    • UI toolkits
    • Utilities

0. Video Lectures

Your teacher Shriyans has made video lectures for this week's material. You can find them here: Videos 9 - 11

HYF Video

1. Hooks II

Building custom hooks

One of the main benefits of using the React hooks (like useState, useEffect, etc.), is that they can be used in any functional component.

However, that's not the only big benefit. Another one is that it allows us to isolate stateful logic into a reusable function that can be used in other functional components.

This stateful logic is just a complicated way for saying state variables and the instructions that manipulate it.

In a custom hook we can create state everytime we use it, and modify it according to the instructions that are included in the hook. This is the strength of using custom hooks: by defining custom hooks we can replicate a certain functionality for us to use in multiple different functional components.

In terms of implementation, a custom Hook is simply a JavaScript function whose name starts with ”use” (for example, useSomeAction). It incorporates existing hooks (like useState) and adds logic to it.

Study the following to learn more about it:

Using other people's custom hooks

Like anything in development, once someone has found a solution to a common problem it (hopefully) gets published for everyone to use. This is also the case with hooks.

Check the following resources out to learn more about these custom hooks others have made for you to use:

2. Third party React tools

Third party React tools can roughly be divided into 2 categories:

  1. UI toolkits
  2. Utilities

UI toolkits

These kind of component libraries serve to structure your user interface. If you've ever worked with a CSS framework, this is what it means.

Popular presentational component libraries are the following:

All of these are called UI toolkits and provide components that structure a particular part of your page.

For example, Let's say you want to add a button component in your form. You could make it yourself. Or you could take it from the toolkit!

import React from "react";
import { Button } from "semantic-ui-react";

const ButtonExampleButton = () => <Button>Click Here</Button>;

export default ButtonExampleButton;

Utilities

There are also tools that solve certain problems within the React ecosystem.

  • Enzyme is a React-specific component testing tool, that makes it easier to test your React Components' output
  • Redux is a state management tool, used to make it possible to connect every component directly to the entire state and thus eliminates the need to use props or callbacks.
  • React Intl is a tool that provides an application the ability to have multiple languages (English, Dutch, etc.) within the application

All of these tools are not necessarily React-specific, but allow us to use React in order to create more engaging, feature-rich applications.

Finished?

Are you finished with going through the materials? High five! If you feel ready to get practical, click here.