React + TypeScript + Jest + ESLint + Husky + Gatsby + Styled-Components
React + TypeScript + Jest + ESLint + Husky + Gatsby + Styled-Components

We will dive into the development of a website. So, first we need to understand what a website is and what are the minimum acceptance criteria to build a professional website.

What is a website?

“a set of related web pages located under a single domain name, typically produced by a single person or organisation.” — Oxford Languages / Google Translator

What is the minimum acceptance criteria?

I think the minimum features that all websites should have are:

Our application

Ok, until now, our application is just JS bundles files that are loaded by index.html (template file is in the public folder). It’s…


React + TypeScript + Jest + TS/ESLint + Husky
React + TypeScript + Jest + TS/ESLint + Husky

After setting up our application we need to define some tools that will help us with code quality and some best practices.

And again you need get some knowledge about:

TypeScript ESLint

Husky

Let's continue to build our app.

1. Install TypeScript ESLint

yarn add -D eslint@7.28.0 @typescript-eslint/parser@4.26.1 @typescript-eslint/eslint-plugin@4.26.1

2. Create .eslintrc.js file to setup ESLint

module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint'
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended'
]
}

3. Create .eslintignore file and ignore node_modules folder

echo node_modules >> .eslintignore

4. Also ignore .eslintrc.js

echo .eslintrc.js >> .eslintignore

5. Now let's lint our code

yarn…

O React é uma biblioteca para criação de interfaces de usuário.

Porém, existem excelentes frameworks que utilizam o React como biblioteca principal.

Por que utilizar frameworks ou bibliotecas?

Os benefícios de utilizarmos frameworks e bibliotecas no desenvolvimento de qualquer aplicação são muitos. Os frameworks e as bibliotecas resolvem grande parte dos problemas que aparecem durante o desenvolvimento de soluções digitais.

Por exemplo, para desenvolvimento de soluções frontend é comum precisarmos de uma biblioteca de componentes para interface de usuário (UI component library), de um sistema de roteamento para controlar a exibição das páginas de acordo com a URL acessada, de um sistema de renderização de arquivos…


Vamos falar sobre as soluções digitais populares atualmente.

Com a evolução das tecnologias e com o aumento extraordinário da demanda tecnológica no mundo inteiro, surgiram novas necessidades e, consequentemente novos formatos de produtos digitais.

O que antes se resumia a websites e sistemas agora é uma sopa de letrinhas que muda constantemente e vem ganhando novas palavras-chaves.

Abaixo listei algumas das principais soluções que conheço:

Website

É um conjunto de páginas web acessível através de um endereço eletrônico.

Landing Page

É uma página web desenvolvida com o objetivo de converter os visitantes, levando-os a seguir um fluxo de coleta de dados para cadastro…


A seguir temos um passo-a-passo para começar um projeto de SPA com React utilizando apenas Webpack e Babel. Não utilizaremos o Create React App.

Nota: Antes de iniciar o tutorial é necessário instalar o Node.js https://nodejs.org/.

  1. Criar pacote NPM
npm init -y

Esse comando cria o pacote utilizando as informações padrões coletadas do diretório atual (nome e urls do repositório) sem fazer perguntas.

2. Instalar as dependências de desenvolvimento

npm i webpack webpack-cli webpack-dev-server html-loader @babel/core @babel/preset-env @babel/preset-react @babel/runtime babel-loader html-webpack-plugin -D

3. Instalar as dependências da aplicação

npm i react react-dom -S

4. Criar arquivo de configuração do Webpack…

Izac Cavalheiro

Software Architecture, Front end, Back end, DevOps and more

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store