andrepraeiro/github-explorer

First React Project

Structures and Patterns

1. Create React App

```npx create-react-app <name> --template=typescript```

2. EditorConfig

2.1. Create .editorconfig file 2.2. trim_trailing_whitespace = true insert_final_newline = true end_of_line = lf

3.Eslint

yarn add eslint -D

3.1. Remove eslintConfig item from package.json

3.2.

yarn eslint --init

3.3. create .eslintignore file

  **/*.js
  node_modules
  build

3.4. edit eslintrc.json

3.4.1 add plugins on extends

"extends":{
"...":"...",
"plugin:@typescript-eslint/recommended"
}

3.4.2. add plugins on plugin item

"rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "react/jsx-filename-extension": [1, {"extensions": [".tsx"]}],
      "import/prefer-default-export": "off"
    }

3.5. Install plugin to react understand typescript files

` yarn add eslint-import-resolver-typescript -D `

3.5.1 create settings item on eslintrc

"settings": {
      "import/resolver": {
        "typescript":{}
      }
    }

3.5.2. To eslint accept imports of tsx files without extensions

"import/extensions": [
        "error",
        "ignorePackages",
        {
          "ts": "never",
          "tsx": "never"
        }
      ]

4.Prettier

4.1. install prettier

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

4.2. config prettier with eslint

4.2.1. Add on eslintrc item extends

prettier/@typescript-eslint
plugin:prettier/recommended

4.2.2 add on eslintrc item plugin

prettier

4.2.3 add on eslintrc item rules

"prettier/prettier":"error"

4.2.4 create prettier.config.js file

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  allowParens: 'avoid',
};

---

Creating the application

1. Create Routes

Install react-router-dom to routes management

$ yarn add react-router-dom
$ yarn add @types/react-router-dom -D

create routes folder

create in routes folder index.tsx file

---

Utilizando Styled Components

Styling the application

install styled-components

 $ yarn add styled-components
 $ yarn add @types/styled-components

install vscode-styled-components extension

title: { color: #3a3a3a; font-size: 48px}

createGlobalStyle: {

• { margin: 0; padding: 0; outline: 0; bo-sizing: border-box; } body: { background: #f0f0f5 url(${github-background} ) no-repeat 70% top -webkit-font-smoothing: antialiased; } body, input, button: { font: 16px Roboto, sans-serif } #root { max-width: 960px; margin: 0 auto; padding 40px 20px;

} button: { cursor: pointer; } }