https://github.com/vitorserrano/reactsetup

📚 Estrutura ReactJS + Next.js, TypeScript, ESLint, Prettier, Editorconfig e Styled Components
https://github.com/vitorserrano/reactsetup

editorconfig eslint nextjs prettier reactjs styled-components typescript

Last synced: 9 days ago
JSON representation

📚 Estrutura ReactJS + Next.js, TypeScript, ESLint, Prettier, Editorconfig e Styled Components

• Host: GitHub
• URL: https://github.com/vitorserrano/reactsetup
• Owner: vitorserrano
• License: mit
• Created: 2021-01-01T20:10:51.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-02T20:51:45.000Z (about 4 years ago)
• Last Synced: 2024-11-08T08:47:01.573Z (2 months ago)
• Topics: editorconfig, eslint, nextjs, prettier, reactjs, styled-components, typescript
• Language: TypeScript
• Homepage:
• Size: 116 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





  ReactJS + NextJS setup



## :bookmark: Sobre

Este repositório é um template para projetos ReactJS com NextJS com typescript criado a partir de um [vídeo](https://www.youtube.com/watch?v=1nVUfZg2dSA&t=244s) da [Rocketseat](rocketseat.com.br).

## :rocket: Tecnologias utilizadas

- Reactjs

- Nextjs

- Typescript

- Eslint

- Prettier

- Editorconfig

- Styled Components

## :fire: Pré-requisitos

- Node.js

- NPM ou Yarn

## :zap: Como usar

1. Faça um clone desse repositório: `https://github.com/vitorserrano/reactsetup.git`

2. Instale as dependências: `npm install` ou `yarn`

3. Inicie a aplicação: `npm run dev` ou `yarn dev`

## :books: Documentação

1. Criação do projeto Reactjs + Nextjs: `yarn create next-app myApp`

2. Adicionar typescript:

   - Adicionar dependência: `yarn add typescript @types/react @types/node -D`

   - Alterar as extensões `.js` dentro de `/pages` para `.tsx`

   - Rodar o comando: `yarn dev` para aplicar o typescript

3. Adicionar Eslint + Prettier:

- Adicionar dependência **Eslint**: `yarn add eslint -D`

- Iniciar arquivo: `yarn eslint --init`

- Remover arquivo `package.json.lock` e rodar `yarn`

- Adicionar dependência **Prettier**: `yarn add prettier eslint-plugin-prettier eslint-config-prettier -D`

- Adicionar dependência Typescript ao Eslint: `yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser`

- Dentro de `eslintrc.json`:

  - Em `"extends"`adicionar:

    ```json

        "eslint:recommended",

        "plugin:react/recommended",

        "plugin:prettier/recommended",

        "plugin:@typescript-eslint/recommended",

        "prettier/@typescript-eslint",

        "prettier",

        "prettier/react"

    ```

  - Em `"plugins"` adicionar: `"prettier"`

  - Em `"rules"` adicionar: `"prettier/prettier": "error"`

- Criar `.eslintignore` e adicionar:

  ```json

  node_modules

	.next

	/*.js

  ```

 - Criar `prettier.config.js` e adicionar:

  ```javascript

      module.exports = {

        semi: true,

        singleQuote: true,

        arrowParens: "avoid",

        trailingComma: "all",

        endOfLine: "auto",

      };

  ```

4. Adicionar **Styled Components**

  - Instalar dependência: `yarn add styled-components`

  - Instalar tipagem: `yarn add @types/styled-components`

5. Adicionar **Next Images**: `yarn add next-images`

6. Adicionar **Inline React-SVG**: `yarn add babel-plugin-inline-react-svg -D`