Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sky0621/react-v18-with-fake-api

React v18 勉強用プロジェクト
https://github.com/sky0621/react-v18-with-fake-api

emotion eslint jest ky material-ui-react prettier react react-hook-form react-query recoil scaffdog tslint typescript

Last synced: about 1 month ago
JSON representation

React v18 勉強用プロジェクト

Awesome Lists containing this project

README 

        
# react-v18-with-fake-api



## setup



### typesync



https://www.npmjs.com/package/typesync



```

$ yarn add -D typesync

```



```

$ cat package.json

{

　　・・・

  "scripts": {

　　　　・・・

    "preinstall": "typesync || :"

  },

　　・・・

```



### eslint



```

$ yarn list eslint

yarn list v1.22.10

warning Filtering by arguments is deprecated. Please use the pattern option instead.

└─ [email protected]

Done in 0.91s.

```



```

$ yarn upgrade-interactive --latest

　　・・・



$ yarn upgrade typescript@latest

　　・・・

```



```

$ yarn eslint --init

yarn run v1.22.10

$ /home/sky0621/work/src/github.com/sky0621/cv/admin/frontend/node_modules/.bin/eslint --init

You can also run this command directly using 'npm init @eslint/config'.

Need to install the following packages:

  @eslint/create-config

Ok to proceed? (y) y

✔ How would you like to use ESLint? · style

✔ What type of modules does your project use? · esm

✔ Which framework does your project use? · react

✔ Does your project use TypeScript? · No / Yes

✔ Where does your code run? · browser

✔ How would you like to define a style for your project? · guide

✔ Which style guide do you want to follow? · airbnb

✔ What format do you want your config file to be in? · JavaScript

Checking peerDependencies of eslint-config-airbnb@latest

Local ESLint installation not found.

The config that you've selected requires the following dependencies:



eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest

✔ Would you like to install them now with npm? · No / Yes

A config file was generated, but the config file itself may not follow your linting rules.

Successfully created .eslintrc.js file in /home/sky0621/work/src/github.com/sky0621/cv/admin/frontend

Done in 75.90s.

```



To check syntax, find problems, and enforce code style

JavaScript modules (import/export)

React

Yes

Browser

Use a popular style guide

Airbnb: https://github.com/airbnb/javascript

JavaScript

No



https://eslint.org/docs/user-guide/configuring/



```

$ yarn add -D eslint-plugin-react @typescript-eslint/eslint-plugin \

eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y \

eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser

```



```

$ yarn preinstall



$ yarn

```



### Prettier



```

$ yarn add -D prettier eslint-config-prettier

```



#### check



```

$ npx eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'

No rules that are unnecessary or conflict with Prettier were found.

```



### stylelint



```

$ yarn add -D stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order



$ yarn 

```



### more



```

$ yarn -D add eslint-plugin-prefer-arrow

```



### react-router:v6



https://reactrouter.com/



```

$ yarn add react-router-dom@6

```



### redux



https://redux.js.org/



```

$ yarn add redux react-redux

```



### react-hooks-form



```

$ yarn add react-hook-form

```



## tips



### React



### TypeScript



#### typeof



変数の型を取得。



```

type Person = {

  name: string;

  old: number;

};



const person: Person = {

  name: 'yamada',

  old: 22,

};



console.log(typeof ''); // string

console.log(typeof person); // object

```



#### keyof



型コンテキストで利用すると、オブジェクトのプロパティ名を抽出して、文字列リテラルのユニオン型を取得。



```

type Person = {

  name: string;

  old: number;

};



type Keys = keyof Person; // "name" | "old"



let keys: Keys;

keys = 'name'; // OK

keys = 'old'; // OK

keys = 'xxx'; // Error: Type '"xxx"' is not assignable to type '"name" | "old"'.

```