Code Monkey home page Code Monkey logo

phase-2-hooks-workshop-custom-hooks's Introduction

Custom Hooks Workshop

Learning Goals

  • Understand the benefits of creating custom hooks
  • Create custom hooks

Introduction

This workshop is designed to walk you through a series of short exercises led by an instructor where you'll be introduced to some new concepts, experiment with code, and go over a solution. The setup for this workshop is different from a typical lab, so make sure to read all the steps below before getting started!

Workshop Videos

This series of videos walks through the setup for each exercise, as well as going through a solution. Check out these videos if you're working on this workshop outside of a lecture setting:

You can view the solution code for this playlist on the solution branch.

Setup

  • Fork and clone this repo
  • Run npm install in the repo directory
  • Run npm start to run the project in the browser
  • In another terminal, run npm test to run the tests for all exercises

In the tab that is running tests, you can press the p key to select a specific test file to run. For example, hitting p and then typing 01.js will run the first test.

Instructions

The src directory has two folders: one for the solution code, and one for the exercises. You'll be working in the exercise folder.

  • src/exercise/01.js: Exercise (write your code here)
  • src/exercise/01.md: Deliverables and helpful notes
  • src/__tests__/01.js: Exercise test
  • src/__tests__/01.extra-1.js: Test for extra credit exercise
  • src/solution/01.js: Solution code (check your work, or look for a hint if you're stuck)
  • src/solution/01.extra-1.js: Solution code for extra credit exercise

Each deliverable in the exercise folder has comments to guide your work!

There are some emoji to guide you in the exercises:

  • โœ… Instructions where to write your code
  • ๐Ÿ‘€ A hint on what syntax to use/what code to write
  • ๐Ÿ“ƒ Helpful documentation

All credit to Kent C Dodds for the emoji guide idea, and general inspiration for this workshop format!

When running the workshop app in the browser, you can see the readme for each exercise alongside a sandbox where you can view your exercise code to see if it works. You can also open up your exercise code in a new browser tab to view the exercise alone, and more easily see what's happening in the React Dev Tools.

You can also view working examples of the code in the browser by clicking the solution tab.

Some exercises have bonus challenges to do for extra credit, so if you finish early, give them a shot! Or save them for later when you want to revisit these exercises.

phase-2-hooks-workshop-custom-hooks's People

Contributors

ihollander avatar munene-kariuki avatar hansenjl avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.