chore(i18n,docs): processed translations (#42781)
This commit is contained in:
camperbot
GitHub
@ -3,6 +3,7 @@
|
||||
- [Frequently Asked Questions](FAQ.md)
|
||||
- **Code Contribution**
|
||||
- [Set up freeCodeCamp locally](how-to-setup-freecodecamp-locally.md)
|
||||
- [Codebase best practices](codebase-best-practices.md)
|
||||
- [Open a pull request](how-to-open-a-pull-request.md)
|
||||
- [Work on coding challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Work on video challenges](how-to-help-with-video-challenges.md)
|
||||
|
||||
134
docs/i18n/chinese/codebase-best-practices.md
Normal file
134
docs/i18n/chinese/codebase-best-practices.md
Normal file
@ -0,0 +1,134 @@
|
||||
# Codebase Best Practices
|
||||
|
||||
## General JavaScript
|
||||
|
||||
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.
|
||||
|
||||
It is encouraged to use functional components over class-based components.
|
||||
|
||||
## Specific TypeScript
|
||||
|
||||
### Migrating a JavaScript File to TypeScript
|
||||
|
||||
#### Retaining Git File History
|
||||
|
||||
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.
|
||||
|
||||
The best bet at achieving this is to:
|
||||
|
||||
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
|
||||
|
||||
> [!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
|
||||
|
||||
### Naming Conventions
|
||||
|
||||
#### Interfaces and Types
|
||||
|
||||
For the most part, it is encouraged to use interface declarations over type declarations.
|
||||
|
||||
React Component Props - suffix with `Props`
|
||||
|
||||
```typescript
|
||||
interface MyComponentProps {}
|
||||
// type MyComponentProps = {};
|
||||
const MyComponent = (props: MyComponentProps) => {};
|
||||
```
|
||||
|
||||
React Stateful Components - suffix with `State`
|
||||
|
||||
```typescript
|
||||
interface MyComponentState {}
|
||||
// type MyComponentState = {};
|
||||
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
|
||||
```
|
||||
|
||||
Default - object name in PascalCase
|
||||
|
||||
```typescript
|
||||
interface MyObject {}
|
||||
// type MyObject = {};
|
||||
const myObject: MyObject = {};
|
||||
```
|
||||
|
||||
<!-- #### Redux Actions -->
|
||||
|
||||
<!-- TODO: Once refactored to TS, showcase naming convention for Reducers/Actions and how to type dispatch funcs -->
|
||||
|
||||
## Redux
|
||||
|
||||
### Action Definitions
|
||||
|
||||
```typescript
|
||||
enum AppActionTypes = {
|
||||
actionFunction = 'actionFunction'
|
||||
}
|
||||
|
||||
export const actionFunction = (
|
||||
arg: Arg
|
||||
): ReducerPayload<AppActionTypes.actionFunction> => ({
|
||||
type: AppActionTypes.actionFunction,
|
||||
payload: arg
|
||||
});
|
||||
```
|
||||
|
||||
### How to Reduce
|
||||
|
||||
```typescript
|
||||
// Base reducer action without payload
|
||||
type ReducerBase<T> = { type: T };
|
||||
// Logic for handling optional payloads
|
||||
type ReducerPayload<T extends AppActionTypes> =
|
||||
T extends AppActionTypes.actionFunction
|
||||
? ReducerBase<T> & {
|
||||
payload: AppState['property'];
|
||||
}
|
||||
: ReducerBase<T>;
|
||||
|
||||
// Switch reducer exported to Redux combineReducers
|
||||
export const reducer = (
|
||||
state: AppState = initialState,
|
||||
action: ReducerPayload<AppActionTypes>
|
||||
): AppState => {
|
||||
switch (action.type) {
|
||||
case AppActionTypes.actionFunction:
|
||||
return { ...state, property: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### How to Dispatch
|
||||
|
||||
Within a component, import the actions and selectors needed.
|
||||
|
||||
```tsx
|
||||
// Add type definition
|
||||
interface MyComponentProps {
|
||||
actionFunction: typeof actionFunction;
|
||||
}
|
||||
// Connect to Redux store
|
||||
const mapDispatchToProps = {
|
||||
actionFunction
|
||||
};
|
||||
// Example React Component connected to store
|
||||
const MyComponent = ({ actionFunction }: MyComponentProps): JSX.Element => {
|
||||
const handleClick = () => {
|
||||
// Dispatch function
|
||||
actionFunction();
|
||||
};
|
||||
return <button onClick={handleClick}>freeCodeCamp is awesome!</button>;
|
||||
};
|
||||
|
||||
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
|
||||
|
||||
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
@ -18,7 +18,7 @@ We also support Windows 10 via WSL2, which you can prepare by [reading this guid
|
||||
|
||||
Some community members also develop on Windows 10 natively with Git for Windows (Git Bash), and other tools installed on Windows. We do not have official support for such a setup at this time, we recommend using WSL2 instead.
|
||||
|
||||
**Prerequisites:**
|
||||
#### Prerequisites:
|
||||
|
||||
| Prerequisite | Version | Notes |
|
||||
| --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------- |
|
||||
@ -39,7 +39,7 @@ npm -v
|
||||
|
||||
Once you have the prerequisites installed, you need to prepare your development environment. This is common for many development workflows, and you will only need to do this once.
|
||||
|
||||
**Follow these steps to get your development environment ready:**
|
||||
##### Follow these steps to get your development environment ready:
|
||||
|
||||
1. Install [Git](https://git-scm.com/) or your favorite Git client, if you haven't already. Update to the latest version; the version that came bundled with your OS may be outdated.
|
||||
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
- [Preguntas más frecuentes](FAQ.md)
|
||||
- **Contribución de Código**
|
||||
- [Configurar freeCodeCamp localmente](how-to-setup-freecodecamp-locally.md)
|
||||
- [Abrir una pull request](how-to-open-a-pull-request.md)
|
||||
- [Trabajar en los desafíos de código](how-to-work-on-coding-challenges.md)
|
||||
- [Trabajar en los desafíos de video](how-to-help-with-video-challenges.md)
|
||||
- [ Trabajar en el tema de noticias](how-to-work-on-the-news-theme.md)
|
||||
- [Trabajar en el tema de docs](how-to-work-on-the-docs-theme.md)
|
||||
- [Codebase best practices](codebase-best-practices.md)
|
||||
- [Open a pull request](how-to-open-a-pull-request.md)
|
||||
- [Work on coding challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Work on video challenges](how-to-help-with-video-challenges.md)
|
||||
- [Work on the news theme](how-to-work-on-the-news-theme.md)
|
||||
- [Work on the docs theme](how-to-work-on-the-docs-theme.md)
|
||||
- [Work on practice projects](how-to-work-on-practice-projects.md)
|
||||
- **Contribución a Traducción**
|
||||
- [Work on translating resources](how-to-translate-files.md)
|
||||
|
||||
134
docs/i18n/espanol/codebase-best-practices.md
Normal file
134
docs/i18n/espanol/codebase-best-practices.md
Normal file
@ -0,0 +1,134 @@
|
||||
# Codebase Best Practices
|
||||
|
||||
## General JavaScript
|
||||
|
||||
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.
|
||||
|
||||
It is encouraged to use functional components over class-based components.
|
||||
|
||||
## Specific TypeScript
|
||||
|
||||
### Migrating a JavaScript File to TypeScript
|
||||
|
||||
#### Retaining Git File History
|
||||
|
||||
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.
|
||||
|
||||
The best bet at achieving this is to:
|
||||
|
||||
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
|
||||
|
||||
> [!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
|
||||
|
||||
### Naming Conventions
|
||||
|
||||
#### Interfaces and Types
|
||||
|
||||
For the most part, it is encouraged to use interface declarations over type declarations.
|
||||
|
||||
React Component Props - suffix with `Props`
|
||||
|
||||
```typescript
|
||||
interface MyComponentProps {}
|
||||
// type MyComponentProps = {};
|
||||
const MyComponent = (props: MyComponentProps) => {};
|
||||
```
|
||||
|
||||
React Stateful Components - suffix with `State`
|
||||
|
||||
```typescript
|
||||
interface MyComponentState {}
|
||||
// type MyComponentState = {};
|
||||
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
|
||||
```
|
||||
|
||||
Default - object name in PascalCase
|
||||
|
||||
```typescript
|
||||
interface MyObject {}
|
||||
// type MyObject = {};
|
||||
const myObject: MyObject = {};
|
||||
```
|
||||
|
||||
<!-- #### Redux Actions -->
|
||||
|
||||
<!-- TODO: Once refactored to TS, showcase naming convention for Reducers/Actions and how to type dispatch funcs -->
|
||||
|
||||
## Redux
|
||||
|
||||
### Action Definitions
|
||||
|
||||
```typescript
|
||||
enum AppActionTypes = {
|
||||
actionFunction = 'actionFunction'
|
||||
}
|
||||
|
||||
export const actionFunction = (
|
||||
arg: Arg
|
||||
): ReducerPayload<AppActionTypes.actionFunction> => ({
|
||||
type: AppActionTypes.actionFunction,
|
||||
payload: arg
|
||||
});
|
||||
```
|
||||
|
||||
### How to Reduce
|
||||
|
||||
```typescript
|
||||
// Base reducer action without payload
|
||||
type ReducerBase<T> = { type: T };
|
||||
// Logic for handling optional payloads
|
||||
type ReducerPayload<T extends AppActionTypes> =
|
||||
T extends AppActionTypes.actionFunction
|
||||
? ReducerBase<T> & {
|
||||
payload: AppState['property'];
|
||||
}
|
||||
: ReducerBase<T>;
|
||||
|
||||
// Switch reducer exported to Redux combineReducers
|
||||
export const reducer = (
|
||||
state: AppState = initialState,
|
||||
action: ReducerPayload<AppActionTypes>
|
||||
): AppState => {
|
||||
switch (action.type) {
|
||||
case AppActionTypes.actionFunction:
|
||||
return { ...state, property: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### How to Dispatch
|
||||
|
||||
Within a component, import the actions and selectors needed.
|
||||
|
||||
```tsx
|
||||
// Add type definition
|
||||
interface MyComponentProps {
|
||||
actionFunction: typeof actionFunction;
|
||||
}
|
||||
// Connect to Redux store
|
||||
const mapDispatchToProps = {
|
||||
actionFunction
|
||||
};
|
||||
// Example React Component connected to store
|
||||
const MyComponent = ({ actionFunction }: MyComponentProps): JSX.Element => {
|
||||
const handleClick = () => {
|
||||
// Dispatch function
|
||||
actionFunction();
|
||||
};
|
||||
return <button onClick={handleClick}>freeCodeCamp is awesome!</button>;
|
||||
};
|
||||
|
||||
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
|
||||
|
||||
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
@ -18,7 +18,7 @@ También soportamos Windows 10 a través de WSL2, que puedes preparar [leyendo e
|
||||
|
||||
Algunos miembros de la comunidad también desarrollan en Windows 10 nativamente con Git for Windows (Git Bash), y otras herramientas instaladas en Windows. No tenemos soporte oficial para dicha configuración en este momento, así que recomendamos usar WSL2 en su lugar.
|
||||
|
||||
**Requisitos previos:**
|
||||
#### Prerequisites:
|
||||
|
||||
| Prerrequisito | Versión | Notas |
|
||||
| ----------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------- |
|
||||
@ -28,7 +28,7 @@ Algunos miembros de la comunidad también desarrollan en Windows 10 nativamente
|
||||
|
||||
> [!ATTENTION] If you have a different version, please install the recommended version. Sólo podemos soportar problemas de instalación para las versiones recomendadas. Ver [resolución de problemas](#troubleshooting) para más detalles.
|
||||
|
||||
Si Node.js ya está instalado en su máquina, ejecute los siguientes comandos para validar las versiones:
|
||||
If Node.js is already installed on your machine, run the following commands to validate the versions:
|
||||
|
||||
```console
|
||||
node -v
|
||||
@ -37,9 +37,9 @@ npm -v
|
||||
|
||||
> [!TIP] Recomendamos encarecidamente actualizar a las últimas versiones estables del software mencionado anteriormente, también conocidas como versiones de soporte a largo plazo (LTS).
|
||||
|
||||
Una vez que tenga los requisitos previos instalados, necesitará preparar su entorno de desarrollo. Esto es común para muchos flujos de trabajo de desarrollo, y sólo tendrá que hacerlo una vez.
|
||||
Once you have the prerequisites installed, you need to prepare your development environment. This is common for many development workflows, and you will only need to do this once.
|
||||
|
||||
**Sigue estos pasos para preparar tu entorno de desarrollo:**
|
||||
##### Follow these steps to get your development environment ready:
|
||||
|
||||
1. Instala [Git](https://git-scm.com/) o tu cliente Git favorito, si aún no lo has hecho. Actualice a la última versión; la versión que viene empaquetada con su sistema operativo puede estar desactualizada.
|
||||
|
||||
@ -57,15 +57,15 @@ Una vez que tenga los requisitos previos instalados, necesitará preparar su ent
|
||||
|
||||
## Bifurcar el repositorio en GitHub
|
||||
|
||||
[Bifurcar](https://help.github.com/articles/about-forks/) es un paso donde obtienes tu propia copia del repositorio principal de freeCodeCamp (también conocido como _repo_) en GitHub.
|
||||
[Forking](https://help.github.com/articles/about-forks/) is a step where you get your own copy of freeCodeCamp's main repository (a.k.a _repo_) on GitHub.
|
||||
|
||||
Esto es esencial, ya que te permite trabajar en tu propia copia de freeCodeCamp en GitHub, o para descargar (clonar) su repositorio para trabajar localmente. Después, podrá solicitar cambios para que se muestren en el repositorio principal de su bifurcación (fork) a través de una pull request (PR).
|
||||
This is essential, as it allows you to work on your own copy of freeCodeCamp on GitHub, or to download (clone) your repository to work on locally. Later, you will be able to request changes to be pulled into the main repository from your fork via a pull request (PR).
|
||||
|
||||
> [!TIP] El repositorio principal en `https://github.com/freeCodeCamp/freeCodeCamp` es frecuentemente conocido como el repositorio `upstream`.
|
||||
>
|
||||
> Tu fork en `https://github.com/YOUR_USER_NAME/freeCodeCamp` suele referirse como el repositorio `origin`. `YOUR_USER_NAME` será remplazado con tu nombre de usuario de GitHub.
|
||||
|
||||
**Sigue estos pasos para fork el repositorio `https://github.com/freeCodeCamp/freeCodeCamp`:**
|
||||
**Follow these steps to fork the `https://github.com/freeCodeCamp/freeCodeCamp` repository:**
|
||||
|
||||
1. Ve al repositorio freeCodeCamp en GitHub: <https://github.com/freeCodeCamp/freeCodeCamp>
|
||||
|
||||
@ -75,22 +75,22 @@ Esto es esencial, ya que te permite trabajar en tu propia copia de freeCodeCamp
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Cómo bifurcar freeCodeCamp en GitHub (captura de pantalla)
|
||||
How to fork freeCodeCamp on GitHub (screenshot)
|
||||
</summary>
|
||||
|
||||
<br>
|
||||
<img src="https://raw.githubusercontent.com/freeCodeCamp/freeCodeCamp/main/docs/images/github/how-to-fork-freeCodeCamp.gif" alt="Cómo bifurcar freeCodeCamp en GitHub" />
|
||||
<img src="https://raw.githubusercontent.com/freeCodeCamp/freeCodeCamp/main/docs/images/github/how-to-fork-freeCodeCamp.gif" alt="How to fork freeCodeCamp on GitHub" />
|
||||
</details>
|
||||
|
||||
## Clona tu bifurcación desde GitHub
|
||||
|
||||
[Clonando](https://help.github.com/articles/cloning-a-repository/) es donde **descarga** una copia de un repositorio desde una ubicación `remota` que es propiedad de usted o de otra persona. En su caso, esta ubicación remota es su `fork` del repositorio de freeCodeCamp que debería estar disponible en `https://github.com/YOUR_USER_NAME/freeCodeCamp`. (`YOUR_USER_NAME` would be replaced with your GitHub user name.)
|
||||
[Cloning](https://help.github.com/articles/cloning-a-repository/) is where you **download** a copy of a repository from a `remote` location that is either owned by you or by someone else. In your case, this remote location is your `fork` of freeCodeCamp's repository that should be available at `https://github.com/YOUR_USER_NAME/freeCodeCamp`. (`YOUR_USER_NAME` would be replaced with your GitHub user name.)
|
||||
|
||||
> [!WARNING] If you are working on a WSL2 Linux Distro, you might get performance and stability issues by running this project in a folder which is shared between Windows and WSL2 (e.g. `/mnt/c/Users/`). Therefore we recommend to clone this repo into a folder which is mainly used by your WSL2 Linux Distro and not directly shared with Windows (e.g. `~/PROJECTS/`).
|
||||
>
|
||||
> See [this GitHub Issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/40632) for further Information about this problem.
|
||||
|
||||
Ejecutar estos comandos en su máquina local:
|
||||
Run these commands on your local machine:
|
||||
|
||||
1. Abrir una Terminal / Símbolo del sistema / Shell en el directorio de proyectos
|
||||
|
||||
@ -102,17 +102,17 @@ Ejecutar estos comandos en su máquina local:
|
||||
git clone --depth=1 https://github.com/YOUR_USER_NAME/freeCodeCamp.git
|
||||
```
|
||||
|
||||
Esto descargará todo el repositorio freeCodeCamp a su directorio de proyectos.
|
||||
This will download the entire freeCodeCamp repository to your projects directory.
|
||||
|
||||
Nota: `--depth=1` crea un clon superficial de tu bifurcación, con solo la historia más reciente/commit.
|
||||
Note: `--depth=1` creates a shallow clone of your fork, with only the most recent history/commit.
|
||||
|
||||
## Configurar sincronización desde el padre
|
||||
|
||||
Ahora que ha descargado una copia de su bifurcación, necesitará configurar un `upstream` remoto en el repositorio padre.
|
||||
Now that you have downloaded a copy of your fork, you will need to set up an `upstream` remote to the parent repository.
|
||||
|
||||
[Como se mencionó anteriormente](#fork-the-repository-on-github), el repositorio principal es referido `repositorio upstream`. Su bifurcación conocida como repositorio de `origen`.
|
||||
[As mentioned earlier](#fork-the-repository-on-github), the main repository is referred `upstream` repository. Your fork referred to as the `origin` repository.
|
||||
|
||||
Necesita una referencia de su clon local al repositorio `upstream` además del repositorio `origin`. Esto es para que pueda sincronizar los cambios desde el repositorio principal sin el requisito de bifurcar y clonar repetidamente.
|
||||
You need a reference from your local clone to the `upstream` repository in addition to the `origin` repository. This is so that you can sync changes from the main repository without the requirement of forking and cloning repeatedly.
|
||||
|
||||
1. Cambiar directorio al nuevo directorio de freeCodeCamp:
|
||||
|
||||
@ -143,13 +143,13 @@ Necesita una referencia de su clon local al repositorio `upstream` además del r
|
||||
|
||||
## Ejecutando freeCodeCamp localmente
|
||||
|
||||
Ahora que tienes una copia local de freeCodeCamp, puedes seguir estas instrucciones para ejecutarla localmente. Esto le permitirá:
|
||||
Now that you have a local copy of freeCodeCamp, you can follow these instructions to run it locally. This will allow you to:
|
||||
|
||||
- Vista previa de ediciones a páginas como aparecerían en la plataforma de aprendizaje.
|
||||
- Trabajar en temas y mejoras relacionados con la IU.
|
||||
- Depurar y arreglar problemas con los servidores de aplicaciones y aplicaciones cliente.
|
||||
|
||||
Si tiene problemas, primero realice una búsqueda web para su problema y compruebe si ya ha sido respondida. Si no encuentra una solución, por favor busque en nuestra página [GitHub issues](https://github.com/freeCodeCamp/freeCodeCamp/issues) para una solución e infórmese del problema si aún no ha sido reportado.
|
||||
If you do run into issues, first perform a web search for your issue and see if it has already been answered. If you cannot find a solution, please search our [GitHub issues](https://github.com/freeCodeCamp/freeCodeCamp/issues) page for a solution and report the issue if it has not yet been reported.
|
||||
|
||||
And as always, feel free to ask questions on the ['Contributors' category on our forum](https://forum.freecodecamp.org/c/contributors) or [our chat server](https://chat.freecodecamp.org/home).
|
||||
|
||||
@ -161,9 +161,9 @@ And as always, feel free to ask questions on the ['Contributors' category on our
|
||||
|
||||
### Configurando dependencias
|
||||
|
||||
#### Paso 1: Configurar el archivo de variable de entorno
|
||||
#### Step 1: Set up the environment variable file
|
||||
|
||||
Las claves de la API por defecto y las variables de entorno se almacenan en el archivo `sample.env`. El contenido de este archivo necesita ser copiado a un nuevo archivo llamado `.env` para que se acceda dinámicamente durante el paso de la instalación.
|
||||
The default API keys and environment variables are stored in the file `sample.env`. This file needs to be copied to a new file named `.env` that is accessed dynamically during the installation step.
|
||||
|
||||
```console
|
||||
# Crear una copia de la "sample.env" y nombrarla ".env".
|
||||
@ -176,25 +176,25 @@ cp sample.env .env
|
||||
copy sample.env .env
|
||||
```
|
||||
|
||||
Las llaves dentro del archivo `.env` _no_ requieren ser cambiadas para correr la aplicación de forma local. Puedes dejar los valores por defecto copiados desde `sample.env` tal cual.
|
||||
The keys in the `.env` file are _not_ required to be changed to run the app locally. You can leave the default values copied over from `sample.env` as-is.
|
||||
|
||||
> [!TIP] Keep in mind if you want to use services like Auth0 or Algolia, you'll have to acquire your own API keys for those services and edit the entries accordingly in the `.env` file.
|
||||
|
||||
#### Paso 2: Instalar dependencias
|
||||
#### Step 2: Install dependencies
|
||||
|
||||
Este paso instalará las dependencias necesarias para que la aplicación se ejecute:
|
||||
This step will install the dependencies required for the application to run:
|
||||
|
||||
```console
|
||||
npm ci
|
||||
```
|
||||
|
||||
#### Paso 3: Iniciar MongoDB y sembrar la base de datos
|
||||
#### Step 3: Start MongoDB and seed the database
|
||||
|
||||
Antes de que pueda ejecutar la aplicación localmente, necesitará iniciar el servicio MongoDB.
|
||||
Before you can run the application locally, you will need to start the MongoDB service.
|
||||
|
||||
> [!NOTE] Unless you have MongoDB running in a setup different than the default, the URL stored as the `MONGOHQ_URL` value in the `.env` file should work fine. If you are using a custom configuration, modify this value as needed.
|
||||
|
||||
Iniciar el servidor MongoDB en un terminal separado:
|
||||
Start the MongoDB server in a separate terminal:
|
||||
|
||||
- En macOS & Ubuntu:
|
||||
|
||||
@ -212,21 +212,21 @@ Iniciar el servidor MongoDB en un terminal separado:
|
||||
|
||||
> [!TIP] You can avoid having to start MongoDB every time by installing it as a background service. You can [learn more about it in their documentation for your OS](https://docs.mongodb.com/manual/administration/install-community/)
|
||||
|
||||
A continuación, vamos a sembrar la base de datos. En este paso, ejecutamos el siguiente comando que llena el servidor MongoDB con algunos conjuntos de datos iniciales que son requeridos por los servicios. Estos incluyen algunos esquemas, entre otras cosas.
|
||||
Next, let's seed the database. In this step, we run the below command that fills the MongoDB server with some initial data sets that are required by services. These include a few schemas, among other things.
|
||||
|
||||
```console
|
||||
npm run seed
|
||||
```
|
||||
|
||||
#### Paso 4: Iniciar la aplicación cliente freeCodeCamp y el servidor de API
|
||||
#### Step 4: Start the freeCodeCamp client application and API server
|
||||
|
||||
Ahora puede iniciar el servidor API y las aplicaciones cliente.
|
||||
You can now start up the API server and the client applications.
|
||||
|
||||
```console
|
||||
npm run develop
|
||||
```
|
||||
|
||||
Este único comando lanzará todos los servicios, incluyendo el servidor API y las aplicaciones cliente disponibles para que usted trabaje.
|
||||
This single command will fire up all the services, including the API server and the client applications available for you to work on.
|
||||
|
||||
> [!NOTE] Once ready, open a web browser and **visit <http://localhost:8000>**. If the app loads, congratulations – you're all set! You now have a copy of freeCodeCamp's entire learning platform running on your local machine.
|
||||
|
||||
@ -236,26 +236,26 @@ Este único comando lanzará todos los servicios, incluyendo el servidor API y l
|
||||
|
||||
## Iniciar sesión con un usuario local
|
||||
|
||||
Su configuración local automáticamente rellena un usuario local en la base de datos. Al hacer clic en el botón `Iniciar sesión` se autenticará automáticamente en la aplicación local.
|
||||
Your local setup automatically populates a local user in the database. Clicking the `Sign In` button will automatically authenticate you into the local application.
|
||||
|
||||
Sin embargo, acceder a la página del portafolio de usuarios es un poco complicado. En desarrollo, Gatsby se hace cargo de servir las páginas del lado del cliente y por lo tanto obtendrás una página `404` para el portafolio de usuarios cuando trabajes localmente.
|
||||
However, accessing the user portfolio page is a little tricky. In development, Gatsby takes over serving the client-side pages and hence you will get a `404` page for the user portfolio when working locally.
|
||||
|
||||
Simplemente haga clic en el botón **"Vista previa de página 404 personalizada"** le redirigirá a la página correcta.
|
||||
Simply clicking the **"Preview Custom 404 Page"** button will forward you to the correct page.
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Cómo iniciar sesión cuando se trabaja localmente (captura de pantalla)
|
||||
How to sign in when working locally (screenshot)
|
||||
</summary>
|
||||
|
||||
<br>
|
||||
<img src="https://user-images.githubusercontent.com/29990697/71541249-f63cdf00-2923-11ea-8a85-cefb6f9c9977.gif" alt="Cómo iniciar sesión cuando se trabaja localmente" />
|
||||
<img src="https://user-images.githubusercontent.com/29990697/71541249-f63cdf00-2923-11ea-8a85-cefb6f9c9977.gif" alt="How to sign in when working locally" />
|
||||
</details>
|
||||
|
||||
## Haciendo cambios localmente
|
||||
|
||||
Ahora puede hacer cambios en archivos y confirmar los cambios en su clon local de su bifurcación.
|
||||
You can now make changes to files and commit your changes to your local clone of your fork.
|
||||
|
||||
Siga estos pasos:
|
||||
Follow these steps:
|
||||
|
||||
1. Validate that you are on the `main` branch:
|
||||
|
||||
@ -446,11 +446,11 @@ Siga estos pasos:
|
||||
|
||||
## Proponer una Pull Request (PR)
|
||||
|
||||
Después de que hayas cometido tus cambios, consulta aquí [cómo abrir una Pull Request](how-to-open-a-pull-request.md).
|
||||
After you've committed your changes, check here for [how to open a Pull Request](how-to-open-a-pull-request.md).
|
||||
|
||||
## Referencia de comandos rápidos
|
||||
|
||||
Una referencia rápida a los comandos que necesitará cuando trabaje localmente.
|
||||
A quick reference to the commands that you will need when working locally.
|
||||
|
||||
| comando | descripción |
|
||||
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
||||
@ -474,9 +474,9 @@ Una referencia rápida a los comandos que necesitará cuando trabaje localmente.
|
||||
|
||||
We regularly develop on the latest or most popular operating systems like macOS 10.15 or later, Ubuntu 18.04 or later, and Windows 10 (with WSL2).
|
||||
|
||||
It is recommended to research your specific issue on resources such as Google, Stack Overflow, and Stack Exchange. Existe una buena posibilidad de que alguien se haya enfrentado al mismo problema y ya haya una respuesta a su pregunta específica.
|
||||
It is recommended to research your specific issue on resources such as Google, Stack Overflow, and Stack Exchange. There is a good chance that someone has faced the same issue and there is already an answer to your specific query.
|
||||
|
||||
Si estás en un sistema operativo diferente y/o todavía tienes problemas, consulta [obtener ayuda](#getting-help).
|
||||
If you are on a different OS and/or are still running into issues, see [getting help](#getting-help).
|
||||
|
||||
> [!WARNING]
|
||||
>
|
||||
@ -484,7 +484,7 @@ Si estás en un sistema operativo diferente y/o todavía tienes problemas, consu
|
||||
|
||||
### Issues with the UI, Fonts, build errors, etc.
|
||||
|
||||
Si usted se enfrenta a problemas con la interfaz de usuario, fuentes o ver errores de compilación, una limpieza puede ser útil:
|
||||
If you face issues with the UI, Fonts or see builds errors a cleanup can be useful:
|
||||
|
||||
```console
|
||||
npm run clean
|
||||
@ -493,15 +493,15 @@ npm run seed
|
||||
npm run develop
|
||||
```
|
||||
|
||||
O
|
||||
OR
|
||||
|
||||
Usar el acceso directo
|
||||
Use the shortcut
|
||||
|
||||
```
|
||||
npm run clean-and-develop
|
||||
```
|
||||
|
||||
Si continúa enfrentándose a problemas con la construcción, se recomienda limpiar el espacio de trabajo.
|
||||
If you continue to face issues with the build, cleaning up the workspace is recommend.
|
||||
|
||||
Use `git clean` in interactive mode:
|
||||
|
||||
@ -511,18 +511,18 @@ git clean -ifdX
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Cómo limpiar archivos sin seguimiento de git (captura de pantalla)
|
||||
How to clean git untracked files (screenshot)
|
||||
</summary>
|
||||
|
||||
<br>
|
||||
<img src="https://user-images.githubusercontent.com/1884376/94270515-ca579400-ff5d-11ea-8ff1-152cade31654.gif" alt="Cómo limpiar archivos sin seguimiento de git" />
|
||||
<img src="https://user-images.githubusercontent.com/1884376/94270515-ca579400-ff5d-11ea-8ff1-152cade31654.gif" alt="How to clean git untracked files" />
|
||||
</details>
|
||||
|
||||
### Issues with API, login, Challenge Submissions, etc.
|
||||
|
||||
Si no puedes iniciar sesión, y en su lugar ves un banner con un mensaje de error que será reportado a freeCodeCamp, por favor, comprueba que tu puerto local `3000` no esté en uso por un programa diferente.
|
||||
If you can't sign in, and instead you see a banner with an error message that it will be reported to freeCodeCamp, please double-check that your local port `3000` is not in use by a different program.
|
||||
|
||||
**En Linux / macOS / WSL en Windows - Desde la terminal:**
|
||||
**On Linux / macOS / WSL on Windows - From Terminal:**
|
||||
|
||||
```console
|
||||
netstat -a | grep "3000"
|
||||
@ -530,7 +530,7 @@ netstat -a | grep "3000"
|
||||
tcp4 0 0 0.0.0.0:3000 DESKTOP LISTEN
|
||||
```
|
||||
|
||||
**En Windows - Desde PowerShell despegado:**
|
||||
**On Windows - From Elevated PowerShell:**
|
||||
|
||||
```powershell
|
||||
netstat -ab | Select-String "3000"
|
||||
@ -540,12 +540,12 @@ TCP 0.0.0.0:3000 DESKTOP LISTENING
|
||||
|
||||
### Problemas instalando dependencias
|
||||
|
||||
Si obtiene errores durante la instalación de las dependencias, por favor asegúrese de que no está en una red restringida o sus ajustes de cortafuegos no le impiden acceder a los recursos.
|
||||
If you get errors while installing the dependencies, please make sure that you are not in a restricted network or your firewall settings do not prevent you from accessing resources.
|
||||
|
||||
La primera configuración puede tardar un rato dependiendo del ancho de banda de su red. Be patient, and if you are still stuck we recommend using GitPod instead of an offline setup.
|
||||
The first time setup can take a while depending on your network bandwidth. Be patient, and if you are still stuck we recommend using GitPod instead of an offline setup.
|
||||
|
||||
## Obteniendo ayuda
|
||||
|
||||
If you are stuck and need help, feel free to ask questions on the ['Contributors' category on our forum](https://forum.freecodecamp.org/c/contributors) or [the contributors chat room](https://chat.freecodecamp.org/channel/contributors).
|
||||
|
||||
Puede haber un error en la consola de su navegador o en Bash / Terminal / Command Line que le ayudará a identificar el problema. Proporcione este mensaje de error en la descripción de su problema para que otros puedan identificar el problema más fácilmente y ayudarle a encontrar una solución.
|
||||
There might be an error in the console of your browser or in Bash / Terminal / Command Line that will help identify the problem. Provide this error message in your problem description so others can more easily identify the issue and help you find a resolution.
|
||||
|
||||
@ -3,12 +3,13 @@
|
||||
- [Domande frequenti](FAQ.md)
|
||||
- **Contribuire al codice**
|
||||
- [Imposta freeCodeCamp localmente](how-to-setup-freecodecamp-locally.md)
|
||||
- [Aprire una pull request](how-to-open-a-pull-request.md)
|
||||
- [Lavorare sulle sfide di programmazione](how-to-work-on-coding-challenges.md)
|
||||
- [Lavorare sulle sfide video](how-to-help-with-video-challenges.md)
|
||||
- [Lavorare sul tema delle news](how-to-work-on-the-news-theme.md)
|
||||
- [Lavorare sul tema della documentazione](how-to-work-on-the-docs-theme.md)
|
||||
- [Lavorare sui progetti di pratica](how-to-work-on-practice-projects.md)
|
||||
- [Codebase best practices](codebase-best-practices.md)
|
||||
- [Open a pull request](how-to-open-a-pull-request.md)
|
||||
- [Work on coding challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Work on video challenges](how-to-help-with-video-challenges.md)
|
||||
- [Work on the news theme](how-to-work-on-the-news-theme.md)
|
||||
- [Work on the docs theme](how-to-work-on-the-docs-theme.md)
|
||||
- [Work on practice projects](how-to-work-on-practice-projects.md)
|
||||
- **Contribuire alla traduzione**
|
||||
- [Lavorare a tradurre le risorse](how-to-translate-files.md)
|
||||
- [Lavorare a correggere le risorse](how-to-proofread-files.md)
|
||||
|
||||
134
docs/i18n/italian/codebase-best-practices.md
Normal file
134
docs/i18n/italian/codebase-best-practices.md
Normal file
@ -0,0 +1,134 @@
|
||||
# Codebase Best Practices
|
||||
|
||||
## General JavaScript
|
||||
|
||||
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.
|
||||
|
||||
It is encouraged to use functional components over class-based components.
|
||||
|
||||
## Specific TypeScript
|
||||
|
||||
### Migrating a JavaScript File to TypeScript
|
||||
|
||||
#### Retaining Git File History
|
||||
|
||||
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.
|
||||
|
||||
The best bet at achieving this is to:
|
||||
|
||||
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
|
||||
|
||||
> [!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
|
||||
|
||||
### Naming Conventions
|
||||
|
||||
#### Interfaces and Types
|
||||
|
||||
For the most part, it is encouraged to use interface declarations over type declarations.
|
||||
|
||||
React Component Props - suffix with `Props`
|
||||
|
||||
```typescript
|
||||
interface MyComponentProps {}
|
||||
// type MyComponentProps = {};
|
||||
const MyComponent = (props: MyComponentProps) => {};
|
||||
```
|
||||
|
||||
React Stateful Components - suffix with `State`
|
||||
|
||||
```typescript
|
||||
interface MyComponentState {}
|
||||
// type MyComponentState = {};
|
||||
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
|
||||
```
|
||||
|
||||
Default - object name in PascalCase
|
||||
|
||||
```typescript
|
||||
interface MyObject {}
|
||||
// type MyObject = {};
|
||||
const myObject: MyObject = {};
|
||||
```
|
||||
|
||||
<!-- #### Redux Actions -->
|
||||
|
||||
<!-- TODO: Once refactored to TS, showcase naming convention for Reducers/Actions and how to type dispatch funcs -->
|
||||
|
||||
## Redux
|
||||
|
||||
### Action Definitions
|
||||
|
||||
```typescript
|
||||
enum AppActionTypes = {
|
||||
actionFunction = 'actionFunction'
|
||||
}
|
||||
|
||||
export const actionFunction = (
|
||||
arg: Arg
|
||||
): ReducerPayload<AppActionTypes.actionFunction> => ({
|
||||
type: AppActionTypes.actionFunction,
|
||||
payload: arg
|
||||
});
|
||||
```
|
||||
|
||||
### How to Reduce
|
||||
|
||||
```typescript
|
||||
// Base reducer action without payload
|
||||
type ReducerBase<T> = { type: T };
|
||||
// Logic for handling optional payloads
|
||||
type ReducerPayload<T extends AppActionTypes> =
|
||||
T extends AppActionTypes.actionFunction
|
||||
? ReducerBase<T> & {
|
||||
payload: AppState['property'];
|
||||
}
|
||||
: ReducerBase<T>;
|
||||
|
||||
// Switch reducer exported to Redux combineReducers
|
||||
export const reducer = (
|
||||
state: AppState = initialState,
|
||||
action: ReducerPayload<AppActionTypes>
|
||||
): AppState => {
|
||||
switch (action.type) {
|
||||
case AppActionTypes.actionFunction:
|
||||
return { ...state, property: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### How to Dispatch
|
||||
|
||||
Within a component, import the actions and selectors needed.
|
||||
|
||||
```tsx
|
||||
// Add type definition
|
||||
interface MyComponentProps {
|
||||
actionFunction: typeof actionFunction;
|
||||
}
|
||||
// Connect to Redux store
|
||||
const mapDispatchToProps = {
|
||||
actionFunction
|
||||
};
|
||||
// Example React Component connected to store
|
||||
const MyComponent = ({ actionFunction }: MyComponentProps): JSX.Element => {
|
||||
const handleClick = () => {
|
||||
// Dispatch function
|
||||
actionFunction();
|
||||
};
|
||||
return <button onClick={handleClick}>freeCodeCamp is awesome!</button>;
|
||||
};
|
||||
|
||||
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
|
||||
|
||||
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
@ -18,7 +18,7 @@ Supportiamo anche Windows 10 via WSL2, che puoi preparare [leggendo questa guida
|
||||
|
||||
Alcuni membri della comunità sviluppano anche su Windows 10 nativamente con Git per Windows (Git Bash) e altri strumenti installati su Windows. Al momento non disponiamo di un supporto ufficiale per una tale configurazione, consigliamo invece di utilizzare WSL2.
|
||||
|
||||
**Prerequisiti:**
|
||||
#### Prerequisites:
|
||||
|
||||
| Prerequisito | Versione | Note |
|
||||
| --------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------- |
|
||||
@ -28,7 +28,7 @@ Alcuni membri della comunità sviluppano anche su Windows 10 nativamente con Git
|
||||
|
||||
> [!ATTENTION] Se hai una versione diversa, per favore installa la versione raccomandata. Possiamo supportare solo i problemi di installazione per le versioni consigliate. Vedi [risoluzione dei problemi](#troubleshooting) per i dettagli.
|
||||
|
||||
Se Node.js è già installato sulla macchina, eseguire i seguenti comandi per convalidare le versioni:
|
||||
If Node.js is already installed on your machine, run the following commands to validate the versions:
|
||||
|
||||
```console
|
||||
node -v
|
||||
@ -37,9 +37,9 @@ npm -v
|
||||
|
||||
> [!TIP] Consigliamo vivamente di aggiornare le ultime versioni stabili del software sopra elencato, note anche come versioni con supporto a lungo termine (LTS).
|
||||
|
||||
Una volta che avrai installato i prerequisiti, dovrai preparare il tuo ambiente di sviluppo. Questo è comune a molti flussi di lavoro di sviluppo, e si dovrà fare solo una volta.
|
||||
Once you have the prerequisites installed, you need to prepare your development environment. This is common for many development workflows, and you will only need to do this once.
|
||||
|
||||
**Segui questi passaggi per preparare il tuo ambiente di sviluppo:**
|
||||
##### Follow these steps to get your development environment ready:
|
||||
|
||||
1. Installa [Git](https://git-scm.com/) o il tuo client Git preferito, se non lo hai già. Aggiornamento alla versione più recente; la versione fornita con il tuo sistema operativo potrebbe essere obsoleta.
|
||||
|
||||
@ -57,15 +57,15 @@ Una volta che avrai installato i prerequisiti, dovrai preparare il tuo ambiente
|
||||
|
||||
## Esegui il fork del repository su GitHub
|
||||
|
||||
Il [Forking](https://help.github.com/articles/about-forks/) è un passaggio nel quale fai una tua copia del repository principale di freeCodeCamp (noto anche come _repo_) su GitHub.
|
||||
[Forking](https://help.github.com/articles/about-forks/) is a step where you get your own copy of freeCodeCamp's main repository (a.k.a _repo_) on GitHub.
|
||||
|
||||
Questo è essenziale, in quanto consente di lavorare sulla propria copia di freeCodeCamp su GitHub, o di scaricare (clonare) il tuo repository per lavorare localmente. Più tardi, potrai richiedere che le tue modifiche siano integrate (pull) nel repository principale dal tuo fork tramite una pull request (PR).
|
||||
This is essential, as it allows you to work on your own copy of freeCodeCamp on GitHub, or to download (clone) your repository to work on locally. Later, you will be able to request changes to be pulled into the main repository from your fork via a pull request (PR).
|
||||
|
||||
> [!TIP] Il repository principale su `https://github.com/freeCodeCamp/freeCodeCamp` è spesso indicato come il repository `upstream`.
|
||||
>
|
||||
> Il tuo fork situato si `https://github.com/YOUR_USER_NAME/freeCodeCamp` è spesso chiamato il repository `origin`. `YOUR_USER_NAME` è sostituito dal tuo nome utente GitHub.
|
||||
|
||||
**Segui questi passaggi per effettuare il fork del repository `https://github.com/freeCodeCamp/freeCodeCamp`:**
|
||||
**Follow these steps to fork the `https://github.com/freeCodeCamp/freeCodeCamp` repository:**
|
||||
|
||||
1. Vai al repository freeCodeCamp su GitHub: <https://github.com/freeCodeCamp/freeCodeCamp>
|
||||
|
||||
@ -75,22 +75,22 @@ Questo è essenziale, in quanto consente di lavorare sulla propria copia di free
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Come effettuare il fork di freeCodeCamp su GitHub (screenshot)
|
||||
How to fork freeCodeCamp on GitHub (screenshot)
|
||||
</summary>
|
||||
|
||||
<br>
|
||||
<img src="https://raw.githubusercontent.com/freeCodeCamp/freeCodeCamp/main/docs/images/github/how-to-fork-freeCodeCamp.gif" alt="Come fare il fork di freeCodeCamp su GitHub" />
|
||||
<img src="https://raw.githubusercontent.com/freeCodeCamp/freeCodeCamp/main/docs/images/github/how-to-fork-freeCodeCamp.gif" alt="How to fork freeCodeCamp on GitHub" />
|
||||
</details>
|
||||
|
||||
## Clona il tuo fork da GitHub
|
||||
|
||||
La [Clonazione](https://help.github.com/articles/cloning-a-repository/) consiste nello **scaricare** una copia di un repository da una `posizione remota` che è di proprietà tua o di qualcun altro. Nel tuo caso, questa posizione remota è il tuo `fork` del repository di freeCodeCamp che dovrebbe essere disponibile su `https://github.com/YOUR_USER_NAME/freeCodeCamp`. (`YOUR_USER_NAME` è sostituito dal tuo nome utente GitHub.)
|
||||
[Cloning](https://help.github.com/articles/cloning-a-repository/) is where you **download** a copy of a repository from a `remote` location that is either owned by you or by someone else. In your case, this remote location is your `fork` of freeCodeCamp's repository that should be available at `https://github.com/YOUR_USER_NAME/freeCodeCamp`. (`YOUR_USER_NAME` would be replaced with your GitHub user name.)
|
||||
|
||||
> [!WARNING] Se stai lavorando su una Distro di Linux su WSL2, potresti avere problemi di performace e stabilità eseguendo il progetto in una cartella che è condivisa tra Windows e WSL2 (per esempio `/mnt/c/Users/`). Quindi ti raccomandiamo di clonare il repo in una cartella che è usata principalmente dal Distro di Linux su WSL2 e non condivisa direttamente con Windows (per esempio `~/PROJECTS/`).
|
||||
>
|
||||
> Vedi [questa issue su GitHub](https://github.com/freeCodeCamp/freeCodeCamp/issues/40632) per ulterioni informazioni su questo problema.
|
||||
|
||||
Esegui questi comandi sulla tua macchina locale:
|
||||
Run these commands on your local machine:
|
||||
|
||||
1. Apri un terminale / prompt dei comandi / Shell nella directory dei progetti
|
||||
|
||||
@ -102,17 +102,17 @@ Esegui questi comandi sulla tua macchina locale:
|
||||
git clone --depth=1 https://github.com/YOUR_USER_NAME/freeCodeCamp.git
|
||||
```
|
||||
|
||||
Questo scaricherà l'intero repository freeCodeCamp nella directory dei tuoi progetti.
|
||||
This will download the entire freeCodeCamp repository to your projects directory.
|
||||
|
||||
Nota: `--depth=1` crea un clone superficiale del fork, con la sola cronologia dei commit più recente.
|
||||
Note: `--depth=1` creates a shallow clone of your fork, with only the most recent history/commit.
|
||||
|
||||
## Imposta la sincronizzazione dal genitore
|
||||
|
||||
Ora che hai scaricato una copia del fork, dovrai configurare un remote `upstream` che punti al repository padre.
|
||||
Now that you have downloaded a copy of your fork, you will need to set up an `upstream` remote to the parent repository.
|
||||
|
||||
[Come accennato poc'anzi](#fork-the-repository-on-github), il repository principale fa riferimento al repository `upstream`. Il tuo fork fa riferimento al repository `origin`.
|
||||
[As mentioned earlier](#fork-the-repository-on-github), the main repository is referred `upstream` repository. Your fork referred to as the `origin` repository.
|
||||
|
||||
Hai bisogno di un riferimento dal tuo clone locale al repository `upstream` oltre che al repository `origin`. In questo modo potrai sincronizzare le modifiche dal repository principale senza bisogno di fare ripetuti fork e clonazioni.
|
||||
You need a reference from your local clone to the `upstream` repository in addition to the `origin` repository. This is so that you can sync changes from the main repository without the requirement of forking and cloning repeatedly.
|
||||
|
||||
1. Cambia la directory nella nuova directory freeCodeCamp:
|
||||
|
||||
@ -143,15 +143,15 @@ Hai bisogno di un riferimento dal tuo clone locale al repository `upstream` oltr
|
||||
|
||||
## Eseguire freeCodeCamp localmente
|
||||
|
||||
Ora che disponi di una copia locale di freeCodeCamp, potrai seguire queste istruzioni per eseguirlo localmente. Questo ti permetterà di:
|
||||
Now that you have a local copy of freeCodeCamp, you can follow these instructions to run it locally. This will allow you to:
|
||||
|
||||
- Vedere un'anteprima delle modifiche come apparirebbero sulla piattaforma di apprendimento.
|
||||
- Lavorare su problemi e miglioramenti relativi all'interfaccia utente.
|
||||
- Fare il debug e la correzione dei problemi con i server delle applicazioni e le app client.
|
||||
|
||||
Se incontri un problema, fai prima una ricerca del problema sul web per vedere se ha già una risposta. Se non riesce a trovare una soluzione, ti preghiamo di fare una ricerca nelle nostra pagina delle [Issues su GitHub](https://github.com/freeCodeCamp/freeCodeCamp/issues) per trovare una soluzione o segnalare il problema se non è ancora stato fatto.
|
||||
If you do run into issues, first perform a web search for your issue and see if it has already been answered. If you cannot find a solution, please search our [GitHub issues](https://github.com/freeCodeCamp/freeCodeCamp/issues) page for a solution and report the issue if it has not yet been reported.
|
||||
|
||||
E come sempre, fai liberamente le tue domande nella [categoria 'Contributors' sul forum](https://forum.freecodecamp.org/c/contributors) o [sul server di chat](https://chat.freecodecamp.org/home).
|
||||
And as always, feel free to ask questions on the ['Contributors' category on our forum](https://forum.freecodecamp.org/c/contributors) or [our chat server](https://chat.freecodecamp.org/home).
|
||||
|
||||
> [!TIP] Puoi saltare l'esecuzione di freeCodeCamp localmente se stai semplicemente modificando i file. Per esempio, facendo un `rebase`, o risolvendo dei conflitti di `merge`.
|
||||
>
|
||||
@ -161,9 +161,9 @@ E come sempre, fai liberamente le tue domande nella [categoria 'Contributors' su
|
||||
|
||||
### Configurare le dipendenze
|
||||
|
||||
#### Passo 1: Impostare il file delle variabili d'ambiente
|
||||
#### Step 1: Set up the environment variable file
|
||||
|
||||
Le chiavi API predefinite e le variabili d'ambiente sono memorizzate nel file `sample.env`. Questo file deve essere copiato in un nuovo file chiamato `.env` a cui si accede dinamicamente durante la fase di installazione.
|
||||
The default API keys and environment variables are stored in the file `sample.env`. This file needs to be copied to a new file named `.env` that is accessed dynamically during the installation step.
|
||||
|
||||
```console
|
||||
# Creare una copia del "sample.env" e denominarlo ".env".
|
||||
@ -176,25 +176,25 @@ cp esempio. nv .env
|
||||
copy sample.env .env
|
||||
```
|
||||
|
||||
_Non_ è necessario cambiare le chiavi nel file `.env` per eseguire l'applicazione localmente. Puoi lasciare i valori predefiniti copiati da `sample.env` così come sono.
|
||||
The keys in the `.env` file are _not_ required to be changed to run the app locally. You can leave the default values copied over from `sample.env` as-is.
|
||||
|
||||
> [!TIP] Tieni a mente che se vuoi usare servizi come Auth0 o Algolia, dovrai ottenere delle API key per quei servizi per conto tuo e modificare il file `.env` di conseguenza.
|
||||
|
||||
#### Passo 2: Installa le dipendenze
|
||||
#### Step 2: Install dependencies
|
||||
|
||||
Questo passaggio installerà le dipendenze richieste per l'esecuzione dell'applicazione:
|
||||
This step will install the dependencies required for the application to run:
|
||||
|
||||
```console
|
||||
npm ci
|
||||
```
|
||||
|
||||
#### Passo 3: Avvia MongoDB e fai il seed del database
|
||||
#### Step 3: Start MongoDB and seed the database
|
||||
|
||||
Prima di poter eseguire l'applicazione localmente, è necessario avviare il servizio MongoDB.
|
||||
Before you can run the application locally, you will need to start the MongoDB service.
|
||||
|
||||
> [!NOTE] A meno che tu non abbia MongoDB in esecuzione in un setup differente dal default, l'URL salvato come `MONGOHQ_URL` nel file `.env` dovrebbe andare bene. Se usi una configurazione personalizzata, modifica il valore come necessario.
|
||||
|
||||
Avvia il server MongoDB in un terminale separato:
|
||||
Start the MongoDB server in a separate terminal:
|
||||
|
||||
- Su macOS & Ubuntu:
|
||||
|
||||
@ -212,21 +212,21 @@ Avvia il server MongoDB in un terminale separato:
|
||||
|
||||
> [!TIP] Puoi evitare di dover avviare MongoDB ogni volta se lo installi come servizio in background. Puoi [saperne di più nella loro documentazione per il tuo sistema operativo](https://docs.mongodb.com/manual/administration/install-community/)
|
||||
|
||||
Successivamente, facciamo il seed del database. In questo passaggio, eseguiamo il comando sottostante che popola il server MongoDB con alcuni set di dati iniziali richiesti dai servizi. Tra questi figurano alcuni schemi, tra le altre cose.
|
||||
Next, let's seed the database. In this step, we run the below command that fills the MongoDB server with some initial data sets that are required by services. These include a few schemas, among other things.
|
||||
|
||||
```console
|
||||
npm run seed
|
||||
```
|
||||
|
||||
#### Passo 4: Avviare l'applicazione client freeCodeCamp e il server API
|
||||
#### Step 4: Start the freeCodeCamp client application and API server
|
||||
|
||||
Ora è possibile avviare il server API e le applicazioni client.
|
||||
You can now start up the API server and the client applications.
|
||||
|
||||
```console
|
||||
npm run develop
|
||||
```
|
||||
|
||||
Questo singolo comando attiverà tutti i servizi, compreso il server API e le applicazioni client disponibili su cui lavorare.
|
||||
This single command will fire up all the services, including the API server and the client applications available for you to work on.
|
||||
|
||||
> [!NOTE] Una volta pronto, apri un browser web e **visita <http://localhost:8000>**. Se l'app si carica, congratulazioni, sei a posto! Hai ora una copia dell'intera piattaforma di apprendimento di freeCodeCamp in esecuzione sul tuo computer.
|
||||
|
||||
@ -236,26 +236,26 @@ Questo singolo comando attiverà tutti i servizi, compreso il server API e le ap
|
||||
|
||||
## Accedi con un utente locale
|
||||
|
||||
La tua configurazione locale crea automaticamente un utente locale nel database. Facendo clic sul pulsante `Accedi` ti autenticherai automaticamente nell'applicazione locale.
|
||||
Your local setup automatically populates a local user in the database. Clicking the `Sign In` button will automatically authenticate you into the local application.
|
||||
|
||||
Tuttavia, accedere alla pagina del portfolio utente è un po' difficile. In fase di sviluppo, Gatsby si occupa di servire le pagine lato client e quindi otterrai una pagina `404` per il portfolio utente quando lavorerai localmente.
|
||||
However, accessing the user portfolio page is a little tricky. In development, Gatsby takes over serving the client-side pages and hence you will get a `404` page for the user portfolio when working locally.
|
||||
|
||||
Basta cliccare sul pulsante **"Preview Custom 404 Page"** per passare alla pagina corretta.
|
||||
Simply clicking the **"Preview Custom 404 Page"** button will forward you to the correct page.
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Come accedere quando si lavora localmente (screenshot)
|
||||
How to sign in when working locally (screenshot)
|
||||
</summary>
|
||||
|
||||
<br>
|
||||
<img src="https://user-images.githubusercontent.com/29990697/71541249-f63cdf00-2923-11ea-8a85-cefb6f9c9977.gif" alt="Come accedere quando si lavora localmente" />
|
||||
<img src="https://user-images.githubusercontent.com/29990697/71541249-f63cdf00-2923-11ea-8a85-cefb6f9c9977.gif" alt="How to sign in when working locally" />
|
||||
</details>
|
||||
|
||||
## Apportare modifiche a livello locale
|
||||
|
||||
Ora puoi apportare modifiche ai file e inviare le modifiche al clone locale del tuo fork.
|
||||
You can now make changes to files and commit your changes to your local clone of your fork.
|
||||
|
||||
Segui questi passaggi:
|
||||
Follow these steps:
|
||||
|
||||
1. Controlla di essere sul ramo `main`:
|
||||
|
||||
@ -446,11 +446,11 @@ Segui questi passaggi:
|
||||
|
||||
## Proporre una Pull Request (PR)
|
||||
|
||||
Dopo aver effettuato le modifiche, controlla qui per [come aprire una Pull Request](how-to-open-a-pull-request.md).
|
||||
After you've committed your changes, check here for [how to open a Pull Request](how-to-open-a-pull-request.md).
|
||||
|
||||
## Comandi rapidi
|
||||
|
||||
Un rapido riferimento ai comandi di cui avrai bisogno quando lavorerai localmente.
|
||||
A quick reference to the commands that you will need when working locally.
|
||||
|
||||
| comando | descrizione |
|
||||
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
||||
@ -472,11 +472,11 @@ Un rapido riferimento ai comandi di cui avrai bisogno quando lavorerai localment
|
||||
|
||||
### Problemi con l'installazione dei prerequisiti raccomandati
|
||||
|
||||
Sviluppiamo regolarmente sui sistemi operativi più nuovi o più popolari come macOS 10.15 o successivi, Ubuntu 18.04, e Windows 10 con WSL2.
|
||||
We regularly develop on the latest or most popular operating systems like macOS 10.15 or later, Ubuntu 18.04 or later, and Windows 10 (with WSL2).
|
||||
|
||||
Ti raccomandiamo di fare ricerche sui tuoi problemi specifici usando risorse come Google, Stack Overflow, e Stack Exchange. C'è una buona probabilità che qualcuno abbia incontrato lo stesso problema e ci sia già una risposta alla tua domanda specifica.
|
||||
It is recommended to research your specific issue on resources such as Google, Stack Overflow, and Stack Exchange. There is a good chance that someone has faced the same issue and there is already an answer to your specific query.
|
||||
|
||||
Se sei su un sistema operativo diverso e/o continui ad avere dei problemi, visita [ottenere aiuto](#getting-help).
|
||||
If you are on a different OS and/or are still running into issues, see [getting help](#getting-help).
|
||||
|
||||
> [!WARNING]
|
||||
>
|
||||
@ -484,7 +484,7 @@ Se sei su un sistema operativo diverso e/o continui ad avere dei problemi, visit
|
||||
|
||||
### Problemi con UI, Font, errori di build, ecc.
|
||||
|
||||
Se si verificano problemi con l'interfaccia utente, i caratteri o vedi errori di compilazione, una pulizia potrebbe essere utile:
|
||||
If you face issues with the UI, Fonts or see builds errors a cleanup can be useful:
|
||||
|
||||
```console
|
||||
npm run clean
|
||||
@ -493,17 +493,17 @@ npm run seed
|
||||
npm run develop
|
||||
```
|
||||
|
||||
O
|
||||
OR
|
||||
|
||||
Usa il collegamento
|
||||
Use the shortcut
|
||||
|
||||
```
|
||||
npm run clean-and-develop
|
||||
```
|
||||
|
||||
Se continui ad incontrare problemi con la compilazione, ti consigliamo di ripulire lo spazio di lavoro.
|
||||
If you continue to face issues with the build, cleaning up the workspace is recommend.
|
||||
|
||||
Usa `git clean` in modalità interattiva:
|
||||
Use `git clean` in interactive mode:
|
||||
|
||||
```
|
||||
git clean -ifdX
|
||||
@ -511,18 +511,18 @@ git clean -ifdX
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Come pulire i file git non tracciati (screenshot)
|
||||
How to clean git untracked files (screenshot)
|
||||
</summary>
|
||||
|
||||
<br>
|
||||
<img src="https://user-images.githubusercontent.com/1884376/94270515-ca579400-ff5d-11ea-8ff1-152cade31654.gif" alt="Come pulire i file git non tracciati" />
|
||||
<img src="https://user-images.githubusercontent.com/1884376/94270515-ca579400-ff5d-11ea-8ff1-152cade31654.gif" alt="How to clean git untracked files" />
|
||||
</details>
|
||||
|
||||
### Problemi con API, logic, invio delle sfide, ecc.
|
||||
|
||||
Se non riesci ad accedere e invece vedi un banner con un messaggio di errore che verrà segnalato a freeCodeCamp, ti preghiamo di controllare che la porta locale `3000` non sia in uso da un programma diverso.
|
||||
If you can't sign in, and instead you see a banner with an error message that it will be reported to freeCodeCamp, please double-check that your local port `3000` is not in use by a different program.
|
||||
|
||||
**Su Linux / macOS / WSL su Windows - Dal terminale:**
|
||||
**On Linux / macOS / WSL on Windows - From Terminal:**
|
||||
|
||||
```console
|
||||
netstat -a | grep "3000"
|
||||
@ -530,7 +530,7 @@ netstat -a | grep "3000"
|
||||
tcp4 0 0 0.0.0.0:3000 DESKTOP LISTEN
|
||||
```
|
||||
|
||||
**Su Windows - d PowerShell con privilegi elevati:**
|
||||
**On Windows - From Elevated PowerShell:**
|
||||
|
||||
```powershell
|
||||
netstat -ab | Select-String "3000"
|
||||
@ -540,12 +540,12 @@ TCP 0.0.0.0:3000 DESKTOP LISTENING
|
||||
|
||||
### Problemi nell'installazione delle dipendenze
|
||||
|
||||
Se incontri degli errori durante l'installazione delle dipendenze, assicurati di non essere in una rete ristretta o che le impostazioni del tuo firewall non ti impediscono di accedere alle risorse.
|
||||
If you get errors while installing the dependencies, please make sure that you are not in a restricted network or your firewall settings do not prevent you from accessing resources.
|
||||
|
||||
La prima configurazione può richiedere un po' di tempo a seconda della larghezza di banda della rete. Sii paziente, e se continui a rimanere bloccato ti raccomandiamo di usare GitPod invece di un setup offline.
|
||||
The first time setup can take a while depending on your network bandwidth. Be patient, and if you are still stuck we recommend using GitPod instead of an offline setup.
|
||||
|
||||
## Ottenere Aiuto
|
||||
|
||||
Se sei bloccato e hai bisogno di aiuto, poni liberamente le tue domande nella [categoria 'Contributors' sul nostro forum](https://forum.freecodecamp.org/c/contributors) o [nella chat room per i contributori](https://chat.freecodecamp.org/channel/contributors).
|
||||
If you are stuck and need help, feel free to ask questions on the ['Contributors' category on our forum](https://forum.freecodecamp.org/c/contributors) or [the contributors chat room](https://chat.freecodecamp.org/channel/contributors).
|
||||
|
||||
Potrebbe esserci un errore nella console del browser o in Bash / Terminal / Linea di comando che ti aiuterà a identificare il problema. Fornisci questo messaggio di errore nella descrizione del problema in modo che gli altri possano identificare più facilmente il problema e aiutarti a risolverlo.
|
||||
There might be an error in the console of your browser or in Bash / Terminal / Command Line that will help identify the problem. Provide this error message in your problem description so others can more easily identify the issue and help you find a resolution.
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
- [Frequently Asked Questions](FAQ.md)
|
||||
- **Code Contribution**
|
||||
- [Set up freeCodeCamp locally](how-to-setup-freecodecamp-locally.md)
|
||||
- [Codebase best practices](codebase-best-practices.md)
|
||||
- [Open a pull request](how-to-open-a-pull-request.md)
|
||||
- [Work on coding challenges](how-to-work-on-coding-challenges.md)
|
||||
- [Work on video challenges](how-to-help-with-video-challenges.md)
|
||||
|
||||
134
docs/i18n/portuguese/codebase-best-practices.md
Normal file
134
docs/i18n/portuguese/codebase-best-practices.md
Normal file
@ -0,0 +1,134 @@
|
||||
# Codebase Best Practices
|
||||
|
||||
## General JavaScript
|
||||
|
||||
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.
|
||||
|
||||
It is encouraged to use functional components over class-based components.
|
||||
|
||||
## Specific TypeScript
|
||||
|
||||
### Migrating a JavaScript File to TypeScript
|
||||
|
||||
#### Retaining Git File History
|
||||
|
||||
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.
|
||||
|
||||
The best bet at achieving this is to:
|
||||
|
||||
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
|
||||
|
||||
> [!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
|
||||
|
||||
### Naming Conventions
|
||||
|
||||
#### Interfaces and Types
|
||||
|
||||
For the most part, it is encouraged to use interface declarations over type declarations.
|
||||
|
||||
React Component Props - suffix with `Props`
|
||||
|
||||
```typescript
|
||||
interface MyComponentProps {}
|
||||
// type MyComponentProps = {};
|
||||
const MyComponent = (props: MyComponentProps) => {};
|
||||
```
|
||||
|
||||
React Stateful Components - suffix with `State`
|
||||
|
||||
```typescript
|
||||
interface MyComponentState {}
|
||||
// type MyComponentState = {};
|
||||
class MyComponent extends Component<MyComponentProps, MyComponentState> {}
|
||||
```
|
||||
|
||||
Default - object name in PascalCase
|
||||
|
||||
```typescript
|
||||
interface MyObject {}
|
||||
// type MyObject = {};
|
||||
const myObject: MyObject = {};
|
||||
```
|
||||
|
||||
<!-- #### Redux Actions -->
|
||||
|
||||
<!-- TODO: Once refactored to TS, showcase naming convention for Reducers/Actions and how to type dispatch funcs -->
|
||||
|
||||
## Redux
|
||||
|
||||
### Action Definitions
|
||||
|
||||
```typescript
|
||||
enum AppActionTypes = {
|
||||
actionFunction = 'actionFunction'
|
||||
}
|
||||
|
||||
export const actionFunction = (
|
||||
arg: Arg
|
||||
): ReducerPayload<AppActionTypes.actionFunction> => ({
|
||||
type: AppActionTypes.actionFunction,
|
||||
payload: arg
|
||||
});
|
||||
```
|
||||
|
||||
### How to Reduce
|
||||
|
||||
```typescript
|
||||
// Base reducer action without payload
|
||||
type ReducerBase<T> = { type: T };
|
||||
// Logic for handling optional payloads
|
||||
type ReducerPayload<T extends AppActionTypes> =
|
||||
T extends AppActionTypes.actionFunction
|
||||
? ReducerBase<T> & {
|
||||
payload: AppState['property'];
|
||||
}
|
||||
: ReducerBase<T>;
|
||||
|
||||
// Switch reducer exported to Redux combineReducers
|
||||
export const reducer = (
|
||||
state: AppState = initialState,
|
||||
action: ReducerPayload<AppActionTypes>
|
||||
): AppState => {
|
||||
switch (action.type) {
|
||||
case AppActionTypes.actionFunction:
|
||||
return { ...state, property: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### How to Dispatch
|
||||
|
||||
Within a component, import the actions and selectors needed.
|
||||
|
||||
```tsx
|
||||
// Add type definition
|
||||
interface MyComponentProps {
|
||||
actionFunction: typeof actionFunction;
|
||||
}
|
||||
// Connect to Redux store
|
||||
const mapDispatchToProps = {
|
||||
actionFunction
|
||||
};
|
||||
// Example React Component connected to store
|
||||
const MyComponent = ({ actionFunction }: MyComponentProps): JSX.Element => {
|
||||
const handleClick = () => {
|
||||
// Dispatch function
|
||||
actionFunction();
|
||||
};
|
||||
return <button onClick={handleClick}>freeCodeCamp is awesome!</button>;
|
||||
};
|
||||
|
||||
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
|
||||
|
||||
- [TypeScript Docs](https://www.typescriptlang.org/docs/)
|
||||
- [TypeScript with React CheatSheet](https://github.com/typescript-cheatsheets/react#readme)
|
||||
@ -18,7 +18,7 @@ We also support Windows 10 via WSL2, which you can prepare by [reading this guid
|
||||
|
||||
Some community members also develop on Windows 10 natively with Git for Windows (Git Bash), and other tools installed on Windows. We do not have official support for such a setup at this time, we recommend using WSL2 instead.
|
||||
|
||||
**Prerequisites:**
|
||||
#### Prerequisites:
|
||||
|
||||
| Prerequisite | Version | Notes |
|
||||
| --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------- |
|
||||
@ -39,7 +39,7 @@ npm -v
|
||||
|
||||
Once you have the prerequisites installed, you need to prepare your development environment. This is common for many development workflows, and you will only need to do this once.
|
||||
|
||||
**Follow these steps to get your development environment ready:**
|
||||
##### Follow these steps to get your development environment ready:
|
||||
|
||||
1. Install [Git](https://git-scm.com/) or your favorite Git client, if you haven't already. Update to the latest version; the version that came bundled with your OS may be outdated.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user