O objetivo desse curso é preparar as pessoas para um ambiente que trabalhe com Squads utilizando React. Normalmente quando temos times focados em partes do produto e comum a adoção da arquitetura de Micro FrontEnd.
Layout no Figma CollabChat.fig
...
Plugins recomendados
yarn create vite chatcollab --template react-js
cd chatcollab
continua na próxima aula
#/home/rfpereira/github/live/chatcollab> git init
#/home/rfpereira/github/live/chatcollab> git remote add origin [email protected]:phaelfp/chatcollab.git
Antes de continuar vamos fazer algumas configurações para padronização de código em projetos
yarn create @eslint/config
styleesmreactNobrowserUse a popular style guide -> airbnbJSONYesPara auxiliar o eslint na padronização de código utilizamos o Prettier
Antes de fazermos esta configuração temos que instalar os plugins para nossa IDE
Abrir o vscode com o projeto #/user/rfpereira/github/lives/chatcollab>code .
Depois de instalar os plugins voltamos ao terminal para fazer a instalação do eslint config with prettier e o prettier
#/user/rfpereira/github/lives/chatcollab>yarn add -D eslint-config-prettier prettier
O parametro -D é utilizado para instalar o pacote somente em desenvolvimento.
Depois do termino da instalação abrir o arquivo .eslintrc acessar a sessão extends e adicionar "prettier" depois de "airbnb",
Depois abrir o arquivo .prettierrc e colar o código abaixo
{
"singleQuote": true,
"trailingComma": "all",
"semi": true
}Ctrl + Shift + p digitar Save without Formatting e clicar
Para verificar Ctrl + , e clicar no icon da configuração JSON no topo a direita e verificar se tem a linha "editor.formatOnSave": true, e a linha "[javascriptreact]":{"editor.defaultFormatter": "esbenp.prettier-vscode"}
Para que esta configuração siga em todos que iram trabalhar no projeto temos que copiar aa linhas mensionadas acima e no projeto criar uma pasta .vscode e dentro dela criar m arquivo settings.json e colar as linhas entre {} abrir bigodes e fechar bigodes
Para informar os plugins necessários também acompanharem o projeto é só irmos em cada Plugin clicar na engrenagem e depois em na ultima opção Add to Workspace Recommendations e depois disso será criado dentro da pasta .vscode o arquivo extensions.json
Mesmo tendo o Eslint e o Prettier instalado e configurado no Visual Code o desenvolvedor pode desablitar a sua funcionalidade Então utilizamos um recurso do Git chamada Hooks.
Navegando no diretório do projeto após ter executado o git init temos um diretório oculto (.git) dentro dele temos o diretório hooks com exemplos das ações do git que podemos fazer o hook.
Neste caso temos que utilizar o pre-commit, so que é um role fazer isso na mão então iremos utilizar uma ferramenta que já faz isso para gente que é indicada pelo vite que é o Husky sendo que tem uma forma de utiliza-lo melhor que é lint-staged
#/user/rfpereira/github/lives/chatcollab>npx mrm@2 lint-staged
Já vai instalar e configurar o lint-staged e o husky para gente ficar feliz!
Para padronizar os commits vamos utilizar o gitmoji
Para configurar o hook prepare-commit-msg para utilizar o padrão do commit
Agora vamos continuar o processo de versionamento.
#/home/rfpereira/github/live/chatcollab>git add .
#/home/rfpereira/github/live/chatcollab>git commit
Não precissa passar o -m já que vamos utilizar o gitmoji
Uma das mais utilizadas ferramentas de documentação de interface principalmente com React.
npx sb inityarn storybookDentro do projeto vamos criar um pasta dentro de src com o nome components
Vamos criar o component Title para o título de boas-vindas.
Dentro da pasta components vamos criar uma pasta Title e dentro dela vamos criar os arquivos:
Documentação do component para o Storybookimport React from 'react';
import Title from '.';
export default {
title: 'Components/Title',
component: Title,
};
const Template = (args) => <Title {...args} />;
export const Default = Template.bind({});
Default.args = {
children: 'Default',
};
export const Small = Template.bind({});
Small.args = {
children: 'Small',
};import Style from './Title.style';
const Title = function titleComponent({ children }) {
return <Style.Title>{children}</Style.Title>;
};
export default Title;import Title from './Title';
export default Title;import styled from 'styled-components';
const Style = {};
Style.Title = styled.h1`
font-size: 40px;
`;
export default Style;Esplicou o conseito de JSON e a sua extruturação como exemplo ele pegou o nome dos usuários do chat e a cor que aparece o nome do usuário.
chat.json
{
"user": "Ryhu02",
"color": "orange"
}Exemplicou como seria em xml
chat.xml
<chat>
<user>
<name>Ryhu02</name>
<color>orange</color>
</user>
</chat>Como temos que representar uma lista de usuários utilizamos o []
chat.json
{
"chat" :[
{
"name":"tostavioo",
"color":"orange"
},{
"name":"HakkoFrost",
"color":"black"
},{
"name":"Dymar",
"color":"yellow"
}
]
}Mesmo arquivo se fosse no formato XML
chat.xml
<chat>
<user>
<name>tostavioo</name>
<color>orange</color>
</user>
<user>
<name>HakkoFrost</name>
<color>black</color>
</user>
<user>
<name>Dymar</name>
<color>yellow</color>
</user>
</chat>Falou sobre a dúvida da Danicaus quando utilizar o JSON.parse() e o JSON.stringfy()
const json = '{"result": true, "count":42}';
const obj = JSON.parse(json);
// isso não funciona
// console.log(json.count);
console.log(obj.count);
console.log(obj.result);
console.log(obj);
console.log(JSON.stringfy(obj));