ReactJS Exercise Create a Tic Tac Toe Game

Just refresh my React memory by their Tutorial.

• Tic Tac Toe: Final result
• Tic Tac Toe: Starter code

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

1. Edit the index.html file: Change the title tag, the favicon file name, etc.
2. Review and tweak the content of the public/ directory.
3. 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:

• Tailwind CSS is a utility-first CSS framework for rapidly building custom designs.
• Install Tailwind CSS with Vite Official Guide
• Tailwind Docs: 1) Getting Set Up, 2) Using React, 3) Resources & assets
• How To Create React and Tailwind project with Vite by Abraham Anak Agung
• How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
• How to use custom fonts in Tailwind CSS by Peter Ekene Eze on LogRocket
• HeadlessUI: Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
• Heroicons: Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS
• SVG Edit: How can I cut one shape inside another?

Floating Components

React-LAAG references:

• React-LAAG Home Page
• React-LAAG Documentation
• React-LAAG on GitHub

Floating UI references:

• Floating UI Home Page
• Floating UI Documentation #React, React Examples
• Floating UI on GitHub

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

• React Popper on GitHub
• Made with React.js React Popper Review

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

1. Install the dependencies.

   npm i gh-pages --save-dev

2. 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"
     }
     // ...
   }

3. 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

4. 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

5. Run the deploy command:

   npm run deploy

6. Now on the remote repository must be created a branch named gh-pages.

7. Also the necessary settings must be applied on the Settings|Pages section of the repository.

8. Check the result in the browser: https://metalevel-tech.github.io/exc-js-react-tic-tac-toe.

Automate the deployment with GitHub Actions

1. 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

2. 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

3. Also the necessary settings must be applied on the Settings|Pages

4. ...