Binário é o sistema numérico no qual todos os computadores digitais são baseados. Portanto, é importante que os desenvolvedores entendam a matemática binária ou de base 2. O objetivo do Bin2Dec é fornecer prática e compreensão de como funcionam os cálculos binários.
Bin2Dec permite que o usuário digite 0's e 1's e obtenha uma conversão para decimais.
Esta versão vêm com uma funcionalidade extra que também permite a conversão de decimais para binários.
Essa aplicação foi hospedada pelo Netlify e pode ser encontrada aqui: Bin2Dec.
Essa aplicação se utiliza das seguintes tecnologias:
- TypeScript
- ReactJS
- ESLint (Padronização de código)
- Prettier (Formatação de código)
Foi possível visualizar a repetição de código sobre os componentes dos campos numéricos (inputs). Tendo isso em mente, foi possível componentizar da seguinte forma:
const NumberInput: React.FC<Props> = ({ placeholder, value, onChange }) => {
function handleChange(newValue: string) {
if (!Number.isNaN(Number(newValue))) onChange(newValue)
}
return (
<div className="input-container">
<input
value={String(value)}
onChange={e => handleChange(e.target.value)}
placeholder={placeholder}
/>
</div>
)
}
Dessa forma, pode-se respeitar o isolamento de código e criar um componente reutilizável.
Graças aos conceitos dos Hooks, foi possível respeitar um dos princípios da programação SOLID chamado Single Responsability Principle, onde cada classe/função deve ser especializada em um único assunto.
Neste caso, toda a trativa do campo binário foi isolada no hook useBinary.
const useBinary = (): ReturnType => {
const [binary, setBinary] = useState<string>()
const handleBinary = useCallback((value: string | number) => {
if (value === undefined) return
const serializedValue = String(value)
.split('')
.map(digit => Number(digit))
.filter(digit => digit <= 1)
.join('')
setBinary(oldBinary => {
if (String(value) === oldBinary) return oldBinary
return serializedValue
})
}, [])
return {
binary,
handleBinary,
}
}
Esse conceito trata-se de que, para uma entrada, uma função irá sempre retornará o mesmo resultado sem efeitos colaterais.
Neste caso, foi possível isolar o cálculo de conversão de binário para decimal, que sempre retornará o mesmo resultado dada a mesma entrada.
export default function binaryToDecimal(binary: string): number {
const binaryDigits = String(binary)
.split('')
.map(digit => Number(digit))
let convertedDecimal = 0
for (let i = 0; i < binaryDigits.length; i += 1) {
const digit = binaryDigits[i]
convertedDecimal += digit * 2 ** (binaryDigits.length - i - 1)
}
return convertedDecimal
}
- Crie um fork desse repositório,
- Crie uma branch com o nome da sua feature:
git checkout -b my-feature
- Faça um commit das suas alterações:
git commit -m 'feat: My new feature'
- Faça um push da sua branch:
git push origin my-feature
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com ❤️ por IguzinhoTV!!