epicweb-dev / react-fundamentals Goto Github PK

View Code? Open in Web Editor NEW

5.2K 5.2K 3.2K 7 MB

Material for my React Fundamentals Workshop

Home Page: https://www.epicweb.dev

License: Other

HTML 0.41% JavaScript 98.00% CSS 0.03% Dockerfile 0.01% MDX 0.03% TypeScript 1.52% Shell 0.01%

epicweb-dev kcd-edu react workshop

react-fundamentals's Introduction

React Fundamentals 🚀

Learn the foundational concepts necessary for building React applications and libraries

Learn everything you need to be effective with the fundamental building blocks of React applications. When you're finished, you'll be prepared to create React components to build excellent experiences for your app's users.

Prerequisites

Basic understanding of HTML, CSS, JavaScript, and TypeScript
Install the React DevTools

Pre-workshop Resources

Here are some resources you can read before taking the workshop to get you up to speed on some of the tools and concepts we'll be covering:

System Requirements

git v2.18 or greater
NodeJS v18 or greater
npm v8 or greater

All of these must be available in your PATH. To verify things are set up properly, you can run this:

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

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.

Setup

This is a pretty large project (it's actually many apps in one) so it can take several minutes to get everything set up the first time. Please have a strong network connection before running the setup and grab a snack.

Warning: This repo is very large. Make sure you have a good internet connection before you start the setup process. The instructions below use --depth to limit the amount you download, but if you have a slow connection, or you pay for bandwidth, you may want to find a place with a better connection.

Follow these steps to get this set up:

git clone --depth 1 https://github.com/epicweb-dev/react-fundamentals.git
cd react-fundamentals
npm run setup

If you experience errors here, please open an issue with as many details as you can offer.

The Workshop App

Learn all about the workshop app on the Epic Web Getting Started Guide.

react-fundamentals's People

Contributors

Stargazers

Watchers

Forkers

whjvenyl abdullalsaleh tobiobeck jdorfman zainzafar90 womencancode sanjeevyadavit doc22940 benmvp tmikeschu belcherj mgrinthal rhefner charliestras jamescellsct maxcodextc joejag rjpsingh joelhooks creeland zacjones93 test-driven-development stephanoah keithmatic 2rohityadav sudarshang thebstar erol-g lolo266 edper dschapman arielskap asuciu sleepyarpan marcosvega91 cindywu bcode44 iamadityap teacherstrange jalenparham97 leroyg philxavier artgoce egarrett94 josephrexme jsehull reneerich70 damewold joseluis829 josooosjf myerscw agzertuche shannonjohnstone mbeuil tcarac csgdevp lukasluecke harshmakadia nickcoleman juniordugue bsmi021 ahmedeldessouki ff6347 justaddcl felixgeelhaar tanyapowell-forks fpigeonjr bjankord apolakipso bytehala felipefabreu wordpree confirm4crit juliansci exkalybur rchinerman cpscott1 ambroseus prateekkarki jondpenton uchihasr doylerules85 danielkita dipsaus9 samirllama csoto09 qmaximillian magalopez interview-prep-forks deadly-coder123 chrisjonesdesign85 goritm stevenkabc philipjfulcher philsly sethips davidvina23414 amy1326 aprillion bstncartwright

react-fundamentals's Issues

Issues with husky command

Error with node setup:

Running the following command: npx "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9"
� Failure: System Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

This is the tail of the traceback:

6667 timing build:link:node_modules/webpack/node_modules/rimraf Completed in 349ms
6668 timing build:link Completed in 357ms
6669 info run [email protected] install node_modules/husky node husky install
6670 info run [email protected] install { code: 1, signal: null }
6671 timing reify:rollback:createSparse Completed in 15876ms
6672 timing reify:rollback:retireShallow Completed in 2237ms
6673 timing command:install Completed in 66915ms
6674 verbose stack Error: command failed
6674 verbose stack at ChildProcess. (C:\Users\jaira\AppData\Roaming\npm\node_modules\npm\node_modules@npmcli\promise-spawn\index.js:64:27)
6674 verbose stack at ChildProcess.emit (events.js:315:20)
6674 verbose stack at maybeClose (internal/child_process.js:1051:16)
6674 verbose stack at Socket. (internal/child_process.js:442:11)
6674 verbose stack at Socket.emit (events.js:315:20)
6674 verbose stack at Pipe. (net.js:670:12)
6675 verbose pkgid [email protected]
6676 verbose cwd D:\development\epicreact\react-fundamentals
6677 verbose Windows_NT 10.0.19043
6678 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\jaira\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install"
6679 verbose node v14.4.0
6680 verbose npm v7.19.1
6681 error code 1
6682 error path D:\development\epicreact\react-fundamentals\node_modules\husky
6683 error command failed
6684 error command C:\Windows\system32\cmd.exe /d /s /c node husky install
6685 error D:\development\epicreact\react-fundamentals\node_modules\please-upgrade-node\index.js:7
6685 error if (semverCompare(currentVersion, requiredVersion) === -1) {
6685 error ^
6685 error
6685 error TypeError: semverCompare is not a function
6685 error at pleaseUpgradeNode (D:\development\epicreact\react-fundamentals\node_modules\please-upgrade-node\index.js:7:7)
6685 error at Object. (D:\development\epicreact\react-fundamentals\node_modules\husky\husky.js:7:1)
6685 error at Module._compile (internal/modules/cjs/loader.js:1200:30)
6685 error at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
6685 error at Module.load (internal/modules/cjs/loader.js:1049:32)
6685 error at Function.Module._load (internal/modules/cjs/loader.js:937:14)
6685 error at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
6685 error at internal/main/run_main_module.js:17:47
6686 verbose exit 1

Inconsistent System Requirements

The System Requirements listed in the workshop say:

System Requirements
git v2 or greater
NodeJS v10 or greater
npm v6 or greater

However, when I was trying to install the repo, it gave me this error:

npx: installed 2 in 2.51s
There were errors validating the compatibility of this computer:

    This computer has [email protected] installed, but node@12 || 14 || 15 || 16 is required. Please update node: https://nodejs.org


If you would like to just ignore this error, then feel free to do so and install dependencies as you normally would in "/Users/samanthablasbalg/repos/epicreact/react-fundamentals". Just know that things may not work properly if you do...
    🚨  Failure: System Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

This was resolved by upgrading Node, but I would have done that earlier if the System Requirements had an up to date version requirement.

Reference Error: expect is not defined

Windows 10
git 2.22.0.windows.1
node 10.13.0
npm 6.14.6

Site runs but issue running tests. Wiped the folder and got the same issue on the second try as well.

C:\Source\Learn\EpicReact\react-fundamentals>npm run setup --silent
▶️ Starting workshop setup...
Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npx: installed 1 in 7.863s
▶️ Starting: System Validation
Ensuring the correct versions of tools are installed on this computer.
Running the following command: npx "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9"
npx: installed 2 in 6.96s
✅ Success: System Validation

▶️  Starting: Dependency Installation
      Installing third party code dependencies so the workshop works properly on this computer.
      Running the following command: npm install

husky > Setting up git hooks
husky > Done
added 2246 packages from 852 contributors and audited 2256 packages in 42.936s

170 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

✅  Success: Dependency Installation


▶️  Starting: Project Validation
      Running validation checks to ensure dependencies were installed properly
      Running the following command: npm run validate -s

(node:17544) ExperimentalWarning: The fs.promises API is experimental
(node:4884) ExperimentalWarning: The fs.promises API is experimental
(node:14452) ExperimentalWarning: The fs.promises API is experimental
(node:16932) ExperimentalWarning: The fs.promises API is experimental
(node:17640) ExperimentalWarning: The fs.promises API is experimental
FAIL src/tests/06.extra-2.js
● Test suite failed to run

ReferenceError: expect is not defined

  at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
  at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

FAIL src/tests/05.js
● Test suite failed to run

ReferenceError: expect is not defined

  at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
  at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

FAIL src/tests/06.extra-3.js
● Test suite failed to run

ReferenceError: expect is not defined

  at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
  at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

FAIL src/tests/07.js
● Test suite failed to run

ReferenceError: expect is not defined

  at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
  at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

FAIL src/tests/06.js
● Test suite failed to run

ReferenceError: expect is not defined

  at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
  at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

Test Suites: 5 failed, 5 total
Tests: 0 total
Snapshots: 0 total
Time: 5.546 s
Ran all test suites.
🚨 Failure: Project Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

Curious if it was related to something installed globally. Nothing jumped out at me.

npm ERR! peer dep missing: [email protected], required by [email protected]
npm ERR! peer dep missing: webpack@^2.3.0 || ^3.0.0 || ^4.0.0, required by [email protected]
npm ERR! peer dep missing: react-refresh@^0.8.2, required by @pmmmwh/[email protected]

Problem during install

Hi I have tried to install but I am getting stucked

Any Hint of what I should do ?

Unable to setup on a windows machine

Windows x64
git 2.27.0.windows.1
node v12.18.4
npm 6.14.6

setup fails in the dependency installation step with the following message

PS C:\Users\adsridha\Desktop\react-fundamentals> npm run setup --silent
▶️ Starting workshop setup...
Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npx: installed 1 in 18.375s
▶️ Starting: System Validation
Ensuring the correct versions of tools are installed on this computer.
Running the following command: npx "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9"
npx: installed 2 in 11.036s
✅ Success: System Validation

▶️  Starting: Dependency Installation
      Installing third party code dependencies so the workshop works properly on this computer.
      Running the following command: npm install
�  Failure: Dependency Installation. Please review the messages above for information on how to troubleshoot and resolve this issue.

npm run setup fails on Windows if your username has a space - "Too many arguments"

▶️  Starting workshop setup...
      Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code 129
npm ERR! command failed
npm ERR! command git clone ssh://[email protected]/bb452ffe53a5caa3600197e1d8005733.git C:\Users\Alan Lindsay\AppData\Local\npm-cache\_cacache\tmp\git-clone-3dc42b29 --recurse-submodules --depth=1 --config core.longpaths=true
npm ERR! fatal: Too many arguments.
npm ERR!
npm ERR! usage: git clone [<options>] [--] <repo> [<dir>]
npm ERR!
npm ERR!     -v, --verbose         be more verbose
npm ERR!     -q, --quiet           be more quiet
npm ERR!     --progress            force progress reporting
npm ERR!     -n, --no-checkout     don't create a checkout
npm ERR!     --bare                create a bare repository
npm ERR!     --mirror              create a mirror repository (implies bare)
npm ERR!     -l, --local           to clone from a local repository
npm ERR!     --no-hardlinks        don't use local hardlinks, always copy
npm ERR!     -s, --shared          setup as shared repository
npm ERR!     --recurse-submodules[=<pathspec>]
npm ERR!                           initialize submodules in the clone
npm ERR!     --recursive ...       alias of --recurse-submodules
npm ERR!     -j, --jobs <n>        number of submodules cloned in parallel
npm ERR!     --template <template-directory>
npm ERR!                           directory from which templates will be used
npm ERR!     --reference <repo>    reference repository
npm ERR!     --reference-if-able <repo>
npm ERR!                           reference repository
npm ERR!     --dissociate          use --reference only while cloning
npm ERR!     -o, --origin <name>   use <name> instead of 'origin' to track upstream
npm ERR!     -b, --branch <branch>
npm ERR!                           checkout <branch> instead of the remote's HEAD
npm ERR!     -u, --upload-pack <path>
npm ERR!                           path to git-upload-pack on the remote
npm ERR!     --depth <depth>       create a shallow clone of that depth
npm ERR!     --shallow-since <time>
npm ERR!                           create a shallow clone since a specific time
npm ERR!     --shallow-exclude <revision>
npm ERR!                           deepen history of shallow clone, excluding rev
npm ERR!     --single-branch       clone only one branch, HEAD or --branch
npm ERR!     --no-tags             don't clone any tags, and make later fetches not to follow them
npm ERR!     --shallow-submodules  any cloned submodules will be shallow
npm ERR!     --separate-git-dir <gitdir>
npm ERR!                           separate git dir from working tree
npm ERR!     -c, --config <key=value>
npm ERR!                           set config inside the new repository
npm ERR!     --server-option <server-specific>
npm ERR!                           option to transmit
npm ERR!     -4, --ipv4            use IPv4 addresses only
npm ERR!     -6, --ipv6            use IPv6 addresses only
npm ERR!     --filter <args>       object filtering
npm ERR!     --remote-submodules   any cloned submodules will use their remote-tracking branch   
npm ERR!     --sparse              initialize sparse-checkout file to include only files at root 

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alan Lindsay\AppData\Local\npm-cache\_logs\2021-01-13T06_53_53_933Z-debug.log
npm ERR! code 129
npm ERR! path C:\Users\Alan Lindsay\projects\learning\epic-react\react-fundamentals
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node setup

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alan Lindsay\AppData\Local\npm-cache\_logs\2021-01-13T06_53_53_982Z-debug.log

Here we go again, Google, my friend...

Error semver is not in the npm registry

I can't seem to get past the setup script. It keeps giving the same error each time.

I've tried removing and re-cloning the repo.

I've also tried the following command:

npm set registry https://registry.npmjs.org/

My environment is:

Node...14.4.0
NPM...6.14.8
Git...git version 2.21.0 (Apple Git-122)

The error is:

git clone https://github.com/kentcdodds/react-fundamentals.git
cd react-fundamentals
npm run setup --silent
Cloning into 'react-fundamentals'...
remote: Enumerating objects: 33, done.
remote: Counting objects: 100% (33/33), done.
remote: Compressing objects: 100% (33/33), done.
remote: Total 1057 (delta 20), reused 1 (delta 0), pack-reused 1024
Receiving objects: 100% (1057/1057), 1.61 MiB | 464.00 KiB/s, done.
Resolving deltas: 100% (736/736), done.
▶️  Starting workshop setup...
      Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npx: installed 1 in 3.284s
    ▶️  Starting: System Validation
          Ensuring the correct versions of tools are installed on this computer.
          Running the following command: npx "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9"
npm ERR! code E404
npm ERR! 404 Not Found - GET http://registry.npmjs.org/semver
npm ERR! 404 
npm ERR! 404  '[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'workshop-computer-validator'
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/corey/.npm/_logs/2020-10-04T05_18_22_294Z-debug.log
Install for [ 'git+https://gist.github.com/abbc32701f78fa70298d444c2303b6d9.git' ] failed with code 1
    🚨  Failure: System Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

terser-webpack-plugin throws error in project validation

Hey! I tried installing node_modules multiple times and each time it fails in Project Validation. Also tried installing the plugin as well as its dependency - terser - but to no avail. Anything I'm missing? 🙂

    ▶️  Starting: Project Validation
          Running validation checks to ensure dependencies were installed properly
          Running the following command: npm run validate -s
internal/modules/cjs/loader.js:625
  throw e;
  ^

Error: No valid exports main found for '/Users/name/epic_react/react-fundamentals/node_modules/react-scripts/node_modules/terser'
    at resolveExportsTarget (internal/modules/cjs/loader.js:622:9)
    at applyExports (internal/modules/cjs/loader.js:499:14)
    at resolveExports (internal/modules/cjs/loader.js:548:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:654:22)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
    at Function.Module._load (internal/modules/cjs/loader.js:859:27)
    at Module.require (internal/modules/cjs/loader.js:1028:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/name/epic_react/react-fundamentals/node_modules/react-scripts/node_modules/terser-webpack-plugin/dist/minify.js:5:5)
    at Module._compile (internal/modules/cjs/loader.js:1139:30) {
  code: 'MODULE_NOT_FOUND'

Double clicking "Complete and Continue" doesn't mark step as done

This issue is related to the course app rather than content but I wasn't sure where to leave this feedback 📦

Steps to reproduce:

Click "complete and continue"
Immediately after step one click the green checkmark

Expected behavior:

a. Step should be marked as done in the right panel no matter how many times we click
b. In case it's an expected "undo" behavior then it should be signaled a bit differently and/or debounced to prevent accidental double clicks 😉

Browser:

Chrome: 86.0.4240.75 (Official Build) (x86_64)

Screenshot:

Make extra credit for handling multiple fields with form-level onChange

Maybe this'll help me remember:

function handleChange(event: React.SyntheticEvent<HTMLInputElement>) {
    const {value, name} = event.target
    setState(s => ({...s, [name]: value}))

Fails if your username has spaces - "Too many arguments"

▶️  Starting workshop setup...
      Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code 129
npm ERR! command failed
npm ERR! command git clone ssh://[email protected]/bb452ffe53a5caa3600197e1d8005733.git C:\Users\Alan Lindsay\AppData\Local\npm-cache\_cacache\tmp\git-clone-3dc42b29 --recurse-submodules --depth=1 --config core.longpaths=true
npm ERR! fatal: Too many arguments.
npm ERR!
npm ERR! usage: git clone [<options>] [--] <repo> [<dir>]
npm ERR!
npm ERR!     -v, --verbose         be more verbose
npm ERR!     -q, --quiet           be more quiet
npm ERR!     --progress            force progress reporting
npm ERR!     -n, --no-checkout     don't create a checkout
npm ERR!     --bare                create a bare repository
npm ERR!     --mirror              create a mirror repository (implies bare)
npm ERR!     -l, --local           to clone from a local repository
npm ERR!     --no-hardlinks        don't use local hardlinks, always copy
npm ERR!     -s, --shared          setup as shared repository
npm ERR!     --recurse-submodules[=<pathspec>]
npm ERR!                           initialize submodules in the clone
npm ERR!     --recursive ...       alias of --recurse-submodules
npm ERR!     -j, --jobs <n>        number of submodules cloned in parallel
npm ERR!     --template <template-directory>
npm ERR!                           directory from which templates will be used
npm ERR!     --reference <repo>    reference repository
npm ERR!     --reference-if-able <repo>
npm ERR!                           reference repository
npm ERR!     --dissociate          use --reference only while cloning
npm ERR!     -o, --origin <name>   use <name> instead of 'origin' to track upstream
npm ERR!     -b, --branch <branch>
npm ERR!                           checkout <branch> instead of the remote's HEAD
npm ERR!     -u, --upload-pack <path>
npm ERR!                           path to git-upload-pack on the remote
npm ERR!     --depth <depth>       create a shallow clone of that depth
npm ERR!     --shallow-since <time>
npm ERR!                           create a shallow clone since a specific time
npm ERR!     --shallow-exclude <revision>
npm ERR!                           deepen history of shallow clone, excluding rev
npm ERR!     --single-branch       clone only one branch, HEAD or --branch
npm ERR!     --no-tags             don't clone any tags, and make later fetches not to follow them
npm ERR!     --shallow-submodules  any cloned submodules will be shallow
npm ERR!     --separate-git-dir <gitdir>
npm ERR!                           separate git dir from working tree
npm ERR!     -c, --config <key=value>
npm ERR!                           set config inside the new repository
npm ERR!     --server-option <server-specific>
npm ERR!                           option to transmit
npm ERR!     -4, --ipv4            use IPv4 addresses only
npm ERR!     -6, --ipv6            use IPv6 addresses only
npm ERR!     --filter <args>       object filtering
npm ERR!     --remote-submodules   any cloned submodules will use their remote-tracking branch   
npm ERR!     --sparse              initialize sparse-checkout file to include only files at root 

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alan Lindsay\AppData\Local\npm-cache\_logs\2021-01-13T06_53_53_933Z-debug.log
npm ERR! code 129
npm ERR! path C:\Users\Alan Lindsay\projects\learning\epic-react\react-fundamentals
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node setup

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alan Lindsay\AppData\Local\npm-cache\_logs\2021-01-13T06_53_53_982Z-debug.log

Here we go again, Google, my friend...

git-sh-setup: file not found

Hi, I have git, npm and node versions on higher than specified and PATH is also updated. installation is erroring with below

npm run setup --silent
▶️ Starting workshop setup...
Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code 1
npm ERR! Command failed: git submodule update -q --init --recursive
npm ERR! C:\Program Files\Git\mingw64/libexec/git-core\git-submodule: line 18: .: git-sh-setup: file not found
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR!
Install for [ 'git+https://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git' ] failed with code 1

Invalid link syntax on React Fundamentals Welcome webpage

Hi!

Note: I couldn't find a way to do a pull request to fix source code on the website itself.

The links to the PATH fixes paragraph here aren't valid syntax. The same links in this README in this repo are valid.

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for [windows][win-path] or [mac/linux][mac-path].

Edit: The link for requesting help by filing an issue is also invalid on the same page:

If you get any errors, please read through them and see if you can find out what the problem is. If you can't work it out on your own then please [file an issue][issue] and provide all the output from the commands you ran (even if it's a lot).

Thanks!

npm run setup --silent AND npm start silently fail on Mac

I meet the system requirements:

git v2 or greater (2.21.0)
NodeJS v10 or greater (v14.14.0)
npm v6 or greater (6.14.8)

However, the commands npm run setup --silent and npm start silently fail (see below).

I've tried to delete the repository completely from my machine and start it all over again, but no luck. Any idea what might be happening?

How to run tests on docker?

I am running the workshop on a docker container. To run the tests, I run the npm test command inside the container, but it gives the following error.

System validation failure over Node 15

I could use nvm, though.

node setup error

Trying to follow the readme instructions for react-fundamentals. It seems to be a little problematic to have a username with space in it?

Output:
PS C:\Users\Charlotte Viktorsson\code\epicReact\react-fundamentals> node setup
▶️ Starting workshop setup...
Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code ENOLOCAL
npm ERR! Could not install from "Viktorsson\AppData\Roaming\npm-cache_npx\16172" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Charlotte Viktorsson\AppData\Roaming\npm-cache_logs\2021-06-02T11_43_25_004Z-debug.log
Install for [ 'git+https://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git' ] failed with code 1

attach logfile too.
2021-06-02T11_43_25_004Z-debug.log

Error when running npm start or npm run validate

Hi Kent, I was up and running fine initially with the react fundamentals on my local, but this evening I restarted things after having done a git clean -dfx.

The error I'm getting is

Failed to compile.

./src/index.js
Error: /Users/nickytonline/dev/react-fundamentals/src/index.js: codegen.macro: Cannot find a repository URL for this workshop. Check that the package.json at "/Users/nickytonline/dev/react-fundamentals/package.json" has {"repository": {"url": "this should be set to a github URL"}} Learn more: https://www.npmjs.com/package/codegen.macro
    at Array.forEach (<anonymous>)

The error says exactly what is wrong so I added this to the package.json of the project and then everything worked fine.

  "repository": {
    "url": "https://github.com/kentcdodds/react-fundamentals"
  },

No idea why this started happening after a clean install.

node setup not working

node setup
▶️ Starting workshop setup...
Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code EBUSY
npm ERR! syscall rmdir
npm ERR! path C:\Users\George\AppData\Roaming\npm-cache_cacache\tmp\git-clone-2d9539c2
npm ERR! errno -4082
npm ERR! EBUSY: resource busy or locked, rmdir 'C:\Users\George\AppData\Roaming\npm-cache_cacache\tmp\git-clone-2d9539c2'
npm ERR! Callback called more than once.
npm ERR! code EBUSY
npm ERR! syscall rmdir
npm ERR! path C:\Users\George\AppData\Roaming\npm-cache_cacache\tmp\git-clone-d3c851a4
npm ERR! errno -4082
npm ERR! EBUSY: resource busy or locked, rmdir 'C:\Users\George\AppData\Roaming\npm-cache_cacache\tmp\git-clone-d3c851a4'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\George\AppData\Roaming\npm-cache_logs\2021-07-13T14_33_50_170Z-debug.log
Install for [ 'git+https://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git' ] failed with code 4294963214

Windows: git-sh-setup: file not found

git 2.28.0.windows.1
node 12.16.3
npm 6.14.5

$ npm run setup --silent
▶️  Starting workshop setup...
      Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code 1
npm ERR! Command failed: git submodule update -q --init --recursive
npm ERR! C:/Program Files/Git/mingw64/libexec/git-core\git-submodule: line 22: .: git-sh-setup: file not found
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jesse\AppData\Roaming\npm-cache\_logs\2020-09-29T18_27_51_194Z-debug.log
Install for [ 'git+https://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git' ] failed with code 1

I have attempted to add to my PATH as shown here: https://stackoverflow.com/questions/49256190/how-to-fix-git-sh-setup-file-not-found-in-windows

https://cdn.discordapp.com/attachments/759594468197924880/760569985768357888/unknown.png
https://cdn.discordapp.com/attachments/759594468197924880/760570170523254792/unknown.png

Backslash related? Thoughts anyone?

Tip: Set prettierrc to semi: true

A quick tip as I'm running through the first excersizes of epicreact.

Code syntax highlighting is broken for me when using the default prettierrc, as semi is set to false. I'm not sure if this is your preference, but as you can see on the "Generate DOM Nodes"-Solution video, you see that the syntax highlighting is broken because of the missing semicolons. It was confusing to me as I'm simply used to no colors = I did something wrong.

Hopefully these tips are welcome

Path names to built files are invalid in Windows

Looks like an issue of \ being interpreted as an escape character instead of a path separator.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files (x86)\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\masters\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'setup'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'presetup', 'setup', 'postsetup' ]
5 info lifecycle [email protected]~presetup: [email protected]
6 info lifecycle [email protected]~setup: [email protected]
7 verbose lifecycle [email protected]~setup: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~setup: PATH: C:\Users\masters\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\code\kcd\react-fundamentals\node_modules\.bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\adb;C:\ProgramData\chocolatey\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Common Files\Acronis\SnapAPI\;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Program Files (x86)\nodejs\;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Users\masters\AppData\Local\Programs\AdoptOpenJDK\bin;C:\Users\masters\AppData\Local\Programs\Python\Python37\Scripts\;C:\Users\masters\AppData\Local\Programs\Python\Python37\;C:\Users\masters\AppData\Local\Programs\Python\Launcher\;C:\Users\masters\.dnx\bin;C:\Users\masters\AppData\Local\Microsoft\WindowsApps;C:\Users\masters\AppData\Local\Yarn\bin;C:\Users\masters\.dotnet\tools;C:\Users\masters\AppData\Local\Microsoft\WindowsApps;C:\Users\masters\AppData\Roaming\npm
9 verbose lifecycle [email protected]~setup: CWD: C:\code\kcd\react-fundamentals
10 silly lifecycle [email protected]~setup: Args: [ '/d /s /c', 'node ./scripts/setup' ]
11 silly lifecycle [email protected]~setup: Returned: code: 1  signal: null
12 info lifecycle [email protected]~setup: Failed to exec setup script
13 verbose stack Error: [email protected] setup: `node ./scripts/setup`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\masters\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:223:5)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\masters\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:223:5)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\code\kcd\react-fundamentals
16 verbose Windows_NT 10.0.19041
17 verbose argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\masters\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "setup"
18 verbose node v12.14.1
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] setup: `node ./scripts/setup`
22 error Exit status 1
23 error Failed at the [email protected] setup script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Support for the experimental syntax 'jsx' isn't currently enabled (18:10)

This course is beginning to feel like a Linux build, nothing works out of the box.

    ▶️  Starting: Project Validation
          Running validation checks to ensure dependencies were installed properly
          Running the following command: npm run validate -s
Determining test suites to run...(node:7844) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at X:\projects\learning\epic-react\react-fundamentals\node_modules\postcss-safe-parser\node_modules\postcss\package.json. 
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

 PASS  src/__tests__/06.js        
 PASS  src/__tests__/06.extra-3.js
 PASS  src/__tests__/05.js
 PASS  src/__tests__/06.extra-2.js
 PASS  src/__tests__/07.js        

Test Suites: 5 passed, 5 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        7.146 s
Ran all test suites.
Failed to compile.

X:/projects/learning/epic-react/react-fundamentals/src/exercise/01.md (X:/projects/learning/epic-react/react-fundamentals/node_modules/babel-loader/lib!X:/projects/learning/epic-react/react-fundamentals/node_modules/mdx-loader!X:/projects/learning/epic-react/react-fundamentals/src/exercise/01.md)
SyntaxError: X:\projects\learning\epic-react\react-fundamentals\src\exercise\01.md: Support for the experimental syntax 'jsx' isn't currently enabled (18:10):

  16 |   ...props
  17 | }) {
> 18 |   return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
     |          ^
  19 |     <h1 {...{
  20 |       "id": "basic-javascript-rendered-hello-world"
  21 |     }}>{`Basic JavaScript-rendered Hello World`}</h1>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.


    🚨  Failure: Project Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.
npm ERR! code 1
npm ERR! path C:\Users\Alan Lindsay\projects\learning\epic-react\react-fundamentals
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c workshop-setup -q

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ALANLI~1\AppData\Roaming\npm-cache\_logs\2021-01-13T07_25_18_917Z-debug.lognpm ERR! code 1
npm ERR! path C:\Users\Alan Lindsay\projects\learning\epic-react\react-fundamentals
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node setup

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ALANLI~1\AppData\Roaming\npm-cache\_logs\2021-01-13T07_25_18_983Z-debug.log

Host key verification failed - Please make sure you have the correct access rights

Was so excited to get rolling on this, but alas...

Windows 10
git version 2.29.2.windows.2
node v15.5.1
npm 7.3.0

PS C:\Users\Alan Lindsay\projects\learning\epic-react\react-fundamentals> npm run setup

> @kentcdodds/[email protected] setup
> node setup

▶️  Starting workshop setup...
      Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code 128
npm ERR! command failed
npm ERR! command git ls-remote ssh://[email protected]/bb452ffe53a5caa3600197e1d8005733.git
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alan Lindsay\AppData\Local\npm-cache\_logs\2021-01-13T05_36_17_054Z-debug.log
npm ERR! code 128
npm ERR! path C:\Users\Alan Lindsay\projects\learning\epic-react\react-fundamentals
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node setup

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alan Lindsay\AppData\Local\npm-cache\_logs\2021-01-13T05_36_17_099Z-debug.log
PS C:\Users\Alan Lindsay\projects\learning\epic-react\react-fundamentals>

I'm searching for solutions now but I'm not an npm master so help is appreciated.

Project validation error while setting up the projecct

Hello, Am getting the following ES Lint error when I run the setup. Please advise.

Am using node version v10.10.0
and
npm --version 6.4.1

▶️  Starting: Project Validation
      Running validation checks to ensure dependencies were installed properly
      Running the following command: npm run validate -s

Oops! Something went wrong! :(

ESLint: 7.10.0

TypeError: createRequire is not a function
Referenced from: /code/epicreact/react-fundamentals/package.json
at Object.resolve (/code/epicreact/react-fundamentals/node_modules/eslint/lib/shared/relative-module-resolver.js:40:20)
at ConfigArrayFactory._loadExtendedShareableConfig (/code/epicreact/react-fundamentals/node_modules/eslint/lib/cli-engine/config-array-factory.js:872:39)
at ConfigArrayFactory._loadExtends (/code/epicreact/react-fundamentals/node_modules/eslint/lib/cli-engine/config-array-factory.js:776:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (/code/epicreact/react-fundamentals/node_modules/eslint/lib/cli-engine/config-array-factory.js:715:25)
at _normalizeObjectConfigDataBody.next ()
at ConfigArrayFactory._normalizeObjectConfigData (/code/epicreact/react-fundamentals/node_modules/eslint/lib/cli-engine/config-array-factory.js:660:20)
at _normalizeObjectConfigData.next ()
at ConfigArrayFactory.loadInDirectory (/code/epicreact/react-fundamentals/node_modules/eslint/lib/cli-engine/config-array-factory.js:508:28)
at CascadingConfigArrayFactory._loadConfigInAncestors (/code/epicreact/react-fundamentals/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:367:46)
at CascadingConfigArrayFactory.getConfigArrayForFile (~/code/epicreact/react-fundamentals/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:288:18)
🚨 Failure: Project Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

Exercise 1 - Use single append call

Not a huge deal at all, but just the idea of "fundamentals" made me think it would perhaps be valuable to use a single append call when doing the root extra credit work by using appendChild to add the "Hello World" div to it before appending to the DOM.

Something like...

<script type="module">
      const root = document.createElement('div');
      root.setAttribute('id', 'root');
      const div = document.createElement('div');
      div.textContent = 'Hello World';
      div.classList.add('container');
      root.appendChild(div);
      document.body.append(root);
</script>

npm set issue: SyntaxError

I've just got the epicreact course, cloned the first repo (this one) and ran npm run setup --silent

OS: Win10
npm: v7.9.0
node: v15.14.0

During set up a number of steps go well:
✅ Success: System Validation
✅ Success: Dependency Installation

Then in the project validation the tests all run succesfully, and right after I receive a syntax error:

D:/source/repos/epicreact/react-fundamentals/src/exercise/01.md (D:/source/repos/epicreact/react-fundamentals/node_modules/babel-loader/lib!D:/source/repos/epicreact/react-fundamentals/node_modules/mdx-loader!D:/source/repos/epicreact/react-fundamentals/src/exercise/01.md) SyntaxError: D:\source\repos\epicreact\react-fundamentals\src\exercise\01.md: Support for the experimental syntax 'jsx' isn't currently enabled (18:10):

> 18 |   return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">

It gives the following hint:

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

And the output ends with:
� Failure: Project Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

I checked issue #158 but that solution isn't work for me. I'm using a directory path without spaces too.

Having issue with building and starting the project

I just started the course and was able to clone and setup the project locally. I was having issues with running node setup because there is a space between my firstname and lastname and npx wasn't liking that. I was able to fix that but there seems to be another issue now when I run npm run build or npm start.

C:/Users/Nitin Rangarajan/source/repos/EpicReact/react-fundamentals/src/exercise/01.md (C:/Users/Nitin Rangarajan/source/repos/EpicReact/react-fundamentals/node_modules/babel-loader/lib!C:/Users/Nitin Ran

SyntaxError: C:\Users\Nitin Rangarajan\source\repos\EpicReact\react-fundamentals\src\exercise\01.md: Support for the experimental syntax 'jsx' isn't currently enabled (18:10):

  16 |   ...props
  17 | }) {
> 18 |   return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
     |          ^
  19 |     <h1 {...{
  20 |       "id": "basic-javascript-rendered-hello-world"
  21 |     }}>{`Basic JavaScript-rendered Hello World`}</h1>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Update React version before publishing (17.0.1)

Before publishing the next branch version, might be good to review React versions inside HTML files.
Currently 17.0.1 instead of 17.0.0, might change later...

GitHub search for files to review: https://github.com/kentcdodds/react-fundamentals/search?q=%2217.0.0%22

Error Code 1

When I run "npm run setup --silent" I get the following error.

npm ERR! code 1
npm ERR! Command failed: git submodule update -q --init --recursive
npm ERR! C:/Program Files/Git/mingw64/libexec/git-core\git-submodule: line 22: .: git-sh-setup: file not found
npm ERR!

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tboul\AppData\Roaming\npm-cache_logs\2020-10-19T21_14_48_952Z-debug.log
Install for [ 'git+https://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git' ] failed with code 1

what should I do?

React Fundamentals: Rendering Arrays "Bug" that could cause confusion

I was just playing around with the Rendering Array's exercise in React Fundamentals, and I noticed that after adding the key prop into my solution, the exercise dashboard didn't quite reload properly, and I was able to get into a state where the list of items had 2 apples!

I assume it has something to do with comparing objects, and it's probably a concession that was made so the exercise code was as simple as possible, but thought I would bring it to your attention anyway.

Steps to reproduce:

Open the Rendering Arrays solution in Chrome
Open the 07.js file in IDE
Remove the Grape item from the exercise dashboard in Chrome
Add a key prop to the li element in 07.js in your IDE
Click on add item in the exercise dashboard in Chrome

Hopefully the apple item gets added to the list, which would then result in a list with:

apple
orange
pear
apple

And the Add Item button being disabled, so we're not able to get the Grape back. Adding and removing items gets super funky after that.

Again, this is probably a tradeoff that was decided upon to keep code as simple as possible, but I still think it could be the cause of confusion for some people.

400 for `pinkie promise` when installing dependencies

git version 2.24.3 (Apple Git-128)
node: v13.14.0
npm: 6.14.4

When running npm run setup --silent
🚨 Failure: Dependency Installation. Please review the messages above for information on how to troubleshoot and resolve this issue.

Tried to run npm i after that one and I get 400 for pinkie-promise

npm ERR! code E400
npm ERR! 400 Bad Request - GET http://registry.npmjs.org/pinkie-promise

node setup leads to 403 error

git version 2.24.3
node version 10.5.0
npm version 6.4.1

I'm running into the following error when running node setup.

➜  react-fundamentals git:(main) node setup
▶️  Starting workshop setup...
      Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npx: installed 1 in 3.339s
    ▶️  Starting: System Validation
          Ensuring the correct versions of tools are installed on this computer.
          Running the following command: npx "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9"
npx: installed 2 in 5.559s
    ✅  Success: System Validation


    ▶️  Starting: Dependency Installation
          Installing third party code dependencies so the workshop works properly on this computer.
          Running the following command: npm install --legacy-peer-deps
npm ERR! code E403
npm ERR! 403 Forbidden: @types/[email protected]

errors when trying to setup/install

Have been following the readme, but can't make it work.
When trying:
git clone https://github.com/kentcdodds/react-fundamentals.git
cd react-fundamentals
node setup

node setup gives the following error even after I have tried all of its suggestions- searched for other cygwin dlls, reboot and even reinstalling cygwin:

Starting workshop setup...
Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
▶️ Starting: System Validation
Ensuring the correct versions of tools are installed on this computer.
Running the following command: npx "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9"
1 [main] basename (16816) C:\cygwin64\bin\basename.exe: *** fatal error - cygheap base mismatch detected - 0x18034C408/0x180357408.
This problem is probably due to using incompatible versions of the cygwin DLL.
Search for cygwin1.dll using the Windows Start->Find/Search facility
and delete all but the most recent version. The most recent version should
reside in x:\cygwin\bin, where 'x' is the drive on which you have
installed the cygwin distribution. Rebooting is also suggested if you
0 [main] sed (16296) C:\cygwin64\bin\sed.exe: *** fatal error - cygheap base mismatch detected - 0x18034C408/0x180357408.
This problem is probably due to using incompatible versions of the cygwin DLL.
Search for cygwin1.dll using the Windows Start->Find/Search facility
and delete all but the most recent version. The most recent version should
reside in x:\cygwin\bin, where 'x' is the drive on which you have
installed the cygwin distribution. Rebooting is also suggested if you
are unable to find another cygwin DLL.
🚨 Failure: System Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

I have then tried npm install and npm run validate and it gives the below error:

@kentcdodds/[email protected] validate

npm-run-all --parallel build test:coverage lint

'npm-run-all' is not recognized as an internal or external command,
operable program or batch file.

Would appreciate your assistance. thanks!

Font is not visible on the speed controls of the video in light mode

The font is not visible on the speed controls of the video in light mode - attached a screenshot for it!

Incorrect link when trying to edit the markdown docs

Incorrect Redirect

When trying to edit the docs in the React-fundamentals workshop, the pencil redirects to

https://github.com/kentcdodds/react-workshop-app/edit/main/src/exercise/06.md

instead of

https://github.com/kentcdodds/react-fundamentals/edit/main/src/exercise/06.md

How to replicate

Run yarn start
Go to excercise 6 (or any other excercise)
Click on the edit pencil
See the Github 404 page.

Update required version of Git to 2.13

Husky requires Git >=2.13, currently sys reqs say 2.x
https://github.com/kentcdodds/react-fundamentals#system-requirements

Test suite failed to run

When I run npm run setup --silent, the last validation fails. I get the following output on the last step:

 Running validation checks to ensure dependencies were installed properly
          Running the following command: npm run validate -s
(node:13335) ExperimentalWarning: The fs.promises API is experimental
(node:13333) ExperimentalWarning: The fs.promises API is experimental
(node:13334) ExperimentalWarning: The fs.promises API is experimental

 FAIL  src/__tests__/06.extra-2.js
  ● Test suite failed to run

    ReferenceError: expect is not defined

      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

 FAIL  src/__tests__/07.js
  ● Test suite failed to run

    ReferenceError: expect is not defined

      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

 FAIL  src/__tests__/05.js
  ● Test suite failed to run

    ReferenceError: expect is not defined

      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

 FAIL  src/__tests__/06.extra-3.js
  ● Test suite failed to run

    ReferenceError: expect is not defined

      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

 FAIL  src/__tests__/06.js
  ● Test suite failed to run

    ReferenceError: expect is not defined

      at Object.<anonymous> (node_modules/@testing-library/jest-dom/dist/extend-expect.js:7:1)
      at Object.<anonymous> (node_modules/@testing-library/jest-dom/extend-expect.js:2:1)

Test Suites: 5 failed, 5 total
Tests:       0 total
Snapshots:   0 total
Time:        4.271 s
Ran all test suites.
    🚨  Failure: Project Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

Validation not working

I can't start anything as the validation doesn't work.

Output:

D:\Code\EpicReact\react-fundamentals>npm run setup --silent
▶️ Starting workshop setup...
Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
▶️ Starting: System Validation
Ensuring the correct versions of tools are installed on this computer.
Running the following command: npx "https://gist.github.com/kentcdodds/abbc32701f78fa70298d444c2303b6d9"
🚨 Failure: System Validation. Please review the messages above for information on how to troubleshoot and resolve this issue.

D:\Code\EpicReact\react-fundamentals>npm --version
7.20.0

D:\Code\EpicReact\react-fundamentals>node --version
v14.17.3

D:\Code\EpicReact\react-fundamentals>git --version
git version 2.14.1.windows.1

CSS is inconsistent between `05.md` and `box-styles.css`

Preface by saying, I'm really enjoying the course. Thanks Kent! Find just the most minor inconsistency between the actual markdown instructions and the actual css.

For the 5th exercise, the markdown instructions show the following css

.box {
  border: 1px solid #333;
}
.box--large {
  width: 180px;
  height: 180px;
}
.box--medium {
  width: 120px;
  height: 120px;
}
.box--small {
  width: 60px;
  height: 60px;
}

But the box-styles.css file has https://github.com/kentcdodds/react-fundamentals/blob/2025be8329c8fc59c27ef813416836e8a50fa85c/src/box-styles.css#L1-L19

Where the diff is specifically

2a3,6
>   display: flex;
>   flex-direction: column;
>   justify-content: center;
>   text-align: center;
5,6c9,10
<   width: 180px;
<   height: 180px;
---
>   width: 270px;
>   height: 270px;
9,10c13,14
<   width: 120px;
<   height: 120px;
---
>   width: 180px;
>   height: 180px;
13,14c17,18
<   width: 60px;
<   height: 60px;
---
>   width: 90px;
>   height: 90px;

From some poking around in the code, I don't believe there are any instructions that suggest we should update the css styles as part of the exercise. But I'm not 100% certain. Do we want the markdown to be consistent with the actual file content? Or is this inconsistency safe to ignore?

The screen doesn't load.

I recently started the course but after the 'Project Setup' section, the following section page don't load.

Changelog

Here's what's going to be different in the next version of the react-fundamentals workshop (you can find all these changes in the next branch until the videos are re-recorded):

Everything is TypeScript. There's a new script you can run to remove the TypeScript automatically if you want: ./scripts/remove-ts.
General improvements to the workshop content based on feedback from learners
Expanded exercise 2 to include "deep nesting elements" (for more React element practices)
Expanded exercise 3 to include two new extra credits: "deep nesting elements with JSX" (for more JSX practice and contrasts nicely with the extra credit in exercise 2) and "using React Fragments" (which made a LOT more sense than tacked onto exercise 4).
Updated exercise 4: Removes prop-types extra credit and introduces props as an extra credit as well as an extra credit to prep for the new exercise 5
Added exercise 5 (shifted all exercises after this up one): "TypeScript with React"
Exercise 6 (previously 5) about styling had some general improvements and added a sizeless/colorless box to play around with as well.
Exercise 7 (previously 6) about forms has been changed quite a bit. I removed all the dynamic error stuff (will move that to the React hooks workshop and it'll focus more on accessibility as well). event.target has been changed to the more correct event.currentTarget. Added an extra credit specific to typing forms with TypeScript. Improved the extra credit about controlled form elements with a much more sensible use case.
Exercise 8 (previously 7) about rendering lists has been drastically improved. Now there's actually an exercise of writing out the .map to render the elements yourself and the explanation of the problem has been improved a lot. A lot of folks found this one a bit confusing and shallow, so I think the additional information and new blog post references will help.

test is not working

Can't install node modules

The node setup command doesn't work for me. Not a biggie, since I thought I could just run npm install and start the app running npm start. Not luck either.

I restarted the computer, removed and cloned again react-fundamentals repo.
Have run npm cache clean and npm cache verify.

Finally I get to run npm install and this is what I see:

Any ideas before I start going deeper into the rabbit hole?

git v: 2.22
node v: 12.7.0
npm v: 6.10

I don't see the "Extra Credit" tab.

Did this get removed at some point?

I just cloned the project today and am noticing that the follow along videos have a "Extra Credit" tab, and my local version doesn't show that for any of the sections:

Setup fails on validation step with jest timeout

When running the setup with npm run setup -s, the Project Validation steps fails with jest timeout.

Screenshot

Windows init does not work

Feeback form link not clickable in Firefox

The Feedback form link at the bottom of the exercise pages does not appear to be clickable in Firefox. It looks like the Workshop DevTools button may be overlaying the clickable area for the link. If I remove the Workshop DevTools div from the DOM, then the link works as expected.

I'm using Firefox v81.0 on macOS 10.15.6

Thanks!
-Dan

Enable to starting workshop setup...

Git: 2.28.0.windows.1
Node: v12.18.4
npm: 6.14.6

git clone https://github.com/kentcdodds/react-fundamentals.git
cd react-fundamentals
npm run setup --silent made this error:
Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
Error: EPERM: operation not permitted, mkdir 'C:\Users\Federica'
command not find: bb452ffe53a5caa3600197e1d8005733

I tried to reinstall git and node.js and to execute the command npx git://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git as recommended in a thread, but doesn't work.
Can someone help me, please?

UPDATE 1.
After running "npm cache clean" as admin, I retry to run "npm run setup --silent". The error now is:
Starting workshop setup...
**Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code ENOLOCAL
npm ERR! Could not install from "Zuccarello\AppData\Roaming\npm-cache_npx\10108" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Federica Zuccarello\AppData\Roaming\npm-cache_logs\2020-10-01T17_05_46_471Z-debug.log
Install for [ 'git+https://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git' ] failed with code 1**

[RESOLVED]
Problem was due to space in my user name FirstName LastName and issue is with npx. I applied following fix and everything worked just fine:
npm config set cache C:\tmp\nodejs\npm-cache --global (as admin)
than:
npm run setup --silent

npx error npm-cache does not contain a package.json file.

On Windows 10 OS
v12.18.4
npm 6.14.6
npx 6.14.6
1.I have tried the suggested npx git://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git instead of the https://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git
2. deleting package-lock.json and npm install
3. uninstalling reinstalling node.js

 ernest weems@DESKTOP-LG366MO MINGW64 ~/Documents/Development/Github-Projects/epicreact/react-fundamentals (main)
$ npm run setup --silent
▶️  Starting workshop setup...
      Running the following command: npx "https://gist.github.com/kentcdodds/bb452ffe53a5caa3600197e1d8005733" -q
npm ERR! code ENOLOCAL
npm ERR! Could not install from "weems\AppData\Roaming\npm-cache\_npx\4880" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ernest weems\AppData\Roaming\npm-cache\_logs\2020-10-03T16_15_57_058Z-debug.log
Install for [ 'git+https://gist.github.com/bb452ffe53a5caa3600197e1d8005733.git' ] failed with code 1

Any one have fix for this error ?