Skip to content

Commit

Permalink
Switch workshop over to React hooks (#47)
Browse files Browse the repository at this point in the history
## Problem

Hooks have been out for over a year now. It's time to freshen up and modernize the workshop.

## Solution

Replace the React Fundamentals workshop with a workshop that builds a giphy search app using hooks. This meant that the redux and testing workshops no longer were applicable since they were based on something that no longer existed. They were also outdated too, so they got deleted.

However, the old workshop is now at the [`email-based` tag](https://github.com/benmvp/react-workshop/tree/email-based).

## Screenshot

<img width="1676" alt="Screen Shot 2020-03-22 at 4 14 28 PM" src="https://user-images.githubusercontent.com/5714478/77264781-552a9f80-6c58-11ea-9521-6719b495a758.png">

See [deploy preview](https://deploy-preview-47--react-fun-workshop.netlify.com/) for final UI.
  • Loading branch information
benmvp authored Mar 22, 2020
1 parent a934589 commit 651bcb4
Show file tree
Hide file tree
Showing 506 changed files with 16,887 additions and 49,444 deletions.
23 changes: 23 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
name: CI

on: [push, pull_request]

jobs:
main:
name: Test app build
runs-on: ubuntu-latest

steps:
- name: Checkout repo
uses: actions/checkout@v1

- name: Use Node 12
uses: actions/setup-node@v1
with:
node-version: 12

- name: Install NPM dependencies
run: npm ci

- name: Run app build
run: npm run build
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
v12.14.1
5 changes: 5 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}
12 changes: 0 additions & 12 deletions .travis.yml

This file was deleted.

51 changes: 35 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,47 @@
# React Ecosystem FUNdamentals Workshops by Ben Ilegbodu
# React FUNdamentals Workshop by Ben Ilegbodu

[![Maintenance Status](https://img.shields.io/badge/status-maintained-brightgreen.svg)](https://github.com/benmvp/react-workshop/pulse)
[![Build Status](https://travis-ci.org/benmvp/react-workshop.svg?branch=master)](https://travis-ci.org/benmvp/react-workshop)
[![Build Status](https://github.com/benmvp/react-workshop/workflows/CI/badge.svg)](https://github.com/benmvp/react-workshop/actions)
[![license](https://img.shields.io/github/license/benmvp/react-workshop.svg)](LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

[![Watch on GitHub](https://img.shields.io/github/watchers/benmvp/react-workshop.svg?style=social)](https://github.com/benmvp/react-workshop/watchers)
[![Star on GitHub](https://img.shields.io/github/stars/benmvp/react-workshop.svg?style=social)](https://github.com/benmvp/react-workshop/stargazers)
[![Tweet](https://img.shields.io/twitter/url/https/github.com/benmvp/react-workshop.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20React%20Fundamentals%20Workshop%20by%20%40benmvp!%0A%0Ahttps%3A%2F%2Fgithub.com%2Fbenmvp%2Freact-workshop)

Step-by-step workshops related to building React applications, all while learning fundamentals of the React ecosystem. Best if accompanied with live facilitation. 🙂

## Many thanks!

- [Create React App](https://github.com/facebookincubator/create-react-app) - makes it painless to spin up a React environment
- [React Docs](http://facebook.github.io/react) - lots of content has been borrowed from here
- [Vincent Budrovich](https://github.com/vwb) for his Redux tutorial contributions
- ...and other contributors for their docs and code fixes

## Workshops

- [React FUNdamentals](src/react/)
- [Redux FUNdamentals](src/redux/)
- [React & Redux Testing FUNdamentals](src/testing/)
A step-by-step workshop to build a React application, all while learning React fundamentals. Best if accompanied with live facilitation by me 🙂.

## Exercises

All of the exercises make use of [ES.next](http://www.benmvp.com/learning-es6-series/), 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](src/00-begin/) to get set up. Afterwards follow these steps:

1. [JSX](src/01-jsx/)
1. [Query Field](src/02-query-field/)
1. [API](src/03-api/)
1. [Lists](src/04-lists/)
1. [Form Submit](src/05-form-submit/)
1. [Components](src/06-components/)
1. [Prop Types](src/07-prop-types/)
1. [Custom Hook](src/08-custom-hook/)
1. [Loading States](src/09-loading-states/)
1. [Final Quiz!](src/10-quiz/)

## FUNdamental Concepts

- Using JSX syntax ([Step 1](src/01-jsx/))
- Maintaining component state with `useState` hook ([Step 2](src/02-query-field/))
- Handling user interaction ([Step 2](src/02-query-field/))
- Making API calls with `useEffect` hook ([Step 3](src/03-api/))
- Rendering dynamic lists of data ([Step 4](src/04-lists/))
- Conditionally rendering components ([Step 4](src/04-lists/))
- Handling HTML forms & form elements ([Step 5](src/05-form-submit/))
- Writing readable, reusable and composable components ([Step 6](src/06-components/))
- Type-checking props ([Step 7](src/07-prop-types/))
- Factoring out logic from components into custom hooks ([Step 8](src/08-custom-hook/))
- Leveraging ES6+ to maintain application state with `useReducer` hook ([Step 9](src/09-loading-states/))
- Applying component styling with CSS classes (throughout)

## Questions

Expand Down
154 changes: 0 additions & 154 deletions api-server.js

This file was deleted.

Loading

0 comments on commit 651bcb4

Please sign in to comment.