reacttraining / react-workshop

The course material for our React Hooks workshop

Welcome to React Training!

Be sure to also checkout https://reacttraining.com/public-workshops to see our schedule of public workshops.

This repo contains the latest course material for React Training. You are permitted to use any code or ideas you find here for any of your projects. However, you cannot copy this material to create paid trainings.

Workshops Contained

• React Core
• Advanced Component Design
• Advanced Compound Components
• Advanced Hooks
• Remix

README Table of Contents

• Quick Install Setup
• How to get ready for the workshop
• Not good at JavaScript? Not a programmer?
• Setup For Mac and Linux Users (Unix Users)
• Setup For Windows Users
• Consider Using VSCode
• Running the code
• Running the code on Windows
• Database
• Updating Workshop Code
• Troubleshooting
• Improvements?
• License

Quick Install Setup

Already have Node/NPM installed? Then start here. Otherwise we have some instructions below in this document if you don't.

For React Workshops

• Do npm install first
• Do npm start
• Choose "React" from the menu
• You'll see a menu in the terminal. Choose "FULL APP"
• You should be able to visit localhost:3000 in the browser and see the app
• You're all set if you see the app.

Be sure to read this "JavaScript Primer" article if you think you'll need guidance on modern JavaScript: https://reacttraining.com/blog/javascript-the-react-parts/

For The Remix Workshop

• Do npm install first
• Do npm run install-remix next
• Do npm start
• Choose "Remix" from the menu
• You'll see a list of options to run our curriculum next. Choose "FULL APP"
• You should be able to visit localhost:3000 in the browser and see the app
• You're all set if you see the app.

Be sure to read this "JavaScript Primer" article if you think you'll need guidance on modern JavaScript: https://reacttraining.com/blog/javascript-the-react-parts/

How to get ready for the workshop

• Make sure you have Git and Node installed first. Windows Users see the special section below on this.
• Install this code (instructions below)
• Read this JavaScript article as a primer for React. Some JS topics are confusing to those who mostly program in other languages -- like JavaScript's Arrow Functions.
• We highly recommend watching this 10m video - The Story of React
• We have some additional reading material for those who are interested in learning more things before the workshop (not required though).
• WAIT! Does your company or computer use VPN's or any sort of proxy? That might cause some issues that are out of our control. Most of the time we see that your peers will be able to help you out since this will be very specific to your company's security policies.

Not good at JavaScript? Not a programmer?

That's totally okay if you don't know JS very well as long as you know how to program in any other language you'll do fine in the workshop. However, JavaScript has changed a lot since 2015 and if you're not used to its modern syntax, you might struggle a bit with React and our material so please read this primer article that will get you ready. People often tell us the primer article was the thing that made the workshop successful for them.

This workshop assumes you know how to program. Sometimes we'll get attendees who have the goal of knowing high level details about React so they can better communicate with their React developer co-workers. In that case, you're certainly welcome to attend, but the material is designed for programmers.

We presume you know:

• How to write HTML
• How to do Command Line
• What an API is (in general)
• HTTP concepts like REST/GET/POST etc, and the general idea of AJAX requests

Setup For Mac and Linux Users (Unix Users)

If you have any problems with these steps, see the Troubleshooting section at the bottom of this page.

• Need to install Git? - http://git-scm.com/downloads
• Need to install Node? We recommend using NVM (Node Version Manager)

Note that NPM (Node Package Manager) is a command-line tool that will also be installed with Node

If you need to verify that you have NVM installed, do: nvm version. Then install Node. Which version of Node should I use? It probably won't matter much, but we try to use the Active Version.

# For Node 18 (for example)
$ nvm install 18

# See this page for more install options:
# https://github.com/nvm-sh/nvm#usage

Verify you have Git, Node, and npm installed. Installing Node will install NPM:

$ git --version
$ node --version
$ npm --version

Now jump to Clone and Install below

---

Setup For Windows Users

If you have any problems with these steps, see the Troubleshooting section at the bottom of this page.

• Need to install Git? - http://git-scm.com/downloads
• Need to install Node? We recommend using a version manager for Node. The NVM (Node Version Manager) tool that lots of devs use is only for Mac and Linux, so there's a special nvm-windows version. Microsoft also recommends this approach in this article. Be sure to follow all their steps:

https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows

Microsoft: "There are multiple ways to install Node.js. We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple versions based on the needs of different projects you're working on"

Note that NPM (Node Package Manager) is a command-line tool that will also be installed with Node.

If you need to verify that you have NVM installed, do: nvm version. Then install Node. Which version of Node should I install? It probably won't matter much, but we try to use the Active Version.

# For Node 18 (for example)
$ nvm install 18

# IMPORTANT: You'll be also prompt to `nvm use`
# the version number that you installed. You may
# need to run your shell as admin in order to do this.

Verify you have Git, Node, and npm installed. Installing Node will install NPM:

$ git --version
$ node --version
$ npm --version

Consider Using VSCode

Consider using VSCode -- a lightweight version of Visual Studio that isn't at all tied to .NET.

If you're a Java/C# developer, we know you have you're editors for those languages, but you can expect a less optimal experience with poor tooling when you write JavaScript in those tools.

Running the code

🚨 Windows users, your way of running the code might be different. See the section for Running the code on Windows after this section.

If you have any issues running the code, we have a general Troubleshooting section at the bottom of this page.

# If you're in the root path of the repo

# Run the full project
$ npm start app

# Run a lecture or exercise
$ npm start

In both of those commands you'll get a CLI menu asking what you want to do next. To make sure you can run the code, just do npm start app and choose any of the apps in the menu.

Go to localhost:3000 in your browser. You have to do this manually.

If the application renders up in the browser, you're ready to go. 👍

Remember to learn the JavaScript syntax that matters the most to React before attending the workshop. Many of our attendees say this article was essential for their preparedness for the workshop.

See you soon.

Running the code on Windows

You can do the above Running the Code section after you read these common issues on Windows.

Some issues are not Windows-specific so they will be listed in the general Troubleshooting section at the bottom of this page.

• Don't use spaces for your repo folder name (if you change it from the default react-workshop), we've had some issues with Windows users regarding this.

• PowerShell Users: We've tested this repo out with PowerShell and it seems to work fine. If something doesn't seem to work, see the Troubleshooting section below.

• 🚨 GitBash Users: Doing npm start or npm start app seems to be broken if you open a normal GitBash terminal. However we noticed that if you're in VSCode and you open the terminal window from within VSCode Ctrl+` (it will probably be PowerShell by default). You can use the + plus sign on the right to make a new terminal that is GitBash and we've had success running the code from that GitBash window from within VSCode.

• WSL (Windows Subsystem for Linux)

We think we fixed some of our recent issues with PowerShell and GitBash, but historically we've recommended WSL because it always seems to work well but it takes a bit of effort to setup:

• WSL 2 Installation: https://docs.microsoft.com/en-us/windows/wsl/install-win10
• Node on Windows: https://docs.microsoft.com/en-us/windows/nodejs/setup-on-wsl2

If you're not using WSL and you experience issues, they might be:

• Your repo name has spaces in it, sometimes now allowed.
• Permissions issues when attempting to clone the repo. If you are using WSL but usually use another shell, you may want to copy your SSH keys where WSL can access them. This article explains why this is necessary and how to do it.

Database

When you start our code, it will start the app at port 3000 and a small local database at port 3333. Don't worry about the database, it's not even a real database. It's a tool called json-server that treats a JSON file like a restful database and runs 100% within this repo so as soon as you quit the app and if you remove the repo, you've removed the database.

When you do npm install we run a postinstall script to copy a db-seed.json file to db.json. We're using Node for this in a way that is supposed to help with cross-platform filesystem stuff. But incase it fails, you'll just have to copy this file manually. The file is in apps/[project name]/database.

There are some rare times when you quit the app the background process for port 3333 remains open and this will prevent you from starting the app again until the port is closed. So we made npm run kill-db-port as a command for you in case this happens. All this does is quit the processes associated with port 3333. If you have any problems you can do this manually.

Updating Workshop Code

If you've already cloned the repo but you need to get updated code, then follow these steps:

• First, cd into the root directory of the repo
• Then do an ls command to ensure you see a package.json file listed. If you don't you're not in the root folder of the repo
• Clear out any dirty files in your Git working tree (git stash is a safe way to do it, git reset ---hard is how to live dangerously)
• Then run these steps to get the updates:

git pull origin main
npm install

Then you should be able to do your npm start again.

Troubleshooting

A few common problems:

• You're having problems cloning the repository. Some corporate networks block port 22, which Git uses to communicate with GitHub over SSH. Instead of using SSH, clone the repo over HTTPS. Use the following command to tell Git to always use https instead of git:

$ git config --global url."https://".insteadOf git://

# This adds the following to your `~/.gitconfig`:
[url "https://"]
  insteadOf = git://

---

• You're having trouble installing Node. We recommend using a node version manager. See the sections above for setting these up -- it's different from Mac/Linux vs Windows.

---

• You can't start the app with npm start or npm start app. Make sure you can see a node_modules folder at the root. If you can't you need to run npm install from the root of the repo. If you're on Windows, see the sections above for running the code as a Windows user.

If you're missing the db.json file the app also won't run. See the Database section above for more details.

---

• You were able to run the code once but not again and you're getting something like JSON-SERVER was not able to start. Port 3333 might still be open from a previous run.

Sometimes the background process for the database doesn't shut down property. It's rare but you can do:

$ npm run kill-db-port

If this script doesn't work for any reason, just kill port 3333 on your machine which is the database's port.

---

• You don't have permissions to install stuff. You might see an error like EACCES during the npm install step. If that's the case, it probably means that at some point you did an sudo npm install and installed some stuff with root permissions. To fix this, you need to forcefully remove all files that npm caches on your machine and re-install without sudo.

$ sudo rm -rf node_modules

# If you installed Node with nvm (suggested):
$ sudo rm -rf ~/.npm

# If you installed Node with Homebrew:
$ sudo rm -rf /usr/local/lib/node_modules

# Then (look ma, no sudo!):
$ npm install

Improvements?

If these instructions can be improved, please let us know or make a PR!

License

This material is available for private, non-commercial use under the GPL version 3. If you would like to use this material to conduct your own workshop, please contact us at [email protected].

react-workshop's Issues

Filtering Products in Sidebar

I forget what @ryanflorence 's special significance for why he wanted this, but it was a big part in choosing the "browsing products" theme of this app. In any case, all the UI needs to be made. Right now we're using a strategy if having the URL query string be the "state source of truth" for things like the text search box. I think this might be the same. All you have to do is send query variables to the URL and the BrowseProducts page takes those and passes them along to json-server's API. So anything that works in the json-server docs for query strings should work for us

Stylize the Reach UI Dropdown Menu

The Reach UI dropdown used when you click on the avatar in the primary header needs to be stylized

The Checkout Process

This includes lots of things:

• The whole checkout page
• We need to have a billing and shipping form - this would be good for a lesson on controlled/uncontrolled state we used to do in our old curriculum
• Maybe a mock credit card form with a specific number that succeeds and one that fails the submission
• If we want to take it far, we can even clear the cart, deduct inventory from the database, and then even have UI for showing "out of stock"

A11y everywhere. I didn't do much of this while quickly developing

Just like the description says. Besides use of semantic tags and some basic Reach stuff. I didn't go above and beyond with a11y yet.

Although I think we should wait until the app is closer to being done

General Planning (First Issue)

Mock App for Fundamentals

This issue is just meant to be a high-level ongoing conversation about the progress of developing the curriculum.

For anyone working on the fundamentals mock app code directly, here are some docs regarding how the code is setup and organized

Here's a list of things that still need to be done on the app

App Features.

Not all of these have to be done, this list is just ideas

• A "view similar products" feature for when we're on a product profile page - #3
• Ratings for the product (star ratings) - #4
• Reach UI combo box for Github username in signup - #5
• A11y everywhere. I didn't do much of this while quickly developing - #6
• Finish the checkout process - #7
• Database starting point "seed" - #8
• Stylize the primary header dropdown (reach ui) menu when clicking avatar - #9
• <Quantity /> needs to handle input of non-numbers - #10
• Pagination for browsing products - #11
• Sidebar filtering for product browsing - #12
• Initial Database - #13

Also, feel free to keep any personal notes in your clone at /notes.md. It's ignored in .gitignore

Exercises will not run

Bug

npm start will only compile the full app (ie: either YesterTech or ProjectPlanner) to localhost:3000

Environment:

Windows 10 with latest updates. Either latest Chrome or latest Edge browser. Latest node.js LTS with latest npm.

Steps to reproduce:

1. enter command npm start
2. make a choice leading to compile.

or: enter npm start core-v1 1 and enter 1 for 'exercise'
or: enter npm start core-v2 1 and enter 1 for 'exercise'

Add cart in the nav menu

Initial Database

Aside from #8 (which is to have a reset feature). We need more products in our database. I added three things for video games already so anyone can follow that format. Feel free to add more fields if you need. Just retroactively add them to the other products too.

We also need to have a config file that exports an object of all the enum possibilities for fields so that way the sidebar filtering can be built

`<Quantity />` needs to handle input of non-numbers

Currently the user can type any value as the quantity. Needs to be limited to numbers and saved as an actual number type, not numeric string

View Similar Products

This is a feature I definitely want to do because there's a great learning opportunity to show when a component changes it's props but doesn't unmount and then remount. Image the useEffect for the product profile page and how we always teach about cleanup for unmounted components, but this is a great feature to show "What if the product id prop changes"

The layout of the product profile page already makes tiles for a component called ProductTile. We need to design that component and then query for similar products to fill in the content

Pagination

The browse products page is ready for pagination from an API standpoint already, but we just need to create the actual page links -- we know what page we're on and total results. We're going to do 10 results per page (it's hardcoded somewhere else)

Database starting point "seed"

While developing, we're going to wreck the database. Also students might wreck it and want to reset. So it would be nice if we had a npm run db-reset or something and had a separate db file which is used to seed the real db file.

I can take this one on

ts-support branch aliases are not working.

macOS Catalina 10.15.4
NodeJS 10.15.3
NPM: 6.4.1
Yarn: 1.22.4

Steps taken:
cloned repo, fetched the ts-support branch to follow along videos using typescript. However running the command

yarn start lecture

followed by any prompt always opens up the entire complete application and never the corresponding lecture or exercise.

Swapping to master branch, the alias issue does not exist.

Steps I've tried to alleviate.
Stepped through with the debugger, I've found that the app starts up in YesterTech/entry.js with all aliases setup.
Removed node_modules and reinstalled with npm
Removed node_modules and reinstalled with yarn
Removed the package-locks/yarn.lock files and reinstalled.

Star Ratings

We need to have star ratings for the products. Having a Ratings component would be great for one of the lessons because Michael and Ryan really like their old curriculum which had start ratings.

Be sure to add this one to modules/workshop for lesson re-use. And also should use the icons from react-icons (already installed)

Reach UI combo box for Github username in signup

Currently the signup form asks for a github username and it's just an input field. We could use the Reach Combobox to get fuzzy search results. This might not enhance the app experience too much and who knows if there's a lesson we can use this component for. But it would show off more of Reach

Low priority unless someone loves it and wants to take it on

Windows users with our bash scripts

Currently we have two bash scripts that won't work for PowerShell users.

• in the package.json postinstall script we do a bash command that copies seed-db.json to db.json
• If json-server doesn't shut down for any reason, the user won't be able to npm start because the still-open json-server will be occupying port 3333. So we have an error message that suggests running our npm run kill-db, which is a bash script.

For each of these, we need a solution that works for Windows (PowerShell specifically). From what I understand after talking to some Windows users who do lots of JS work, VSCode uses PowerShell by default unless configured otherwise. Also I'm being told that PowerShell users can do all the NPM/Git stuff that bash does so for those who are good at PowerShell and prefer it, it might be difficult to ask them to use something else.

I think we can use: https://github.com/charlesguse/run-script-os
The basic idea is we'd have package.json scripts that look like this:

"kill-db": "...bash script here"
"kill-db:windows": "...powershell script here"

I just can't test it out since I don't have windows. Maybe @cassidoo can?

Windows compile

Bug

On Windows npm start from cmd or powershell will only compile the full app (ie: either YesterTech or ProjectPlanner) to localhost:3000.

Expected result:

It compiles the chosen exercise to localhost:3000

Environment:

Windows 10 with latest updates. Either latest Chrome or latest Edge browser. Latest node.js LTS with latest npm.

Note: I do not have WSL[2] installed as suggested in the Readme.md

Steps to reproduce:

1. open powershell on windows in project directory
2. enter command npm start
3. make choices in terminal that lead to webpack compile of an exercise
4. navigate to localhost:3000 in web browser

or: enter npm start core-v1 1 and enter 1 for 'exercise'
or: enter npm start core-v2 1 and enter 1 for 'exercise'

Fails to `npm i` with Node 16

First off, I'm not familiar with JavaScript so maybe this obvious but it took me a long time to figure this out. Thought I'd open an issue in case someone else sees this. Might be good to add a note to the README.

I had node installed from Homebrew. This currently installs Node 16. One of the dependencies of this project, node-sass, isn't compatible with Node 16.

After awhile, I figured out how to workaround this:

1. Uninstall Homebrew's Node: brew uninstall node
2. Install NVM. I did brew install nvm and then followed the instructions to add it to my shell.
3. Install Node 15: nvm install v15 && nvm use v15
4. After restarting your shell, you can run node -v to confirm you have Node 15 and then run npm i like normal.

Comments for the products

This feature might be nice to have but might not. We could have comments for each of the products. Maybe we only do it if it leads to the types of components or lessons that would be good for the course lessons

Search Input field is missing id={searchId}

Search Input field is missing id={searchId} in react_full-app\SearchVacationsForm.tsx

react-workshop/react/_full-app/SearchVacationsForm.tsx

Line 67 in a867be3

<input

Options for Lesson 4, lectures 1 & 2 load the wrong page on localhost

I get the default class page (screenshot below) when I try to load lesson 4 lecture 1 and lesson 4 lecture 2. Shouldn't this load something else?

These options:

[2] lecture-1-data-fetching
[3] lecture-2-layout-effects

Example output

Running Lesson: 04-side-effects/lecture-2-layout-effects
Go to: http://localhost:3000

Screenshot of localhost:3000