Code Challenge #14: Test Your Knowledge of React Hooks

Celý článek

The front-end world of JavaScript keeps buzzing daily with new tools, technologies, and super updates! One of such recent release by the React.js team is React Hooks in React 16.7-alpha. Here's an awesome post by Chris introducing React Hooks.

Hooks give us a way to write cleaner code by replacing class components or rather stateful components in React with functional components (this is NOT replacing class components). Thus, you have the ability to utilize features such as state and lifecycle methods which were previously unusable in a functional component.

The Challenge

In this challenge, we'll test our knowledge of React Hooks by converting class components into stateful functional components.

In this challenge, you are provided with individual components in a simple pre-configured React project which requires you to convert the following to a functional component:

• A component having a single state variable.
• A component having multiple state variables.
• A component having a componentDidMount lifecycle method.
• A component having a componentWillUnmount lifecycle method.

A sample codesandbox scaffolded from a create-react-app project is provided with the components. Fork the sandbox to get started.

Fork this sandbox to get started: https://codesandbox.io/s/041j5n0ok0https://codesandbox.io/s/041j5n0ok0

Requirement

The only requirement is to re-write the class components to functional components.

Goals for this Challenge

• Re-write class components to functional components while retaining state and lifecycle properties.

• Understand how React Hooks work.

• Write simple React components.

• and of course, use codesandbox to demo projects.

Resources

New to React Hooks? This post by Chris and this by Peter should help you get through. Also, all required dependencies have been installed in the sandbox to quickly help you start out.

Community

Would you like feedback and reviews on your submission after completion? You can:

• Share on Twitter and be sure to use the hashtag #ScotchCodeChallenge and we would be sure to see it.
• Boost your technical writing skills by writing a post on Scotch about how you solved the challenge.
• Post the link to your completed sandbox in the comment section of this post.

Solution

The solution to this challenge will be published next Monday! Happy keyboard slapping!