Working with the tutorial from @zachgoll - unsure how to run the ReactJS version

Hey so I’m looking at this folder here:

Downloads\tic-tac-toe-subscriber-refactor-main\tic-tac-toe-subscriber-refactor-main\react-refactor

I already looked at README.md and did yarn install && yarn dev

I still don’t know how to open the React version of this tic-tac-toe game. In the folder public there’s an index.html but opening it doesn’t do anything. I’m competent with Windows PowerShell and Linux Terminal, I’m just after some basic pointers here because I have no experience with NPM and javascript framework. How do I get it to run?

Thanks.

It kind of depends on how the project is set up but the yarn dev command should in all likelihood have opened a dev server. Usually, it will print the PORT it is running on to the console, so if it doesn’t open automatically you can go to localhost:3000 (replace 3000 as needed).

Do you have a link to the repo?

GitHub - zachgoll/tic-tac-toe-subscriber-refactor: A refactor of a YouTube subscriber’s Tic Tac Toe JS game!

It doesn’t appear to use port 3000, which file will tell me the port number?

Perhaps I can execute one of the files through PowerShell and it will give verbose output so I can see what’s wrong?

I think you need to install webpack-dev-server for webpack serve to work. You can install it as a dev dependency npm i -D webpack-dev-server


If you are only interested in the code I might suggest you create a Vite React project and transfer the code over to that instead.

npm create vite@latest

Follow the props.

Yes, not having created a project may be my problem here. I also note that the Edge developer tools suggest that the project is missing bundle.js

My previous post was flagged as spam, even though it wasn’t spam. I’ll post it to pastebin and hopefully it doesn’t get wrongfully flagged again: pastebin (dot) com (slash) imSsX4TX

It was just automatically flagged by the system cos of the link, I’ve removed the flag, sorry!

Anyway, with the project:

  • Make sure you have node installed
  • it needs to be on your $PATH, the installer should do this automatically, but check it’s working by typing node --version into a terminal once you’ve installed
  • run the command corepack enable in the terminal
  • cd into the react example directory
  • run yarn dev

Edit: What the above does is use a program that comes with node called corepack. Node has it’s own package manager tool, called npm, but there are others like yarn and pnpm. Corepack allows you to use those other ones directly without manually installing them.

oh cool now it works. I think the only thing missing was corepack.

1 Like

It’s still an experimental feature in Node, so it’s not super well documented and it’s turned off by default. Can manually install all this stuff as well but if you aren’t aware of it in the first place and the readme doesn’t explain anything it’s clear as mud!

Edit: Corepack | Node.js v20.0.0 Documentation