Skip to content

Commit 651bcb4

Browse files
authored
Switch workshop over to React hooks (#47)
## 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.
1 parent a934589 commit 651bcb4

File tree

506 files changed

+16887
-49444
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

506 files changed

+16887
-49444
lines changed

.github/workflows/ci.yml

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
name: CI
2+
3+
on: [push, pull_request]
4+
5+
jobs:
6+
main:
7+
name: Test app build
8+
runs-on: ubuntu-latest
9+
10+
steps:
11+
- name: Checkout repo
12+
uses: actions/checkout@v1
13+
14+
- name: Use Node 12
15+
uses: actions/setup-node@v1
16+
with:
17+
node-version: 12
18+
19+
- name: Install NPM dependencies
20+
run: npm ci
21+
22+
- name: Run app build
23+
run: npm run build

.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v12.14.1

.prettierrc.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true,
4+
"trailingComma": "all"
5+
}

.travis.yml

-12
This file was deleted.

README.md

+35-16
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,47 @@
1-
# React Ecosystem FUNdamentals Workshops by Ben Ilegbodu
1+
# React FUNdamentals Workshop by Ben Ilegbodu
22

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

88
[![Watch on GitHub](https://img.shields.io/github/watchers/benmvp/react-workshop.svg?style=social)](https://github.com/benmvp/react-workshop/watchers)
99
[![Star on GitHub](https://img.shields.io/github/stars/benmvp/react-workshop.svg?style=social)](https://github.com/benmvp/react-workshop/stargazers)
1010
[![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)
1111

12-
Step-by-step workshops related to building React applications, all while learning fundamentals of the React ecosystem. Best if accompanied with live facilitation. 🙂
13-
14-
## Many thanks!
15-
16-
- [Create React App](https://github.com/facebookincubator/create-react-app) - makes it painless to spin up a React environment
17-
- [React Docs](http://facebook.github.io/react) - lots of content has been borrowed from here
18-
- [Vincent Budrovich](https://github.com/vwb) for his Redux tutorial contributions
19-
- ...and other contributors for their docs and code fixes
20-
21-
## Workshops
22-
23-
- [React FUNdamentals](src/react/)
24-
- [Redux FUNdamentals](src/redux/)
25-
- [React & Redux Testing FUNdamentals](src/testing/)
12+
A step-by-step workshop to build a React application, all while learning React fundamentals. Best if accompanied with live facilitation by me 🙂.
13+
14+
## Exercises
15+
16+
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.
17+
18+
You can start at the [beginning](src/00-begin/) to get set up. Afterwards follow these steps:
19+
20+
1. [JSX](src/01-jsx/)
21+
1. [Query Field](src/02-query-field/)
22+
1. [API](src/03-api/)
23+
1. [Lists](src/04-lists/)
24+
1. [Form Submit](src/05-form-submit/)
25+
1. [Components](src/06-components/)
26+
1. [Prop Types](src/07-prop-types/)
27+
1. [Custom Hook](src/08-custom-hook/)
28+
1. [Loading States](src/09-loading-states/)
29+
1. [Final Quiz!](src/10-quiz/)
30+
31+
## FUNdamental Concepts
32+
33+
- Using JSX syntax ([Step 1](src/01-jsx/))
34+
- Maintaining component state with `useState` hook ([Step 2](src/02-query-field/))
35+
- Handling user interaction ([Step 2](src/02-query-field/))
36+
- Making API calls with `useEffect` hook ([Step 3](src/03-api/))
37+
- Rendering dynamic lists of data ([Step 4](src/04-lists/))
38+
- Conditionally rendering components ([Step 4](src/04-lists/))
39+
- Handling HTML forms & form elements ([Step 5](src/05-form-submit/))
40+
- Writing readable, reusable and composable components ([Step 6](src/06-components/))
41+
- Type-checking props ([Step 7](src/07-prop-types/))
42+
- Factoring out logic from components into custom hooks ([Step 8](src/08-custom-hook/))
43+
- Leveraging ES6+ to maintain application state with `useReducer` hook ([Step 9](src/09-loading-states/))
44+
- Applying component styling with CSS classes (throughout)
2645

2746
## Questions
2847

api-server.js

-154
This file was deleted.

0 commit comments

Comments
 (0)