https://github.com/aholachek/react-2019-interactive-workbook

Learn new features of React interactively
https://github.com/aholachek/react-2019-interactive-workbook

learning-by-doing react

Last synced: 13 days ago
JSON representation

Learn new features of React interactively

• Host: GitHub
• URL: https://github.com/aholachek/react-2019-interactive-workbook
• Owner: aholachek
• Created: 2019-01-08T03:41:33.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T02:16:27.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T05:47:43.527Z (29 days ago)
• Topics: learning-by-doing, react
• Language: JavaScript
• Homepage: https://codesandbox.io/s/github/aholachek/react-2019-interactive-workbook?module=/src/1_Context/ThemeProviderContainer.js
• Size: 5.3 MB
• Stars: 17
• Watchers: 2
• Forks: 1
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React 2019 Interactive Workbook

React Hooks? Context? Lazy? Memo? Error Boundaries?

Who has time to learn about all this new stuff?



This workbook consists of a series of tasks that will get you quickly up to speed on the basics of the following new(ish) React patterns:

- Context

- Memo

- Lazy

- Portals

- Hooks

- Error Boundaries

Here's what it looks like:

![Example screen from the workbook](./screenshot.png)

## How to get started

1. Either [fork on CodeSandbox](https://codesandbox.io/s/github/aholachek/react-2019-interactive-workbook?module=/src/1_Context/ThemeProviderContainer.js) or fork this repo

2. Run `yarn` and `yarn start`.

**Note:** Doing the project locally instead of in CodeSandbox will result in a

better experience, since the React.lazy and

ErrorBoundary tasks will exhibit more realistic browser

behavior.

Next, click on a task in the menu and follow the instructions. Each task should take between 5 and 30 minutes to complete. For most tasks, you'll see three cards:

1. A set of instructions that you can complete by checking them off.

2. A non-working component that you must fix by editing the files in the relevant folder.

3. An example of the component in its final, working state.

If you get confused, search for the `TODO` comments in the code, or take a peek at the `answers` folder in each task.