chore(i18n,docs): processed translations (#43005)

This commit is contained in:
camperbot
2021-07-26 02:25:49 +09:00
committed by GitHub
parent c5963374cb
commit f938a9cf98
14 changed files with 645 additions and 645 deletions

View File

@@ -1,34 +1,34 @@
# Codebase Best Practices
# Práticas recomendadas da base de código
## General JavaScript
## JavaScript em geral
In most cases, our [linter](how-to-setup-freecodecamp-locally?id=follow-these-steps-to-get-your-development-environment-ready) will warn of any formatting which goes against this codebase's preferred practice.
Na maioria dos casos, nosso [linter](how-to-setup-freecodecamp-locally?id=follow-these-steps-to-get-your-development-environment-ready) avisará sobre qualquer formatação que contradiga as práticas recomendadas desta base de código.
It is encouraged to use functional components over class-based components.
Recomendamos o uso de componentes funcionais em vez de componentes baseados em classes.
## Specific TypeScript
## TypeScript em específico
### Migrating a JavaScript File to TypeScript
### Migração de um arquivo JavaScript para TypeScript
#### Retaining Git File History
#### Manutenção do histórico de arquivos do Git
Sometimes changing the file from `<filename>.js` to `<filename>.ts` (or `.tsx`) causes the original file to be deleted, and a new one created, and other times the filename just changes - in terms of Git. Ideally, we want the file history to be preserved.
Algumas vezes, alterar o arquivo de `<filename>.js` para `<filename>.ts` (ou `.tsx`) faz com que o arquivo original seja excluído e que um novo arquivo seja criado. Em outras situações simplesmente muda nos termos do Git. O ideal é preservarmos o histórico dos arquivos.
The best bet at achieving this is to:
A melhor maneira de conseguir isso é:
1. Rename the file
2. Commit with the flag `--no-verify` to prevent Husky from complaining about the lint errors
3. Refactor to TypeScript for migration, in a separate commit
1. Renomear o arquivo
2. Fazer o commit com a flag `--no-verify` para evitar que o Husky reclame de erros de lint
3. Refatorar o TypeScript para migração em um commit em separado
> [!NOTE] Editors like VSCode are still likely to show you the file has been deleted and a new one created. If you use the CLI to `git add .`, then VSCode will show the file as renamed in stage
> [!NOTE] Editores como o VSCode provavelmente mostrarão a você que o arquivo foi excluído e que um novo arquivo foi criado. Se você utilizar a CLI para `git add .`, o VSCode mostrará o arquivo como renomeado na fase de stage
### Naming Conventions
### Convenções de nomes
#### Interfaces and Types
#### Interfaces e tipos
For the most part, it is encouraged to use interface declarations over type declarations.
Na maioria dos casos, recomendamos usar declarações de interface em vez de declarações de tipo.
React Component Props - suffix with `Props`
Props de componentes do React sufixo com `Props`
```typescript
interface MyComponentProps {}
@@ -36,7 +36,7 @@ interface MyComponentProps {}
const MyComponent = (props: MyComponentProps) => {};
```
React Stateful Components - suffix with `State`
Componentes stateful do React sufixo com `State`
```typescript
interface MyComponentState {}
@@ -44,7 +44,7 @@ interface MyComponentState {}
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
```
Default - object name in PascalCase
Padrão nome do objeto em PascalCase
```typescript
interface MyObject {}
@@ -58,7 +58,7 @@ const myObject: MyObject = {};
## Redux
### Action Definitions
### Definições de ações
```typescript
enum AppActionTypes = {
@@ -73,12 +73,12 @@ export const actionFunction = (
});
```
### How to Reduce
### Como fazer a redução
```typescript
// Base reducer action without payload
// Ação de redução de base sem payload
type ReducerBase<T> = { type: T };
// Logic for handling optional payloads
// Lógica para lidar com os payloads opcionais
type ReducerPayload<T extends AppActionTypes> =
T extends AppActionTypes.actionFunction
? ReducerBase<T> & {
@@ -86,7 +86,7 @@ type ReducerPayload<T extends AppActionTypes> =
}
: ReducerBase<T>;
// Switch reducer exported to Redux combineReducers
// Trocar o redutor exportado pelos combineReducers do Redux
export const reducer = (
state: AppState = initialState,
action: ReducerPayload<AppActionTypes>
@@ -100,23 +100,23 @@ export const reducer = (
};
```
### How to Dispatch
### Como fazer o dispatch
Within a component, import the actions and selectors needed.
Em um componente, importe as ações e os seletores necessários.
```tsx
// Add type definition
// Adicione a definição de tipo
interface MyComponentProps {
actionFunction: typeof actionFunction;
}
// Connect to Redux store
// Conecte à store do Redux
const mapDispatchToProps = {
actionFunction
};
// Example React Component connected to store
// Exemplo de componente do React conectado à store
const MyComponent = ({ actionFunction }: MyComponentProps): JSX.Element => {
const handleClick = () => {
// Dispatch function
// Função de dispatch
actionFunction();
};
return <button onClick={handleClick}>freeCodeCamp is awesome!</button>;
@@ -128,7 +128,7 @@ export default connect(null, mapDispatchToProps)(MyComponent);
<!-- ### Redux Types File -->
<!-- The types associated with the Redux store state are located in `client/src/redux/types.ts`... -->
## Further Literature
## Mais informações
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
- [Documentação do TypeScript](https://www.typescriptlang.org/docs/)
- [TypeScript com a cheatsheet do React](https://github.com/typescript-cheatsheets/react#readme)