Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
00-begin
01-jsx
02-components
03-lists
04-email-view
05-email-form
06-submit-email-form
07-delete-email
08-api
09-styling
10-mark-unread
11-email-form-modal
12-api-lib
13-action-reducers
end
README.md

README.md

React FUNdamentals Workshop

A step-by-step workshop to build a React application, all while learning React fundamentals. Best if accompanied with live facilitation. 🙂

Exercises

All of the exercises make use of ES.next, so you may need to brush up on the new JavaScript features if they are unfamiliar. Each step in the workshop builds on top of the previous one. If at any point you get stuck, you can find the answers in the source code of the current step. Any step can be used as a starting point to continue on to the remaining steps.

You can start at the beginning to get set up. Afterwards follow these steps:

  1. JSX
  2. Components
  3. Lists
  4. Email View
  5. Email Form
  6. Submit email form
  7. Delete email
  8. Interacting with APIs
  9. Styling
  10. Mark unread/read
  11. Email Form Modal
  12. API lib
  13. Action-Reducers

FUNdamental Concepts

  • Using JSX syntax (Step 1)
  • Writing readable, reusable and composable components (Step 2)
  • Maintaining component state (Step 4)
  • Handling user interaction (Step 4)
  • Handling HTML forms & form elements (Step 5)
  • Leveraging ES6+ to maintain application state (Step 6)
  • Making API calls (Step 8)
  • Hooking into the component lifecycle (Step 8)
  • Applying component styling with CSS classes (Step 9)
  • Factoring out logic from components (Step 12)
  • Creating "action-reducers" (Step 13)