ReactJS Exercise Create a Tic Tac Toe Game

Just refresh my React memory by their Tutorial.

React references:

Local Storage in React: Create custom React LocalStorage Hook

Install React within the project

In the original tutorial, they use create-react-app to create a new project. But here is used Vite. Note in all cases Node.js and NPM are required.

In the snippet below we are using . to create the react project in the current directory. This will wipe all existing files in the current directory excepts the .git directory.

cd project-root-dir/
npm create vite@latest
# ✔ Project name: … .
# ✔ Current directory is not empty. Remove existing files and continue? … yes
# ✔ Select a framework: › React
# ✔ Select a variant: › JavaScript
npm install

In order to change the port of the dev-server, edit the package.json file and add the --port option to the dev script. By default the server will accept requests only at localhost but not at 127.0.0.1, no matter what is written in /etc/hosts. To change this behavior add the --host 127.0.0.1 option to the dev script. The final dev script will look like this:

"scripts": {
  "dev": "vite --port 3000 --host 127.0.0.1"
},

To start the Vite's dev-server use:

npm run dev

Next create jsconfig.json file in the root directory of the react project to enable the IntelliSense for the JavaScript files.

To build the application for production use:

npm run build

Vite references:

Vite: Options for assets building without adding hash

Prepare React for the Project

Edit the index.html file: Change the title tag, the favicon file name, etc.
Review and tweak the content of the public/ directory.
In the src/ directory keep only the files main.jsx and index.css and delete the rest. Also:
- Wipe the content of the index.css file then fill it with the starter CSS code.
- Wipe the content of the main.jsx file and then fill it with the starter code. Then add the following lines to the top of the file:
```
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
```
- Notes:
  - If you are using create-react-app then, by default, you will use index.js as JS index file of the project, but with vite the default JS index file is main.jsx.

Thats it. Run the dev-server (npm run dev) and check the result in the browser. Start following the tutorial from the Overview section.

Tailwind CSS

Install Tailwind CSS: Install TailwindCSS and its peer dependencies via npm, and then run the init command to generate both tailwind.config.cjs and postcss.config.cjs.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths: Add the paths to all of your template files in your tailwind.config.cjs file.

Add the Tailwind directives to your CSS: Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

Additional plugins and libraries:

npm i @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
npm i @headlessui/react @heroicons/react

Optional: Add the Inter font family to your index.html file:

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Then add "Inter var" to your "sans" font family in your Tailwind config - tailwind.config.cjs:

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  // ...
}

Tailwind CSS references:

Floating Components

React-LAAG references:

Floating UI references:

React Popper (this library is in maintenance mode) reference:

Deploy to Github Pages with Github Actions

Deploy to Github Pages with Github Actions references:

GH-Pages on NPM
Pragmatic Reviews on YouTube: How to deploy a React app to Github Pages with Github Actions
Tech Harvesting with Naseel on YouTube: Implement CI/CD with React.js and Github Actions and Automatically deploy with GitHub Pages!

Deploy to GitHub Pages

Install the dependencies.
```
npm i gh-pages --save-dev
```

Modify the package.json file (in this way):

{
  "name": "exc-js-react-tic-tac-toe",
  "homepage": "https://metalevel-tech.github.io/exc-js-react-tic-tac-toe",
  // ...
  "scripts": {
    // ...
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
  // ...
}

Because we will publish the application on subdirectory, we need to modify the publicPath property in the vite.config.js file:
```
// vite.config.js
export default {
  // ...
  base: "./",
  // ...
}
```
- Vite Config: Shared Options|base
- How to make SolidJS application work from a subfolder on How to dev blog
Additionally you may want to create public/404.html file to display a custom HTTP 404 Error page.
- How to Easily Make HTML Redirect to Another Page
Run the deploy command:
```
npm run deploy
```
Now on the remote repository must be created a branch named gh-pages.
Also the necessary settings must be applied on the Settings|Pages section of the repository.
Check the result in the browser: https://metalevel-tech.github.io/exc-js-react-tic-tac-toe.

Automate the deployment with GitHub Actions

Create a new file named workflow.yml in the .github/workflows directory:
- How to deploy a React app to Github Pages with Github Actions on YouTube
The workflow.yml file must be setup according to the instructions in:
- https://github.com/JamesIves/github-pages-deploy-action
- https://github.com/actions/checkout
Also the necessary settings must be applied on the Settings|Pages
...

pa4080/react-tic-tac-toe