Emoji Search clone

What is this

• Emoji Search App
• One of React official small example
• Rewritten with React Hooks and TypeScript
• Official repository -> -> -> https://github.com/ahfarmer/emoji-search

Tech Stack

Language

Package Manager

Library

Build Tool

Linter / Formatter

Project setup

1. Clone repository

$ git clone https://github.com/kitamuraDev/vite-react-ts-starter.git

2. Move to repository

$ cd vite-react-ts-starter

3. Install dependencies

$ yarn

or

$ yarn install

4. Launch application

$ yarn dev

5. Build application

$ yarn build

6. Preview build results

$ yarn preview

About Git-Hooks

Basically, when you do yarn install, yarn prepare is also executed, but if it is not executed, please execute it explicitly.

$ yarn prepare

If successful, the following settings will be written to .git/hooks/pre-commit.

#!/bin/sh
npx lint-staged

Editor Config

• Don't forget to install the VScode extension
• The location of the configuration file is Users> Username> Library> Application Support> Code> User> settings.json

Run ESLint on save

{
  "eslint.packageManager": "yarn",
  "editor.formatOnSave": false, // To avoid conflict with Prettier
  "editor.codeActionsOnSave": ["source.addMissingImports", "source.fixAll.eslint"]
}

Run Prettier on save

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  }
}

Contact

Twitter: @kitamuraDev

License

MIT