chore(i18n,curriculum): update translations (#42918)
This commit is contained in:
camperbot
GitHub
@ -33,7 +33,7 @@ assert(result[0] == '<h1>');
|
||||
`myRegex` 應該使用懶惰匹配
|
||||
|
||||
```js
|
||||
assert(/\?/g.test(myRegex));
|
||||
assert(/[^\\][\*\+\?]\?/.test(myRegex));
|
||||
```
|
||||
|
||||
`myRegex` 不應包含字符串 `h1`
|
||||
|
||||
@ -111,7 +111,7 @@ Express app 可以使用新的依賴。
|
||||
(data) => {
|
||||
assert.match(
|
||||
data,
|
||||
/secret:( |)process.env.SESSION_SECRET/gi,
|
||||
/secret:( |)process\.env(\.SESSION_SECRET|\[(?<q>"|')SESSION_SECRET\k<q>\])/g,
|
||||
'Your express app should have express-session set up with your secret as process.env.SESSION_SECRET'
|
||||
);
|
||||
},
|
||||
|
||||
@ -33,7 +33,7 @@ assert(result[0] == '<h1>');
|
||||
`myRegex` 应该使用懒惰匹配
|
||||
|
||||
```js
|
||||
assert(/\?/g.test(myRegex));
|
||||
assert(/[^\\][\*\+\?]\?/.test(myRegex));
|
||||
```
|
||||
|
||||
`myRegex` 不应包含字符串 `h1`
|
||||
|
||||
@ -111,7 +111,7 @@ Express app 可以使用新的依赖。
|
||||
(data) => {
|
||||
assert.match(
|
||||
data,
|
||||
/secret:( |)process.env.SESSION_SECRET/gi,
|
||||
/secret:( |)process\.env(\.SESSION_SECRET|\[(?<q>"|')SESSION_SECRET\k<q>\])/g,
|
||||
'Your express app should have express-session set up with your secret as process.env.SESSION_SECRET'
|
||||
);
|
||||
},
|
||||
|
||||
@ -33,7 +33,7 @@ assert(result[0] == '<h1>');
|
||||
`myRegex` debe usar una coincidencia perezosa
|
||||
|
||||
```js
|
||||
assert(/\?/g.test(myRegex));
|
||||
assert(/[^\\][\*\+\?]\?/.test(myRegex));
|
||||
```
|
||||
|
||||
`myRegex` no debe incluir la cadena `h1`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036147
|
||||
title: Connect Redux to React
|
||||
title: Conecta Redux a React
|
||||
challengeType: 6
|
||||
forumTopicId: 301426
|
||||
dashedName: connect-redux-to-react
|
||||
@ -8,23 +8,23 @@ dashedName: connect-redux-to-react
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you've written both the `mapStateToProps()` and the `mapDispatchToProps()` functions, you can use them to map `state` and `dispatch` to the `props` of one of your React components. The `connect` method from React Redux can handle this task. This method takes two optional arguments, `mapStateToProps()` and `mapDispatchToProps()`. They are optional because you may have a component that only needs access to `state` but doesn't need to dispatch any actions, or vice versa.
|
||||
Ahora que has escrito tanto la función `mapStateToProps()` como la función `mapDispatchToProps()`, puedes usarlos para asignar `state` y `dispatch` a las `props` de uno de tus componentes React. El método `connect` de React Redux puede manejar esta tarea. Este método toma dos argumentos opcionales, `mapStateToProps()` y `mapDispatchToProps()`. Son opcionales porque puedes tener un componente que solo necesita acceso al `state` pero no necesita enviar ninguna acción, o viceversa.
|
||||
|
||||
To use this method, pass in the functions as arguments, and immediately call the result with your component. This syntax is a little unusual and looks like:
|
||||
Para utilizar este método, pasa las funciones como argumentos, y llama inmediatamente al resultado con tu componente. Esta sintaxis es un poco inusual y se ve así:
|
||||
|
||||
```js
|
||||
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
|
||||
```
|
||||
|
||||
**Note:** If you want to omit one of the arguments to the `connect` method, you pass `null` in its place.
|
||||
**Nota:** Si deseas omitir uno de los argumentos del método `connect`, pasa `null` en su lugar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has the `mapStateToProps()` and `mapDispatchToProps()` functions and a new React component called `Presentational`. Connect this component to Redux with the `connect` method from the `ReactRedux` global object, and call it immediately on the `Presentational` component. Assign the result to a new `const` called `ConnectedComponent` that represents the connected component. That's it, now you're connected to Redux! Try changing either of `connect`'s arguments to `null` and observe the test results.
|
||||
El editor de código tiene las funciones `mapStateToProps()` y `mapDispatchToProps()` y un nuevo componente React llamado `Presentational`. Conecta este componente a Redux con el método `connect` del objeto global `ReactRedux`, y llámalo inmediatamente en el componente `Presentational`. Asigna el resultado a una nueva `const` llamada `ConnectedComponent` que representa el componente conectado. Eso es todo, ¡ahora estás conectado a Redux! Intenta cambiar cualquiera de los argumentos de `connect` a `null` y observa los resultados de la prueba.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Presentational` component should render.
|
||||
El componente `Presentational` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive a prop `messages` via `connect`.
|
||||
El componente `Presentational` debe recibir una prop `messages` a través de `connect`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive a prop `submitNewMessage` via `connect`.
|
||||
El componente `Presentational` debe recibir una prop `submitNewMessage` a través de `connect`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036148
|
||||
title: Connect Redux to the Messages App
|
||||
title: Conecta Redux a la aplicación de mensajes
|
||||
challengeType: 6
|
||||
forumTopicId: 301427
|
||||
dashedName: connect-redux-to-the-messages-app
|
||||
@ -8,17 +8,17 @@ dashedName: connect-redux-to-the-messages-app
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you understand how to use `connect` to connect React to Redux, you can apply what you've learned to your React component that handles messages.
|
||||
Ahora que entiendes cómo usar `connect` para conectar React a Redux, puedes aplicar lo que has aprendido a tu componente React que maneja mensajes.
|
||||
|
||||
In the last lesson, the component you connected to Redux was named `Presentational`, and this wasn't arbitrary. This term *generally* refers to React components that are not directly connected to Redux. They are simply responsible for the presentation of UI and do this as a function of the props they receive. By contrast, container components are connected to Redux. These are typically responsible for dispatching actions to the store and often pass store state to child components as props.
|
||||
En la última lección, el componente que conectaste a Redux se llamó `Presentational`, y esto no fue arbitrario. Este término *generalmente* se refiere a componentes React que no están directamente conectados a Redux. Ellos simplemente son responsables de la presentación de la interfaz de usuario y lo hacen en función de las props que reciben. Por el contrario, los contenedores componentes están conectados a Redux. Estos son típicamente responsables de enviar acciones al store y a menudo pasan el estado del store a componentes secundarios como props.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has all the code you've written in this section so far. The only change is that the React component is renamed to `Presentational`. Create a new component held in a constant called `Container` that uses `connect` to connect the `Presentational` component to Redux. Then, in the `AppWrapper`, render the React Redux `Provider` component. Pass `Provider` the Redux `store` as a prop and render `Container` as a child. Once everything is setup, you will see the messages app rendered to the page again.
|
||||
El editor tiene todo el código que has escrito hasta ahora en esta sección. El único cambio es que el componente React se renombra a `Presentational`. Crea un nuevo componente en una constante llamada `Container` que usa `connect` para conectar el componente `Presentational` a Redux. Luego, en el `AppWrapper`, renderiza el componente `Provider` de React Redux. Pasa a `Provider` el `store` Redux como una prop y renderiza `Container` como un hijo. Una vez que todo esté configurado, verás que los mensajes de la aplicación son visualizados nuevamente en la página.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `AppWrapper` should render to the page.
|
||||
El `AppWrapper` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should render to page.
|
||||
El componente `Presentational` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should render an `h2`, `input`, `button`, and `ul` elements.
|
||||
El componente `Presentational` debe renderizar los siguientes elementos: un `h2`, `input`, `button`, y `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive `messages` from the Redux store as a prop.
|
||||
El componente `Presentational` debe recibir `messages` desde el store Redux como una prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -70,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive the `submitMessage` action creator as a prop.
|
||||
El componente `Presentational` debe recibir la acción `submitMessage` como una prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036176
|
||||
title: Use State to Toggle an Element
|
||||
title: Usa el estado para alternar un elemento
|
||||
challengeType: 6
|
||||
forumTopicId: 301421
|
||||
dashedName: use-state-to-toggle-an-element
|
||||
@ -8,7 +8,7 @@ dashedName: use-state-to-toggle-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes you might need to know the previous state when updating the state. However, state updates may be asynchronous - this means React may batch multiple `setState()` calls into a single update. This means you can't rely on the previous value of `this.state` or `this.props` when calculating the next value. So, you should not use code like this:
|
||||
A veces puedes necesitar conocer el estado anterior al actualizar el estado. Sin embargo, las actualizaciones del estado pueden ser asíncronas - esto significa que React puede procesar múltiples llamadas a `setState()` en una sola actualización. Esto significa que no puedes confiar en el valor anterior de `this.state` o `this.props` al calcular el siguiente valor. Por lo tanto, no debes usar código como este:
|
||||
|
||||
```jsx
|
||||
this.setState({
|
||||
@ -16,7 +16,7 @@ this.setState({
|
||||
});
|
||||
```
|
||||
|
||||
Instead, you should pass `setState` a function that allows you to access state and props. Using a function with `setState` guarantees you are working with the most current values of state and props. This means that the above should be rewritten as:
|
||||
En su lugar, debes pasar una función a `setState` que te permitirá acceder al estado y props. El usar una función con `setState` te garantiza que estás trabajando con los valores más actuales del estado y props. Esto significa que lo anterior debe reescribirse así:
|
||||
|
||||
```jsx
|
||||
this.setState((state, props) => ({
|
||||
@ -24,7 +24,7 @@ this.setState((state, props) => ({
|
||||
}));
|
||||
```
|
||||
|
||||
You can also use a form without `props` if you need only the `state`:
|
||||
También puedes usar un formulario sin `props` si necesitas solo el `state`:
|
||||
|
||||
```jsx
|
||||
this.setState(state => ({
|
||||
@ -32,21 +32,21 @@ this.setState(state => ({
|
||||
}));
|
||||
```
|
||||
|
||||
Note that you have to wrap the object literal in parentheses, otherwise JavaScript thinks it's a block of code.
|
||||
Ten en cuenta que tienes que encapsular el objeto literal entre paréntesis, de lo contrario JavaScript pensará que es un bloque de código.
|
||||
|
||||
# --instructions--
|
||||
|
||||
`MyComponent` has a `visibility` property which is initialized to `false`. The render method returns one view if the value of `visibility` is true, and a different view if it is false.
|
||||
`MyComponent` tiene una propiedad `visibility` que se inicializa con el valor `false`. El método de renderización devuelve un resultado si el valor de `visibility` es verdadero, y un resultado diferente si es falso.
|
||||
|
||||
Currently, there is no way of updating the `visibility` property in the component's `state`. The value should toggle back and forth between true and false. There is a click handler on the button which triggers a class method called `toggleVisibility()`. Pass a function to `setState` to define this method so that the `state` of `visibility` toggles to the opposite value when the method is called. If `visibility` is `false`, the method sets it to `true`, and vice versa.
|
||||
Actualmente, no hay forma de actualizar la propiedad `visibility` en el `state` del componente. El valor debe cambiar entre verdadero y falso. Hay un manejador para el evento clic en el botón que activa un método de clase llamado `toggleVisibility()`. Pasa una función a `setState` para definir este método, de tal forma que el `state` de `visibility` cambie al valor opuesto cuando se llame el método. Si `visibility` es `false`, el método lo cambia a `true` y viceversa.
|
||||
|
||||
Finally, click the button to see the conditional rendering of the component based on its `state`.
|
||||
Finalmente, haz clic en el botón para ver la renderizado condicional del componente basado en su `state`.
|
||||
|
||||
**Hint:** Don't forget to bind the `this` keyword to the method in the `constructor`!
|
||||
**Pista:** ¡No olvides enlazar la palabra clave `this` al método en el `constructor`!
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should return a `div` element which contains a `button`.
|
||||
`MyComponent` debe devolver un elemento `div` el cual debe contener una etiqueta `button`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@ -56,7 +56,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyComponent` should initialize with a `visibility` property set to `false`.
|
||||
El estado de `MyComponent` debe inicializarse con una propiedad `visibility` establecida a `false`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@ -65,7 +65,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
Clicking the button element should toggle the `visibility` property in state between `true` and `false`.
|
||||
Al hacer clic en el botón se debe cambiar la propiedad `visibility` en el estado entre `true` y `false`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -89,7 +89,7 @@ Clicking the button element should toggle the `visibility` property in state bet
|
||||
})();
|
||||
```
|
||||
|
||||
An anonymous function should be passed to `setState`.
|
||||
Una función anónima debe pasarse a `setState`.
|
||||
|
||||
```js
|
||||
const paramRegex = '[a-zA-Z$_]\\w*(,[a-zA-Z$_]\\w*)?';
|
||||
@ -104,7 +104,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`this` should not be used inside `setState`
|
||||
`this` no debe usarse dentro de `setState`
|
||||
|
||||
```js
|
||||
assert(!/this\.setState\([^}]*this/.test(code));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617d
|
||||
title: Use the Lifecycle Method componentDidMount
|
||||
title: Usa el método de ciclo de vida componentDidMount
|
||||
challengeType: 6
|
||||
forumTopicId: 301422
|
||||
dashedName: use-the-lifecycle-method-componentdidmount
|
||||
@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentdidmount
|
||||
|
||||
# --description--
|
||||
|
||||
Most web developers, at some point, need to call an API endpoint to retrieve data. If you're working with React, it's important to know where to perform this action.
|
||||
La mayoría de los desarrolladores web, en algún momento, necesitan llamar al endpoint de un API para obtener datos. Si estás trabajando con React, es importante saber dónde realizar esta acción.
|
||||
|
||||
The best practice with React is to place API calls or any calls to your server in the lifecycle method `componentDidMount()`. This method is called after a component is mounted to the DOM. Any calls to `setState()` here will trigger a re-rendering of your component. When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data.
|
||||
La mejor práctica con React es ubicar las llamadas API o cualquier llamada a tu servidor en el método de ciclo de vida `componentDidMount()`. Este método se llama después de que un componente es montado (mounted) en el DOM. Cualquier llamada a `setState()` aquí desencadenará un re-renderizado de tu componente. Cuando se llame a una API en este método, y se modifique el estado con los datos que la API devuelve, automáticamente se ejecutará una actualización una vez que los datos sean recibidos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There is a mock API call in `componentDidMount()`. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of `activeUsers` in the `h1` after the text `Active Users:`. Watch what happens in the preview, and feel free to change the timeout to see the different effects.
|
||||
Hay una llamada simulada al API en `componentDidMount()`. Esta llamada modifica el estado después de 2.5 segundos para simular una llamada a un servidor para obtener datos. Este ejemplo consulta el total de usuarios activos actual para un sitio. En el método render, se renderiza el valor de `activeUsers` en el `h1` después del texto `Active Users:`. Mira lo que sucede en la vista previa, y siéntete libre de cambiar el tiempo de espera para ver los diferentes efectos.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should render a `div` element which wraps an `h1` tag.
|
||||
`MyComponent` debe mostrar un elemento `div` el cual contiene una etiqueta `h1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -32,7 +32,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Component state should be updated with a timeout function in `componentDidMount`.
|
||||
El estado del componente debe actualizarse con una función timeout en `componentDidMount`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `h1` tag should render the `activeUsers` value from `MyComponent`'s state.
|
||||
La etiqueta `h1` debe renderizar el valor `activeUsers` del estado de `MyComponent`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617c
|
||||
title: Use the Lifecycle Method componentWillMount
|
||||
title: Usa el método de ciclo de vida componentWillMount
|
||||
challengeType: 6
|
||||
forumTopicId: 301423
|
||||
dashedName: use-the-lifecycle-method-componentwillmount
|
||||
@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentwillmount
|
||||
|
||||
# --description--
|
||||
|
||||
React components have several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component. These are called lifecycle methods, or lifecycle hooks, and allow you to catch components at certain points in time. This can be before they are rendered, before they update, before they receive props, before they unmount, and so on. Here is a list of some of the main lifecycle methods: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` The next several lessons will cover some of the basic use cases for these lifecycle methods.
|
||||
Los componentes React tienen varios métodos especiales que proporcionan oportunidades para realizar acciones en puntos específicos en el ciclo de vida de un componente. Estos se llaman métodos de ciclo de vida, o interceptores (hooks) de ciclo de vida, y te permiten interceptar componentes en determinados momentos del tiempo. Esto puede ser antes de que se rendericen, antes de que se actualicen, antes de que reciban las props, antes de que se desmonten, etc. Aquí hay una lista de algunos de los métodos principales del ciclo de vida: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()`. Las siguientes lecciones cubrirán algunos de los casos de uso básicos para estos métodos del ciclo de vida.
|
||||
|
||||
**Note:** The `componentWillMount` Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. [(Source)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||||
**Nota:** El método de ciclo de vida `componentWillMount` se desaprobará en una versión futura de 16.X y se eliminará en la versión 17. [(Fuente)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `componentWillMount()` method is called before the `render()` method when a component is being mounted to the DOM. Log something to the console within `componentWillMount()` - you may want to have your browser console open to see the output.
|
||||
El método `componentWillMount()` es invocado antes del método `render()` cuando un componente está siendo montado en el DOM. Imprime algo en la consola dentro de `componentWillMount()` - puede que quieras tener la consola del navegador abierta para ver el resultado.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should render a `div` element.
|
||||
`MyComponent` debe renderizar un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`console.log` should be called in `componentWillMount`.
|
||||
`console.log` debe ser llamado en `componentWillMount`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036168
|
||||
title: Write a React Component from Scratch
|
||||
title: Escribe un componente React desde cero
|
||||
challengeType: 6
|
||||
forumTopicId: 301424
|
||||
dashedName: write-a-react-component-from-scratch
|
||||
@ -8,17 +8,17 @@ dashedName: write-a-react-component-from-scratch
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you've learned the basics of JSX and React components, it's time to write a component on your own. React components are the core building blocks of React applications so it's important to become very familiar with writing them. Remember, a typical React component is an ES6 `class` which extends `React.Component`. It has a render method that returns HTML (from JSX) or `null`. This is the basic form of a React component. Once you understand this well, you will be prepared to start building more complex React projects.
|
||||
Ahora que has aprendido los conceptos básicos de JSX y componentes React, es el momento de escribir un componente por tu cuenta. Los componentes React son el bloque de construcción principal de las aplicaciones React, por lo que es importante familiarizarse con cómo escribirlos. Recuerda, un componente típico de React es una `class` ES6 que hereda de `React.Component`. Tiene un método de render que retorna HTML (de JSX) o `null`. Esta es la estructura básica de un componente React. Una vez que tengas un buen entendimiento de esto, estarás preparado para empezar a construir proyectos React más complejos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Define a class `MyComponent` that extends `React.Component`. Its render method should return a `div` that contains an `h1` tag with the text: `My First React Component!` in it. Use this text exactly, the case and punctuation matter. Make sure to call the constructor for your component, too.
|
||||
Define una clase `MyComponent` que herede de `React.Component`. Su método render debe devolver un `div` que contenga una etiqueta `h1` con el texto: `My First React Component!` en él. Utiliza este texto de manera exacta, las mayúsculas, minúsculas y puntuación son importantes. También asegúrate de llamar el constructor de tu componente.
|
||||
|
||||
Render this component to the DOM using `ReactDOM.render()`. There is a `div` with `id='challenge-node'` available for you to use.
|
||||
Renderiza este componente al DOM usando `ReactDOM.render()`. Hay un `div` con `id='challenge-node'` disponible para que lo uses.
|
||||
|
||||
# --hints--
|
||||
|
||||
There should be a React component called `MyComponent`.
|
||||
Debe existir un componente React llamado `MyComponent`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -29,7 +29,7 @@ There should be a React component called `MyComponent`.
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should contain an `h1` tag with text `My First React Component!` Case and punctuation matter.
|
||||
`MyComponent` debe contener una etiqueta `h1` con texto `My First React Component!`. Las mayúsculas, minúsculas y puntuación son importantes.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,13 +40,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should render to the DOM.
|
||||
`MyComponent` debe renderizarse al DOM.
|
||||
|
||||
```js
|
||||
assert(document.getElementById('challenge-node').childNodes.length === 1);
|
||||
```
|
||||
|
||||
`MyComponent` should have a constructor calling `super` with `props`.
|
||||
`MyComponent` debe tener un constructor invocando `super` con las `props`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036177
|
||||
title: Write a Simple Counter
|
||||
title: Escribe un contador simple
|
||||
challengeType: 6
|
||||
forumTopicId: 301425
|
||||
dashedName: write-a-simple-counter
|
||||
@ -8,17 +8,17 @@ dashedName: write-a-simple-counter
|
||||
|
||||
# --description--
|
||||
|
||||
You can design a more complex stateful component by combining the concepts covered so far. These include initializing `state`, writing methods that set `state`, and assigning click handlers to trigger these methods.
|
||||
Puedes diseñar un componente con un estado más complejo combinando los conceptos cubiertos hasta ahora. Estos incluyen inicializar el `state`, escribir métodos que establezcan `state` y asignar manejadores de eventos clic para activar estos métodos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `Counter` component keeps track of a `count` value in `state`. There are two buttons which call methods `increment()` and `decrement()`. Write these methods so the counter value is incremented or decremented by 1 when the appropriate button is clicked. Also, create a `reset()` method so when the reset button is clicked, the count is set to 0.
|
||||
El componente `Counter` mantiene un seguimiento de un valor `count` en el `state`. Hay dos botones que llaman a métodos `increment()` y `decrement()`. Escribe estos métodos para que el valor del contador sea incrementado o decrementado por 1 cuando se haga clic en el botón apropiado. También, crea un método `reset()` para que cuando se haga clic en el botón reset, el contador se establezca a 0.
|
||||
|
||||
**Note:** Make sure you don't modify the `className`s of the buttons. Also, remember to add the necessary bindings for the newly-created methods in the constructor.
|
||||
**Nota:** Asegúrate de no modificar el `className`de los botones. Además, recuerda agregar en el constructor los enlaces necesarios para los métodos recién creados.
|
||||
|
||||
# --hints--
|
||||
|
||||
`Counter` should return a `div` element which contains three buttons with text content in this order `Increment!`, `Decrement!`, `Reset`.
|
||||
`Counter` debe devolver un elemento `div` que contiene tres botones con contenido de texto en este orden `Increment!`, `Decrement!`, `Reset`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -33,14 +33,14 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `Counter` should initialize with a `count` property set to `0`.
|
||||
El estado de `Counter` debe inicializarse con una propiedad `count` establecida en `0`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: 0');
|
||||
```
|
||||
|
||||
Clicking the increment button should increment the count by `1`.
|
||||
Al hacer clic en el botón de incremento se incrementará el contador en `1`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
@ -48,7 +48,7 @@ mockedComponent.find('.inc').simulate('click');
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: 1');
|
||||
```
|
||||
|
||||
Clicking the decrement button should decrement the count by `1`.
|
||||
Al hacer clic en el botón de disminuir se reducirá el contador en `1`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
@ -56,7 +56,7 @@ mockedComponent.find('.dec').simulate('click');
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: -1');
|
||||
```
|
||||
|
||||
Clicking the reset button should reset the count to `0`.
|
||||
Al hacer clic en el botón reset se reiniciará el contador a `0`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
|
||||
@ -33,7 +33,7 @@ assert(result[0] == '<h1>');
|
||||
`myRegex` dovrebbe usare la corrispondenza lazy
|
||||
|
||||
```js
|
||||
assert(/\?/g.test(myRegex));
|
||||
assert(/[^\\][\*\+\?]\?/.test(myRegex));
|
||||
```
|
||||
|
||||
`myRegex` non dovrebbe includere la stringa `h1`
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: exercise-tracker
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://exercise-tracker.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) e completa il tuo progetto localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker) per completare il tuo progetto.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata pubblicamente da qualche parte. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: file-metadata-microservice
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://file-metadata-microservice.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) e completare il tuo progetto localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata) per completare il tuo progetto.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: request-header-parser-microservice
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://request-header-parser-microservice.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-headerparser/) e completare il tuo progetto localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser) per completare il tuo progetto.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: timestamp-microservice
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://timestamp-microservice.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-timestamp/) e completare il tuo progetto localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp) per completare il tuo progetto.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: url-shortener-microservice
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://url-shortener-microservice.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-urlshortener/) e completare il tuo progetto localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener) per completare il tuo progetto.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: meet-the-node-console
|
||||
Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-express/) e completare queste sfide localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-express) per completare queste sfide.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-express) per completare queste sfide.
|
||||
- Usa un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`.
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa
|
||||
Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-npm/) e completare queste sfide localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-npm) per completare queste sfide.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-npm) per completare queste sfide.
|
||||
- Usare un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file dal nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata pubblicamente da qualche parte. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: install-and-set-up-mongoose
|
||||
Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) e completare queste sfide localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose) per completare queste sfide.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose) per completare queste sfide.
|
||||
- Usa un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file dal nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata pubblicamente da qualche parte. Quindi invia l'URL nel campo `Solution Link`.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5895f700f9fc0f352b528e63
|
||||
title: Set up a Template Engine
|
||||
title: Imposta un template engine
|
||||
challengeType: 2
|
||||
forumTopicId: 301564
|
||||
dashedName: set-up-a-template-engine
|
||||
@ -8,31 +8,31 @@ dashedName: set-up-a-template-engine
|
||||
|
||||
# --description--
|
||||
|
||||
Working on these challenges will involve you writing your code using one of the following methods:
|
||||
Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-advancednode/) and complete these challenges locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-advancednode) to complete these challenges.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-advancednode/) e completare queste sfide localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-advancednode) per completare queste sfide.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`.
|
||||
|
||||
A template engine enables you to use static template files (such as those written in *Pug*) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client.
|
||||
Un modello di motore ti permette di utilizzare file di template statici (come quelli scritti in *Pug*) nella tua app. Al runtime, il template engine sostituisce le variabili in un file modello con valori effettivi che possono essere forniti dal tuo server. Quindi trasforma il template in un file HTML statico che viene inviato al client. Questo approccio facilita la progettazione di una pagina HTML e permette di visualizzare le variabili sulla pagina senza dover effettuare una chiamata API dal client.
|
||||
|
||||
Add `pug@~3.0.0` as a dependency in your `package.json` file.
|
||||
Aggiungi `pug@~3.0.0` come dipendenza nel tuo file `package.json`.
|
||||
|
||||
Express needs to know which template engine you are using. We will use the `set` method to assign `pug` as the `view engine` property's value: `app.set('view engine', 'pug')`
|
||||
Express deve sapere quale templare engine si sta utilizzando. Utilizzeremo il metodo `set` per assegnare `pug` come valore di `view engine` della proprietà: `app.set('view engine', 'pug')`
|
||||
|
||||
Your page will not load until you correctly render the index file in the `views/pug` directory.
|
||||
La tua pagina non verrà caricata finché non esegui correttamente il rendering del file index nella directory `views/pug`.
|
||||
|
||||
Change the argument of the `res.render()` declaration in the `/` route to be the file path to the `views/pug` directory. The path can be a relative path (relative to views), or an absolute path, and does not require a file extension.
|
||||
Modifica l’argomento della dichiarazione `res.render()` nella rotta `/` in modo che sia il percorso di file per la directory `views/pug`. Il percorso può essere un percorso relativo (relativo alle viste), o un percorso assoluto, e non richiede un'estensione del file.
|
||||
|
||||
If all went as planned, your app home page will stop showing the message "`Pug template is not defined.`" and will now display a message indicating you've successfully rendered the Pug template!
|
||||
Se tutto è andato come previsto, la tua home page dell'app smetterà di mostrare il messaggio "`Pug template is not defined.`" e ora mostrerà un messaggio che indica che hai reso con successo il modello Pug!
|
||||
|
||||
Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point [here](https://gist.github.com/camperbot/3515cd676ea4dfceab4e322f59a37791).
|
||||
Invia la tua pagina quando pensi che sia corretto. Se incontri degli errori, puoi controllare il progetto completato fino a questo punto [qui](https://gist.github.com/camperbot/3515cd676ea4dfceab4e322f59a37791).
|
||||
|
||||
# --hints--
|
||||
|
||||
Pug should be a dependency.
|
||||
Pug dovrebbe essere una dipendenza.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -51,7 +51,7 @@ Pug should be a dependency.
|
||||
);
|
||||
```
|
||||
|
||||
View engine should be Pug.
|
||||
Il motore di visualizzazione dovrebbe essere Pug.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -69,7 +69,7 @@ View engine should be Pug.
|
||||
);
|
||||
```
|
||||
|
||||
Use the correct ExpressJS method to render the index page from the response.
|
||||
Utilizza il metodo ExpressJS corretto per visualizzare la pagina index dalla risposta.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -87,7 +87,7 @@ Use the correct ExpressJS method to render the index page from the response.
|
||||
);
|
||||
```
|
||||
|
||||
Pug should be working.
|
||||
Pug dovrebbe funzionare.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -111,7 +111,7 @@ La sessione e il segreto di sessione dovrebbero essere impostate correttamente.
|
||||
(data) => {
|
||||
assert.match(
|
||||
data,
|
||||
/secret:( |)process.env.SESSION_SECRET/gi,
|
||||
/secret:( |)process\.env(\.SESSION_SECRET|\[(?<q>"|')SESSION_SECRET\k<q>\])/g,
|
||||
'Your express app should have express-session set up with your secret as process.env.SESSION_SECRET'
|
||||
);
|
||||
},
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: assert-deep-equality-with--deepequal-and--notdeepequal
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene costruito a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`deepEqual()` afferma che due oggetti sono uguali in maniera profonda.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: compare-the-properties-of-two-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene costruito a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824a367417b2b2512c46
|
||||
title: Learn How JavaScript Assertions Work
|
||||
title: Imparare come funzionano le asserzioni Javascript
|
||||
challengeType: 2
|
||||
forumTopicId: 301589
|
||||
dashedName: learn-how-javascript-assertions-work
|
||||
@ -8,21 +8,21 @@ dashedName: learn-how-javascript-assertions-work
|
||||
|
||||
# --description--
|
||||
|
||||
Working on these challenges will involve you writing your code using one of the following methods:
|
||||
Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-mochachai/) and complete these challenges locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-mochachai) to complete these challenges.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/) e completare queste sfide localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai) per completare queste sfide.
|
||||
- Usare un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#1` in the `Basic Assertions` suite, change each `assert` to either `assert.isNull` or `assert.isNotNull` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#1`, nella suite `Basic Assertions`, cambia ogni asserzione `assert` in `assert.isNull` o `assert.isNotNull` per far superare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -36,7 +36,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `isNull` vs. `isNotNull`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `isNull` oppure `isNotNull`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -50,7 +50,7 @@ You should choose the correct method for the first assertion - `isNull` vs. `isN
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `isNull` vs. `isNotNull`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `isNull` oppure `isNotNull`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-me
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene costruito a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Nel prossimo esempio vedremo come inviare i dati in nel corpo di un payload di richiesta. Stiamo per testare una richiesta PUT. L'endpoint `'/travellers'` accetta un oggetto JSON che prende la struttura:
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824f367417b2b2512c5b
|
||||
title: Run Functional Tests on an API Response using Chai-HTTP IV - PUT method
|
||||
title: Eseguire test funzionali su una risposta API utilizzando il metodo PUT di Chai-HTTP IV
|
||||
challengeType: 2
|
||||
forumTopicId: 301591
|
||||
dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-method
|
||||
@ -8,15 +8,15 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). This exercise is similar to the preceding one. Look at it for the details.
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). Questo esercizio è simile a quello precedente. Guardalo per i dettagli.
|
||||
|
||||
Now that you have seen how it is done, it is your turn to do it from scratch.
|
||||
Ora che hai visto come si fa, tocca a te farlo da zero.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, alter the `'send {surname: "da Verrazzano"}'` test (`// #4`):
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'send {surname: "da Verrazzano"}'` (`// #4`):
|
||||
|
||||
Send the following JSON response as a payload to the `/travellers` route:
|
||||
Invia la seguente risposta JSON come carico utile sulla rotta `/travellers`:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -24,18 +24,18 @@ Send the following JSON response as a payload to the `/travellers` route:
|
||||
}
|
||||
```
|
||||
|
||||
Check for the following, within a `request.end` callback:
|
||||
Controlla quanto segue, all'interno della callback `request.end`:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
|
||||
Follow the assertion order above - we rely on it. Be sure to remove `assert.fail()`, once complete.
|
||||
Segui l'ordine di asserzione indicato sopra - facciamo affidamento su di esso. Assicurati di rimuovere `assert.fail()`, una volta finito.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass
|
||||
Tutti i test dovrebbero essere superati
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -49,7 +49,7 @@ All tests should pass
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.status' to be 200
|
||||
Dovresti verificare che 'res.status' sia 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -65,7 +65,7 @@ You should test for 'res.status' to be 200
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.type' to be 'application/json'
|
||||
Dovresti verificare che 'res.type' sia 'application/json'
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -81,7 +81,7 @@ You should test for 'res.type' to be 'application/json'
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.body.name' to be 'Giovanni'
|
||||
Dovresti verificare che 'res.body.name' sia 'Giovanni'
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -97,7 +97,7 @@ You should test for 'res.body.name' to be 'Giovanni'
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.body.surname' to be 'da Verrazzano'
|
||||
Dovresti verificare che 'res.body.surname' sia 'da Verrazzano''
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824f367417b2b2512c59
|
||||
title: Run Functional Tests on API Endpoints using Chai-HTTP II
|
||||
title: Eseguire test funzionali sugli endpoint API utilizzando Chai-HTTP II
|
||||
challengeType: 2
|
||||
forumTopicId: 301592
|
||||
dashedName: run-functional-tests-on-api-endpoints-using-chai-http-ii
|
||||
@ -8,17 +8,17 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http-ii
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with your name'` test (`// #2`) to assert the `status` and the `text` response to make the test pass.
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'Test GET /hello with your name'` (`// #2`) per asserire che le risposte `status` e `text` facciano passare i test.
|
||||
|
||||
Send your name in the query, appending `?name=<your_name>` to the route. The endpoint responds with `'hello <your_name>'`.
|
||||
Invia il tuo nome nella query, aggiungendo `?name=<your_name>` alla rotta. L'endpoint risponde con `'hello <your_name>'`.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass
|
||||
Tutti i test dovrebbero essere superati
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -32,7 +32,7 @@ All tests should pass
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.status' == 200
|
||||
Dovresti verificare che 'res.status' == 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -48,7 +48,7 @@ You should test for 'res.status' == 200
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.text' == 'hello Guest'
|
||||
Dovresti verificare che 'res.text' == 'hello Guest'
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824e367417b2b2512c58
|
||||
title: Run Functional Tests on API Endpoints using Chai-HTTP
|
||||
title: Eseguire test funzionali sugli endpoint API utilizzando Chai-HTTP
|
||||
challengeType: 2
|
||||
forumTopicId: 301593
|
||||
dashedName: run-functional-tests-on-api-endpoints-using-chai-http
|
||||
@ -8,13 +8,13 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Mocha allows testing asyncronous operations. There is a small (BIG) difference. Can you spot it?
|
||||
Mocha consente di testare operazioni asincrone. C'è una piccola (GRANDE) differenza. Riesce a individuarla?
|
||||
|
||||
We can test our API endpoints using a plugin, called `chai-http`. Let's see how it works. And remember, API calls are asynchronous.
|
||||
Possiamo testare i nostri endpoint API utilizzando un plugin, chiamato `chai-http`. Vediamo come funziona. E ricorda, le chiamate API sono asincrone.
|
||||
|
||||
The following is an example of a test using `chai-http` for the `'GET /hello?name=[name] => "hello [name]"'` suite. The test sends a name string in a url query string (`?name=John`) using a `GET`request to the `server`. In the `end` method's callback function, the response object (`res`) is received and contains the `status` property. The first `assert.equal` checks if the status is equal to `200`. The second `assert.equal` checks that the response string (`res.text`) is equal to `"hello John"`.
|
||||
Il seguente è un esempio di test che utilizza `chai-http` per la suite `'GET /hello?name=[name] => "hello [name]"'`. Il test invia un nome in una stringa di query URL (`?name=John`) utilizzando una richiesta `GET` al `server`. Nella funzione di callback del metodo `end`, l'oggetto di risposta (`res`) viene ricevuto e contiene la proprietà `status`. Il primo `assert.equal` controlla se lo stato è pari a `200`. Il secondo `assert.equal` verifica che la stringa di risposta (`res.text`) sia uguale a `"hello John"`.
|
||||
|
||||
```js
|
||||
suite('GET /hello?name=[name] => "hello [name]"', function () {
|
||||
@ -34,17 +34,17 @@ suite('GET /hello?name=[name] => "hello [name]"', function () {
|
||||
});
|
||||
```
|
||||
|
||||
Notice the `done` parameter in the test's callback function. Calling it at the end without an argument is necessary to signal successful asynchronous completion.
|
||||
Nota il parametro `done` nella funzione di callback del test. Chiamarlo alla fine senza un argomento è necessario per segnalare il successo del completamento asincrono.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with no name'` test (`// #1`) to assert the `status` and the `text` response to make the test pass. Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'Test GET /hello with no name'` (`// #1`) per asserire che le risposte `status` e `text` facciano passare i test. Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
There should be no name in the query; the endpoint responds with `hello Guest`.
|
||||
Non ci dovrebbe essere alcun nome nella query; l'endpoint risponde con `hello Guest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass
|
||||
Tutti i test dovrebbero essere superati
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -58,7 +58,7 @@ All tests should pass
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.status' == 200
|
||||
Dovresti verificare che 'res.status' == 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -74,7 +74,7 @@ You should test for 'res.status' == 200
|
||||
);
|
||||
```
|
||||
|
||||
You should test for 'res.text' == 'hello Guest'
|
||||
Dovresti testare che 'res.text' == 'hello Guest'
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: run-functional-tests-using-a-headless-browser-ii
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene costruito a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d8250367417b2b2512c5d
|
||||
title: Run Functional Tests using a Headless Browser
|
||||
title: Eseguire test funzionali usando un headless browser
|
||||
challengeType: 2
|
||||
forumTopicId: 301595
|
||||
dashedName: run-functional-tests-using-a-headless-browser
|
||||
@ -8,9 +8,9 @@ dashedName: run-functional-tests-using-a-headless-browser
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
In the HTML main view we provided a input form. It sends data to the `PUT /travellers` endpoint that we used above with an Ajax request. When the request successfully completes, the client code appends a `<div>` containing the info returned by the call to the DOM. Here is an example of how to interact with this form:
|
||||
Nella vista principale HTML abbiamo fornito un modulo di input. Esso invia con una richiesta Ajax i dati all'endpoint `PUT /travellers` che abbiamo usato sopra. Quando la richiesta è completata con successo, il codice client aggiunge un `<div>` contenente le informazioni restituite dalla chiamata al DOM. Ecco un esempio di come interagire con questo modulo:
|
||||
|
||||
```js
|
||||
test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
@ -24,36 +24,36 @@ test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
}
|
||||
```
|
||||
|
||||
First, the `fill` method of the `browser` object fills the `surname` field of the form with the value `'Polo'`. Immediately after, the `pressButton` method invokes the `submit` event listener of the form. The `pressButton` method is asynchronous.
|
||||
In primo luogo, il metodo `fill` dell'oggetto `browser` compila il campo `surname` del modulo con il valore `'Polo'`. Subito dopo, il metodo `pressButton` invoca l'event lister `submit` del modulo. Il metodo `pressButton` è asincrono.
|
||||
|
||||
Then, once a response is received from the AJAX request, a few assertions are made confirming:
|
||||
Poi, una volta ricevuta una risposta dalla richiesta AJAX, vengono fatte alcune asserzioni, confermando che:
|
||||
|
||||
1. The status of the response is `200`
|
||||
2. The text within the `<span id='name'></span>` element matches `'Marco'`
|
||||
3. The text within the `<span id='surname'></span>` element matches `'Polo'`
|
||||
4. There is `1` `<span id='dates'></span>` element.
|
||||
1. Lo stato della risposta è `200`
|
||||
2. Il testo all'interno dell'elemento `<span id='name'></span>` corrisponde a `'Marco'`
|
||||
3. Il testo all'interno dell'elemento `<span id='surname'></span>` corrisponde a `'Polo'`
|
||||
4. C'è `1` elemento `<span id='dates'></span>`.
|
||||
|
||||
Finally, the `done` callback is invoked, which is needed due to the asynchronous test.
|
||||
Infine, viene invocata la callback `done`, che è necessaria a causa del test asincrono.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, in the `'submit "surname" : "Colombo" - write your e2e test...'` test (`// #5`), automate filling-in and submitting the form:
|
||||
All'interno di `tests/2_functional-tests.js`, nel test `'submit "surname" : "Colombo" - write your e2e test...'` (`// #5`), automatizza la compilazione e invia il modulo:
|
||||
|
||||
1. Fill in the form
|
||||
2. Submit it pressing `'submit'` button.
|
||||
1. Compila il modulo
|
||||
2. Invia premendo il pulsante `'submit'`.
|
||||
|
||||
Within the callback:
|
||||
All'interno della callback:
|
||||
|
||||
1. assert that status is OK `200`
|
||||
2. assert that the text inside the element `span#name` is `'Cristoforo'`
|
||||
3. assert that the text inside the element `span#surname` is `'Colombo'`
|
||||
4. assert that the element(s) `span#dates` exist and their count is `1`
|
||||
1. asserisci che lo stato è OK `200`
|
||||
2. asserisci che il testo all'interno dell'elemento `span#name` è `'Cristoforo'`
|
||||
3. asserisci che il testo all'interno dell'elemento `span#surname` è `'Colombo'`
|
||||
4. asserisci che gli elementi `span#dates` esistono e il loro conteggio è `1`
|
||||
|
||||
Do not forget to remove the `assert.fail()` call.
|
||||
Non dimenticare di rimuovere la chiamata `assert.fail()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -67,7 +67,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the headless browser request succeeded.
|
||||
Dovresti asserire che la richiesta dell'headless browser sia riuscita.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -81,7 +81,7 @@ You should assert that the headless browser request succeeded.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the text inside the element 'span#name' is 'Cristoforo'.
|
||||
Dovresti asserire che il testo all'interno dell'elemento 'span#name' sia 'Cristoforo'.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -97,7 +97,7 @@ You should assert that the text inside the element 'span#name' is 'Cristoforo'.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the text inside the element 'span#surname' is 'Colombo'.
|
||||
Dovresti asserire che il testo all'interno dell'elemento 'span#surname' sia 'Colombo'.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -113,7 +113,7 @@ You should assert that the text inside the element 'span#surname' is 'Colombo'.
|
||||
);
|
||||
```
|
||||
|
||||
You should assert that the element 'span#dates' exist and its count is 1.
|
||||
Dovresti asserire che l'elemento 'span#dates' esiste e il suo conteggio sia 1.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,45 +1,45 @@
|
||||
---
|
||||
id: 587d824f367417b2b2512c5c
|
||||
title: Simulate Actions Using a Headless Browser
|
||||
title: Simulare azioni usando un headless browser
|
||||
challengeType: 2
|
||||
dashedName: simulate-actions-using-a-headless-browser
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
In the next challenges we are going to simulate the human interaction with a page using a device called 'Headless Browser'.
|
||||
Nelle prossime sfide simuleremo l'interazione umana con una pagina utilizzando un dispositivo chiamato 'Headless Browser' (browser senza testa).
|
||||
|
||||
A headless browser is a web browser without a graphical user interface. This kind of tool is particularly useful for testing web pages, as it is able to render and understand HTML, CSS, and JavaScript the same way a browser would.
|
||||
Un headless browser è un browser web senza interfaccia utente grafica. Questo tipo di strumento è particolarmente utile per testare le pagine web, poiché è in grado di renderizzare e capire HTML, CSS, e JavaScript proprio come farebbe un browser.
|
||||
|
||||
For these challenges we are using Zombie.JS. It's a lightweight browser which is totally based on JS, without relying on additional binaries to be installed. This feature makes it usable in an environment such as Replit. There are many other (more powerful) options.
|
||||
Per queste sfide stiamo usando Zombie.JS. È un browser leggero che è totalmente basato su JS, che non richiede binari aggiuntivi da installare. Questa funzione lo rende utilizzabile in un ambiente come Replit. Ci sono molte altre opzioni (più potenti).
|
||||
|
||||
Mocha allows you to prepare the ground running some code before the actual tests. This can be useful for example to create items in the database, which will be used in the successive tests.
|
||||
Mocha ti consente di preparare il terreno eseguendo del codice prima dei test effettivi. Questo può essere utile, ad esempio, per creare elementi nel database, che saranno utilizzati nei test successivi.
|
||||
|
||||
With a headless browser, before the actual testing, we need to **visit** the page we are going to inspect. The `suiteSetup` 'hook' is executed only once at the suite startup. Other different hook types can be executed before each test, after each test, or at the end of a suite. See the Mocha docs for more information.
|
||||
Con un headless browser, prima del test effettivo, abbiamo bisogno di **visitare** la pagina che stiamo per controllare. L'hook' `suiteSetup` viene eseguito solo una volta all'avvio della suite. Altri tipi di hook possono essere esuiti prima di ogni test, dopo ogni test, o alla fine della suite. Vedi la documentazione di Mocha per maggiori informazioni.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/2_functional-tests.js`, immediately after the `Browser` declaration, add your project URL to the `site` property of the variable:
|
||||
All'interno di `tests/2_functional-tests.js`, immediatamente dopo la dichiarazione `Browser`, aggiungi l'URL del tuo progetto alla proprietà `site` della variabile:
|
||||
|
||||
```js
|
||||
Browser.site = 'https://sincere-cone.gomix.me'; // Your URL here
|
||||
```
|
||||
|
||||
If you are testing on a local environment replace the line above with
|
||||
Se stai testando su un ambiente locale, sostituisci la riga precedente con
|
||||
|
||||
```js
|
||||
Browser.localhost('example.com', process.env.PORT || 3000);
|
||||
```
|
||||
|
||||
Within `tests/2_functional-tests.js`, at the root level of the `'Functional Tests with Zombie.js'` suite, instantiate a new instance of the `Browser` object with the following code:
|
||||
All'interno di `tests/2_functional-tests.js`, al livello root della suite `'Functional Tests with Zombie.js'`, crea una nuova istanza dell'oggetto `Browser` con il seguente codice:
|
||||
|
||||
```js
|
||||
const browser = new Browser();
|
||||
```
|
||||
|
||||
Then, use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code:
|
||||
Quindi, utilizza l'hook `suiteSetup` per indirizzare il `browser` al percorso `/` con il seguente codice:
|
||||
|
||||
```js
|
||||
suiteSetup(function(done) {
|
||||
@ -49,7 +49,7 @@ suiteSetup(function(done) {
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824b367417b2b2512c49
|
||||
title: Test for Truthiness
|
||||
title: Testare la veridicità
|
||||
challengeType: 2
|
||||
forumTopicId: 301596
|
||||
dashedName: test-for-truthiness
|
||||
@ -8,9 +8,9 @@ dashedName: test-for-truthiness
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`isTrue()` will test for the boolean value `true` and `isNotTrue()` will pass when given anything but the boolean value of `true`.
|
||||
`isTrue()` testa per il valore boleano `true` e `isNotTrue()` passa per qualsiasi cosa che non sia il valore booleano `true`.
|
||||
|
||||
```js
|
||||
assert.isTrue(true, 'this will pass with the boolean value true');
|
||||
@ -18,15 +18,15 @@ assert.isTrue('true', 'this will NOT pass with the string value "true"');
|
||||
assert.isTrue(1, 'this will NOT pass with the number value 1');
|
||||
```
|
||||
|
||||
`isFalse()` and `isNotFalse()` also exist, and behave similarly to their true counterparts except they look for the boolean value of `false`.
|
||||
Esistono anche `isFalse()` e `isNotFalse()`, si comportano in maniera simile alle loro controparti con true tranne per il fatto che testano per il valore booleano `false`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#4` in the `Basic Assertions` suite, change each `assert` to either `assert.isTrue` or `assert.isNotTrue` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js` sotto il test etichettato con `#4` nella suite `Basic Assertions`, cambia ogni `assert` con `assert.isTrue` oppure `assert.isNotTrue` per fare passare il test (dovrebbe essere uguale a `true`). Non cambiare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -40,7 +40,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `isTrue` vs. `isNotTrue`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `isTrue` oppure `isNotTrue`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -54,7 +54,7 @@ You should choose the correct method for the first assertion - `isTrue` vs. `isN
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `isTrue` vs. `isNotTrue`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `isTrue` oppure `isNotTrue`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -72,7 +72,7 @@ You should choose the correct method for the second assertion - `isTrue` vs. `is
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `isTrue` vs. `isNotTrue`.
|
||||
Dovresti scegliere il metodo corretto per la terza asserzione - `isTrue` oppure `isNotTrue`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824d367417b2b2512c53
|
||||
title: Test if a String Contains a Substring
|
||||
title: Verificare se una stringa contiene una sottostringa
|
||||
challengeType: 2
|
||||
forumTopicId: 301597
|
||||
dashedName: test-if-a-string-contains-a-substring
|
||||
@ -8,17 +8,17 @@ dashedName: test-if-a-string-contains-a-substring
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`include()` and `notInclude()` work for strings too! `include()` asserts that the actual string contains the expected substring.
|
||||
`include()` e `notInclude()` funzionano anche per le stringhe! `include()` afferma che la stringa attuale contiene la sottostringa prevista.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#14` in the `Strings` suite, change each `assert` to either `assert.include` or `assert.notInclude` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#14`, nella suite `Strings`, cambia ogni asserzione `assert` in `assert.include` o `assert.notInclude` per far passare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -32,7 +32,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `include` vs. `notInclude`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `include` oppure `notInclude`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -50,7 +50,7 @@ You should choose the correct method for the first assertion - `include` vs. `no
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `include` vs. `notInclude`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `include` oppure `notInclude`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824c367417b2b2512c4f
|
||||
title: Test if a Value Falls within a Specific Range
|
||||
title: Verificare se un valore cade all'interno di uno specifico intervallo
|
||||
challengeType: 2
|
||||
forumTopicId: 301598
|
||||
dashedName: test-if-a-value-falls-within-a-specific-range
|
||||
@ -8,23 +8,23 @@ dashedName: test-if-a-value-falls-within-a-specific-range
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
```javascript
|
||||
.approximately(actual, expected, delta, [message])
|
||||
```
|
||||
|
||||
Asserts that the `actual` is equal to `expected`, to within a +/- `delta` range.
|
||||
Asserisce che `actual` sia uguale a `expected`, all'interno di un intervallo di +/- `delta`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#10` in the `Comparisons` suite, change each `assert` to `assert.approximately` to make the test pass (should evaluate to `true`).
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#10`, nella suite `Comparisons`, cambia ogni asserzione `assert` in `assert.approximately` per far passare il test (dovrebbe risultare `true`).
|
||||
|
||||
Choose the minimum range (3rd parameter) to make the test always pass. It should be less than 1.
|
||||
Scegli l'intervallo minimo (terzo parametro) per far passare sempre il test. Dovrebbe essere inferiore a 1.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -38,7 +38,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct range for the first assertion - `approximately(actual, expected, range)`.
|
||||
Dovresti scegliere l'intervallo corretto per la prima asserzione - `approximately(actual, expected, range)`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -57,7 +57,7 @@ You should choose the correct range for the first assertion - `approximately(act
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct range for the second assertion - `approximately(actual, expected, range)`.
|
||||
Dovresti scegliere l'intervallo corretto per la seconda asserzione - `approximately(actual, expected, range)`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824d367417b2b2512c52
|
||||
title: Test if a Value is a String
|
||||
title: Verificare se un valore è una stringa
|
||||
challengeType: 2
|
||||
forumTopicId: 301599
|
||||
dashedName: test-if-a-value-is-a-string
|
||||
@ -8,17 +8,17 @@ dashedName: test-if-a-value-is-a-string
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`isString` or `isNotString` asserts that the actual value is a string.
|
||||
`isString` or `isNotString` asserisce che il valore effettivo è una stringa.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#13` in the `Strings` suite, change each `assert` to either `assert.isString` or `assert.isNotString` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#13`, nella suite `Strings`, cambia ogni asserzione `assert` in `assert.isString` o `assert.isNotString` per far passare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -32,7 +32,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `isString` vs. `isNotString`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `isString` oppure `isNotString`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -50,7 +50,7 @@ You should choose the correct method for the first assertion - `isString` vs. `i
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `isString` vs. `isNotString`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `isString` oppure `isNotString`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -68,7 +68,7 @@ You should choose the correct method for the second assertion - `isString` vs. `
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `isString` vs. `isNotString`.
|
||||
Dovresti scegliere il metodo corretto per la terza asserzione - `isString` oppure `isNotString`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: test-if-a-value-is-an-array
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824e367417b2b2512c56
|
||||
title: Test if a Value is of a Specific Data Structure Type
|
||||
title: Verificare se un valore è di un tipo specifico di struttura dei dati
|
||||
challengeType: 2
|
||||
forumTopicId: 301601
|
||||
dashedName: test-if-a-value-is-of-a-specific-data-structure-type
|
||||
@ -8,17 +8,17 @@ dashedName: test-if-a-value-is-of-a-specific-data-structure-type
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`#typeOf` asserts that value's type is the given string, as determined by `Object.prototype.toString`.
|
||||
`#typeOf` asserisce che il tipo del valore è la stringa data, come determinato da `Object.prototype.toString`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#17` in the `Objects` suite, change each `assert` to either `assert.typeOf` or `assert.notTypeOf` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#17`, nella suite `Objects`, cambia ogni asserzione `assert` in `assert.typeOf` o `assert.notTypeOf` per far passare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -32,7 +32,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `typeOf` vs. `notTypeOf`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `typeOf` oppure `notTypeOf`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -50,7 +50,7 @@ You should choose the correct method for the first assertion - `typeOf` vs. `not
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `typeOf` vs. `notTypeOf`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `typeOf` oppure `notTypeOf`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -68,7 +68,7 @@ You should choose the correct method for the second assertion - `typeOf` vs. `no
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `typeOf` vs. `notTypeOf`.
|
||||
Dovresti scegliere il metodo corretto per la terza asserzione - `typeOf` oppure `notTypeOf`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -86,7 +86,7 @@ You should choose the correct method for the third assertion - `typeOf` vs. `not
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the fourth assertion - `typeOf` vs. `notTypeOf`.
|
||||
Dovresti scegliere il metodo corretto per la quarta asserzione - `typeOf` oppure `notTypeOf`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -104,7 +104,7 @@ You should choose the correct method for the fourth assertion - `typeOf` vs. `no
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the fifth assertion - `typeOf` vs. `notTypeOf`.
|
||||
Dovresti scegliere il metodo corretto per la quinta asserzione - `typeOf` oppure `notTypeOf`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824b367417b2b2512c47
|
||||
title: Test if a Variable or Function is Defined
|
||||
title: Verificare se una variabile o una funzione è definita
|
||||
challengeType: 2
|
||||
forumTopicId: 301602
|
||||
dashedName: test-if-a-variable-or-function-is-defined
|
||||
@ -8,15 +8,15 @@ dashedName: test-if-a-variable-or-function-is-defined
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#2` in the `Basic Assertions` suite, change each `assert` to either `assert.isDefined()` or `assert.isUndefined()` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#2`, nella suite `Basic Assertions`, cambia ogni asserzione `assert` in `assert.isDefined()` o `assert.isUndefined()` per far passare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -30,7 +30,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `isDefined` vs. `isUndefined`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `isDefined` oppure `isUndefined`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -48,7 +48,7 @@ You should choose the correct method for the first assertion - `isDefined` vs. `
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `isDefined` vs. `isUndefined`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `isDefined` oppure `isUndefined`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -66,7 +66,7 @@ You should choose the correct method for the second assertion - `isDefined` vs.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `isDefined` vs. `isUndefined`.
|
||||
Dovresti scegliere il metodo corretto per la terza asserzione - `isDefined` oppure `isUndefined`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824d367417b2b2512c51
|
||||
title: Test if an Array Contains an Item
|
||||
title: Verificare se un array contiene un elemento
|
||||
challengeType: 2
|
||||
forumTopicId: 301603
|
||||
dashedName: test-if-an-array-contains-an-item
|
||||
@ -8,15 +8,15 @@ dashedName: test-if-an-array-contains-an-item
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#12` in the `Arrays` suite, change each `assert` to either `assert.include` or `assert.notInclude` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#12`, nella suite `Arrays`, cambia ogni asserzione `assert` in `assert.include` o `assert.notInclude` per far passare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -30,7 +30,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `include` vs. `notInclude`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `include` oppure `notInclude`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -48,7 +48,7 @@ You should choose the correct method for the first assertion - `include` vs. `no
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `include` vs. `notInclude`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `include` oppure `notInclude`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: test-if-an-object-has-a-property
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene costruito a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`property` asserisce che l'oggetto effettivo ha una data proprietà.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: test-if-an-object-is-an-instance-of-a-constructor
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene costruito a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`#instanceOf` afferma che un oggetto è un'istanza di un costruttore.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824c367417b2b2512c4e
|
||||
title: Test if One Value is Below or At Least as Large as Another
|
||||
title: Verificare se un valore è minore o uguale a un altro
|
||||
challengeType: 2
|
||||
forumTopicId: 301606
|
||||
dashedName: test-if-one-value-is-below-or-at-least-as-large-as-another
|
||||
@ -8,15 +8,15 @@ dashedName: test-if-one-value-is-below-or-at-least-as-large-as-another
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#9` in the `Comparisons` suite, change each `assert` to either `assert.isBelow` or `assert.isAtLeast` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#9`, nella suite `Comparisons`, cambia ogni asserzione `assert` in `assert.isBelow` o `assert.isAtLeast` per far passare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -30,7 +30,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `isBelow` vs. `isAtLeast`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `isBelow` vs. `isAtLeast`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -48,7 +48,7 @@ You should choose the correct method for the first assertion - `isBelow` vs. `is
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `isBelow` vs. `isAtLeast`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `isBelow` vs. `isAtLeast`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -66,7 +66,7 @@ You should choose the correct method for the second assertion - `isBelow` vs. `i
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `isBelow` vs. `isAtLeast`.
|
||||
Dovresti scegliere il metodo corretto per la terza asserzione - `isBelow` vs. `isAtLeast`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -80,7 +80,7 @@ You should choose the correct method for the third assertion - `isBelow` vs. `is
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the fourth assertion - `isBelow` vs. `isAtLeast`.
|
||||
Dovresti scegliere il metodo corretto per la quarta asserzione - `isBelow` vs. `isAtLeast`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: use-assert-isok-and-assert-isnotok
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene costruito a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`isOk()` verificherà se un valore è veritiero e `isNotOk()` verificherà se un valore è falso.
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: use-regular-expressions-to-test-a-string
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto viene costruito a partire dal seguente progetto iniziale su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`match()` afferma che il valore effettivo corrisponde al secondo argomento espressione regolare.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824b367417b2b2512c4a
|
||||
title: Use the Double Equals to Assert Equality
|
||||
title: Usare il doppio uguale per affermare l'uguaglianza
|
||||
challengeType: 2
|
||||
forumTopicId: 301609
|
||||
dashedName: use-the-double-equals-to-assert-equality
|
||||
@ -8,17 +8,17 @@ dashedName: use-the-double-equals-to-assert-equality
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`equal()` compares objects using `==`.
|
||||
`equal()` confronta oggetti usando `==`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#5` in the `Equality` suite, change each `assert` to either `assert.equal` or `assert.notEqual` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#5`, nella suite `Equality`, cambia ogni asserzione `assert` in `assert.equal` o `assert.notEqual` per far passare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -32,7 +32,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `equal` vs. `notEqual`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `equal` oppure `notEqual`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -50,7 +50,7 @@ You should choose the correct method for the first assertion - `equal` vs. `notE
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `equal` vs. `notEqual`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `equal` oppure `notEqual`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -68,7 +68,7 @@ You should choose the correct method for the second assertion - `equal` vs. `not
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `equal` vs. `notEqual`.
|
||||
Dovresti scegliere il metodo corretto per la terza asserzione - `equal` oppure `notEqual`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -86,7 +86,7 @@ You should choose the correct method for the third assertion - `equal` vs. `notE
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the fourth assertion - `equal` vs. `notEqual`.
|
||||
Dovresti scegliere il metodo corretto per la quarta asserzione - `equal` oppure `notEqual`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824b367417b2b2512c4b
|
||||
title: Use the Triple Equals to Assert Strict Equality
|
||||
title: Usare il triplo uguale per affermare l'uguaglianza stretta
|
||||
challengeType: 2
|
||||
forumTopicId: 301610
|
||||
dashedName: use-the-triple-equals-to-assert-strict-equality
|
||||
@ -8,17 +8,17 @@ dashedName: use-the-triple-equals-to-assert-strict-equality
|
||||
|
||||
# --description--
|
||||
|
||||
As a reminder, this project is being built upon the following starter project on [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), or cloned from [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
`strictEqual()` compares objects using `===`.
|
||||
`strictEqual()` confronta oggetti usando `===`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Within `tests/1_unit-tests.js` under the test labelled `#6` in the `Equality` suite, change each `assert` to either `assert.strictEqual` or `assert.notStrictEqual` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
|
||||
All'interno di `tests/1_unit-tests.js`, sotto il test etichettato con `#6`, nella suite `Equality`, cambia ogni asserzione `assert` in `assert.strictEqual` o `assert.notStrictEqual` per far passare il test (dovrebbe risultare `true`). Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
# --hints--
|
||||
|
||||
All tests should pass.
|
||||
Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -32,7 +32,7 @@ All tests should pass.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the first assertion - `strictEqual` vs. `notStrictEqual`.
|
||||
Dovresti scegliere il metodo corretto per la prima asserzione - `strictEqual` oppure `notStrictEqual`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -50,7 +50,7 @@ You should choose the correct method for the first assertion - `strictEqual` vs.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the second assertion - `strictEqual` vs. `notStrictEqual`.
|
||||
Dovresti scegliere il metodo corretto per la seconda asserzione - `strictEqual` oppure `notStrictEqual`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -64,7 +64,7 @@ You should choose the correct method for the second assertion - `strictEqual` vs
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the third assertion - `strictEqual` vs. `notStrictEqual`.
|
||||
Dovresti scegliere il metodo corretto per la terza asserzione - `strictEqual` oppure `notStrictEqual`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -82,7 +82,7 @@ You should choose the correct method for the third assertion - `strictEqual` vs.
|
||||
);
|
||||
```
|
||||
|
||||
You should choose the correct method for the fourth assertion - `strictEqual` vs. `notStrictEqual`.
|
||||
Dovresti scegliere il metodo corretto per la quarta asserzione - `strictEqual` oppure `notStrictEqual`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: american-british-translator
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://american-british-translator.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-american-british-english-translator/) e completare il tuo progetto localmente.
|
||||
- Usare [il nostro progetto di avvio Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-american-british-english-translator) per completare il tuo progetto.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-american-british-english-translator) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d8249367417b2b2512c42
|
||||
title: Issue Tracker
|
||||
title: Tracciatore di problemi
|
||||
challengeType: 4
|
||||
forumTopicId: 301569
|
||||
dashedName: issue-tracker
|
||||
@ -8,42 +8,42 @@ dashedName: issue-tracker
|
||||
|
||||
# --description--
|
||||
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://issue-tracker.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://issue-tracker.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-issuetracker/) and complete your project locally.
|
||||
- Use [this Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-issuetracker) to complete your project.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-issuetracker/) e completare il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-issuetracker) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
- Complete the necessary routes in `/routes/api.js`
|
||||
- Create all of the functional tests in `tests/2_functional-tests.js`
|
||||
- Copy the `sample.env` file to `.env` and set the variables appropriately
|
||||
- To run the tests uncomment `NODE_ENV=test` in your `.env` file
|
||||
- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
|
||||
- Completa le rotte necessarie in `/routes/api.js`
|
||||
- Crea tutti i test funzionali in `tests/2_functional-tests.js`
|
||||
- Copia il file `sample.env` su `.env` e imposta le variabili in modo appropriato
|
||||
- Per eseguire i test togli i commenti dalla riga `NODE_ENV=test` nel tuo file `.env`
|
||||
- Per eseguire i test nella console, utilizza il comando `npm run test`. Per aprire la console di Replit, premi Ctrl+Maiusc+P (Cmd se su un Mac) e digita "open shell"
|
||||
|
||||
Write the following tests in `tests/2_functional-tests.js`:
|
||||
Scrivi i seguenti test in `tests/2_functional-tests.js`:
|
||||
|
||||
- Create an issue with every field: POST request to `/api/issues/{project}`
|
||||
- Create an issue with only required fields: POST request to `/api/issues/{project}`
|
||||
- Create an issue with missing required fields: POST request to `/api/issues/{project}`
|
||||
- View issues on a project: GET request to `/api/issues/{project}`
|
||||
- View issues on a project with one filter: GET request to `/api/issues/{project}`
|
||||
- View issues on a project with multiple filters: GET request to `/api/issues/{project}`
|
||||
- Update one field on an issue: PUT request to `/api/issues/{project}`
|
||||
- Update multiple fields on an issue: PUT request to `/api/issues/{project}`
|
||||
- Update an issue with missing `_id`: PUT request to `/api/issues/{project}`
|
||||
- Update an issue with no fields to update: PUT request to `/api/issues/{project}`
|
||||
- Update an issue with an invalid `_id`: PUT request to `/api/issues/{project}`
|
||||
- Delete an issue: DELETE request to `/api/issues/{project}`
|
||||
- Delete an issue with an invalid `_id`: DELETE request to `/api/issues/{project}`
|
||||
- Delete an issue with missing `_id`: DELETE request to `/api/issues/{project}`
|
||||
- Crea un'issue con ogni campo: richiesta POST a `/api/issues/{project}`
|
||||
- Crea un'issue con soli campi obbligatori: richiesta POST a `/api/issues/{project}`
|
||||
- Crea un'issue con i campi obbligatori mancanti: richiesta POST a `/api/issues/{project}`
|
||||
- Visualizza i gli issue di un progetto: richiesta GET a `/api/issues/{project}`
|
||||
- Visualizza gli issue di un progetto con un filtro: richiesta GET a `/api/issues/{project}`
|
||||
- Visualizza gli issue di un progetto con più filtri: richiesta GET a `/api/issues/{project}`
|
||||
- Aggiorna un campo in un issue: richiesta PUT a `/api/issues/{project}`
|
||||
- Aggiorna più campi in un issue: richiesta PUT a `/api/issues/{project}`
|
||||
- Aggiorna un issue con `_id` mancante: richiesta PUT a `/api/issues/{project}`
|
||||
- Aggiorna un issue che non ha campi da aggiornare: richiesta PUT a `/api/issues/{project}`
|
||||
- Aggiorna un issue con `_id` invalido: richiesta PUT a `/api/issues/{project}`
|
||||
- Elimina un issue: richiesta DELETE a `/api/issues/{project}`
|
||||
- Elimina un issue con `_id` invalido: richiesta DELETE a `/api/issues/{project}`
|
||||
- Elimina un issue con `_id` mancante: richiesta DELETE a `/api/issues/{project}`
|
||||
|
||||
# --hints--
|
||||
|
||||
You can provide your own project, not the example URL.
|
||||
È necessario fornire il proprio progetto, non l'URL di esempio.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
@ -51,7 +51,7 @@ You can provide your own project, not the example URL.
|
||||
};
|
||||
```
|
||||
|
||||
You can send a `POST` request to `/api/issues/{projectname}` with form data containing the required fields `issue_title`, `issue_text`, `created_by`, and optionally `assigned_to` and `status_text`.
|
||||
Puoi inviare una richiesta `POST` a `/api/issues/{projectname}` con i dati del modulo contenenti i campi obbligatori `issue_title`, `issue_text`, `created_by`, e opzionalmente `assigned_to` e `status_text`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -73,7 +73,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
The `POST` request to `/api/issues/{projectname}` will return the created object, and must include all of the submitted fields. Excluded optional fields will be returned as empty strings. Additionally, include `created_on` (date/time), `updated_on` (date/time), `open` (boolean, `true` for open - default value, `false` for closed), and `_id`.
|
||||
La richiesta `POST` a `/api/issues/{projectname}` restituirà l'oggetto creato, e deve includere tutti i campi inviati. I campi opzionali esclusi saranno restituiti come stringhe vuote. Inoltre, includi `created_on` (data/ora), `updated_on` (data/ora), `open` (booleano, `true` per open - valore predefinito, `false` per chiuso), e `_id`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -107,7 +107,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If you send a `POST` request to `/api/issues/{projectname}` without the required fields, returned will be the error `{ error: 'required field(s) missing' }`
|
||||
Se invii una richiesta `POST` a `/api/issues/{projectname}` senza i campi richiesti, deve essere restituito un errore `{ error: 'required field(s) missing' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -125,7 +125,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a `GET` request to `/api/issues/{projectname}` for an array of all issues for that specific `projectname`, with all the fields present for each issue.
|
||||
È possibile inviare una richiesta `GET` a `/api/issues/{projectname}` per un array di tutti gli issue per quel specifico `projectname`, con tutti i campi presenti per ogni issue.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -172,7 +172,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a `GET` request to `/api/issues/{projectname}` and filter the request by also passing along any field and value as a URL query (ie. `/api/issues/{project}?open=false`). You can pass one or more field/value pairs at once.
|
||||
Puoi inviare una richiesta `GET` a `/api/issues/{projectname}` e filtrare la richiesta passando anche qualsiasi campo e valore come una query di URL (es. `/api/issues/{project}?open=false`). È possibile passare una o più coppie di campo/valore contemporaneamente.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -213,7 +213,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a `PUT` request to `/api/issues/{projectname}` with an `_id` and one or more fields to update. On success, the `updated_on` field should be updated, and returned should be `{ result: 'successfully updated', '_id': _id }`.
|
||||
Puoi inviare una richiesta `PUT` a `/api/issues/{projectname}` con un `_id` e uno o più campi da aggiornare. Al successo, il campo `updated_on` dovrebbe essere aggiornato, e dovrebbe essere restituito `{ result: 'successfully updated', '_id': _id }`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -248,7 +248,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
When the `PUT` request sent to `/api/issues/{projectname}` does not include an `_id`, the return value is `{ error: 'missing _id' }`.
|
||||
Quando la richiesta `PUT` inviata a `/api/issues/{projectname}` non include un `_id`, deve essere restuito `{ error: 'missing _id' }`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -264,7 +264,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
When the `PUT` request sent to `/api/issues/{projectname}` does not include update fields, the return value is `{ error: 'no update field(s) sent', '_id': _id }`. On any other error, the return value is `{ error: 'could not update', '_id': _id }`.
|
||||
Quando la richiesta `PUT` inviata a `/api/issues/{projectname}` non include campi da aggiornare, deve essere restuito `{ error: 'no update field(s) sent', '_id': _id }`. Su qualsiasi altro errore, il valore restituito deve essere `{ error: 'could not update', '_id': _id }`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -294,7 +294,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a `DELETE` request to `/api/issues/{projectname}` with an `_id` to delete an issue. If no `_id` is sent, the return value is `{ error: 'missing _id' }`. On success, the return value is `{ result: 'successfully deleted', '_id': _id }`. On failure, the return value is `{ error: 'could not delete', '_id': _id }`.
|
||||
Puoi inviare una richiesta `DELETE` a `/api/issues/{projectname}` con un `_id` per eliminare un issue. Se non viene inviato un `_id` , deve essere restuito `{ error: 'missing _id' }`. Al successo, deve essere restituito `{ result: 'successfully deleted', '_id': _id }`. Al fallimento, il valore restituito deve essere `{ error: 'could not delete', '_id': _id }`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -336,7 +336,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
All 14 functional tests are complete and passing.
|
||||
Tutti i 14 test funzionali sono completi e passano.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d8249367417b2b2512c41
|
||||
title: Metric-Imperial Converter
|
||||
title: Convertitore Metrico-Imperiale
|
||||
challengeType: 4
|
||||
forumTopicId: 301570
|
||||
dashedName: metric-imperial-converter
|
||||
@ -8,52 +8,52 @@ dashedName: metric-imperial-converter
|
||||
|
||||
# --description--
|
||||
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://metric-imperial-converter.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://metric-imperial-converter.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-metricimpconverter/) and complete your project locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-metricimpconverter) to complete your project.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-metricimpconverter/) e completare il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-metricimpconverter) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
- Complete the necessary conversion logic in `/controllers/convertHandler.js`
|
||||
- Complete the necessary routes in `/routes/api.js`
|
||||
- Copy the `sample.env` file to `.env` and set the variables appropriately
|
||||
- To run the tests uncomment `NODE_ENV=test` in your `.env` file
|
||||
- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
|
||||
- Completa la logica di conversione necessaria in `/controllers/convertHandler.js`
|
||||
- Completa le rotte necessarie in `/routes/api.js`
|
||||
- Copia il file `sample.env` su `.env` e imposta le variabili in modo appropriato
|
||||
- Per eseguire i test togli i commenti dalla riga `NODE_ENV=test` nel tuo file `.env`
|
||||
- Per eseguire i test nella console, utilizza il comando `npm run test`. Per aprire la console di Replit, premi Ctrl+Maiusc+P (Cmd se su un Mac) e digita "open shell"
|
||||
|
||||
Write the following tests in `tests/1_unit-tests.js`:
|
||||
Scrivi i seguenti test in `tests/1_unit-tests.js`:
|
||||
|
||||
- `convertHandler` should correctly read a whole number input.
|
||||
- `convertHandler` should correctly read a decimal number input.
|
||||
- `convertHandler` should correctly read a fractional input.
|
||||
- `convertHandler` should correctly read a fractional input with a decimal.
|
||||
- `convertHandler` should correctly return an error on a double-fraction (i.e. `3/2/3`).
|
||||
- `convertHandler` should correctly default to a numerical input of `1` when no numerical input is provided.
|
||||
- `convertHandler` should correctly read each valid input unit.
|
||||
- `convertHandler` should correctly return an error for an invalid input unit.
|
||||
- `convertHandler` should return the correct return unit for each valid input unit.
|
||||
- `convertHandler` should correctly return the spelled-out string unit for each valid input unit.
|
||||
- `convertHandler` should correctly convert `gal` to `L`.
|
||||
- `convertHandler` should correctly convert `L` to `gal`.
|
||||
- `convertHandler` should correctly convert `mi` to `km`.
|
||||
- `convertHandler` should correctly convert `km` to `mi`.
|
||||
- `convertHandler` should correctly convert `lbs` to `kg`.
|
||||
- `convertHandler` should correctly convert `kg` to `lbs`.
|
||||
- `convertHandler` dovrebbe leggere correttamente un numero intero inserito.
|
||||
- `convertHandler` dovrebbe leggere correttamente un numero decimale inserito.
|
||||
- `convertHandler` dovrebbe leggere correttamente una frazione inserita.
|
||||
- `convertHandler` dovrebbe leggere correttamente un input frazionario con un decimale.
|
||||
- `convertHandler` dovrebbe restituire correttamente un errore su una doppia frazione (cioè `3/2/3`).
|
||||
- `convertHandler` dovrebbe essere correttamente predefinito con un input numerico di `1` quando non viene fornito alcun input numerico.
|
||||
- `convertHandler` dovrebbe leggere correttamente ogni input valido.
|
||||
- `convertHandler` dovrebbe restituire un errore per ogni input non valido.
|
||||
- `convertHandler` dovrebbe restituire l'unità di ritorno corretta per ogni unità di input valida.
|
||||
- `convertHandler` dovrebbe restituire correttamente l'unità di misura scritta per esteso per ogni unità di input valida.
|
||||
- `convertHandler` dovrebbe convertire correttamente `gal` in `L`.
|
||||
- `convertHandler` dovrebbe convertire correttamente `L` in `gal`.
|
||||
- `convertHandler` dovrebbe convertire correttamente `mi` in `km`.
|
||||
- `convertHandler` dovrebbe convertire correttamente `km` in `mi`.
|
||||
- `convertHandler` dovrebbe convertire correttamente `lbs` in `kg`.
|
||||
- `convertHandler` dovrebbe convertire correttamente `kg` in `lbs`.
|
||||
|
||||
Write the following tests in `tests/2_functional-tests.js`:
|
||||
Scrivi i seguenti test in `tests/2_functional-tests.js`:
|
||||
|
||||
- Convert a valid input such as `10L`: `GET` request to `/api/convert`.
|
||||
- Convert an invalid input such as `32g`: `GET` request to `/api/convert`.
|
||||
- Convert an invalid number such as `3/7.2/4kg`: `GET` request to `/api/convert`.
|
||||
- Convert an invalid number AND unit such as `3/7.2/4kilomegagram`: `GET` request to `/api/convert`.
|
||||
- Convert with no number such as `kg`: `GET` request to `/api/convert`.
|
||||
- Converti un input valido come `10L`: richiesta `GET` a `/api/convert`.
|
||||
- Converti un input non valido come `32g`: richiesta `GET` a `/api/convert`.
|
||||
- Converti un input non valido come `3/7.2/4kg`: richiesta `GET` a `/api/convert`.
|
||||
- Converti un input non valido come `3/7.2/4kilomegagram`: richiesta `GET` a `/api/convert`.
|
||||
- Converti un input senza alcun numero come `kg`: richiesta `GET` a `/api/convert`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You can provide your own project, not the example URL.
|
||||
È necessario fornire il proprio progetto, non l'URL di esempio.
|
||||
|
||||
```js
|
||||
getUserInput => {
|
||||
@ -65,13 +65,13 @@ getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can `GET` `/api/convert` with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit)
|
||||
È possibile ottenere (`GET`) `/api/convert` con un singolo parametro contenente un numero e un'unità validi e convertirlo. (Suggerimento: Dividi l'input cercando l'indice del primo carattere, che segnerà l'inizio dell'unità)
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
You can convert `'gal'` to `'L'` and vice versa. (1 gal to 3.78541 L)
|
||||
Puoi convertire `'gal'` in `'L'` e viceversa. (1 gal in 3.78541 L)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -94,7 +94,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can convert `'lbs'` to `'kg'` and vice versa. (1 lbs to 0.453592 kg)
|
||||
Puoi convertire `'lbs'` in `'kg'` e viceversa. (1 lbs in 0,453592 kg)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -117,7 +117,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can convert `'mi'` to `'km'` and vice versa. (1 mi to 1.60934 km)
|
||||
Puoi convertire `'mi'` in `'km'` e viceversa. (1 mi in 1.60934 km)
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -140,7 +140,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All incoming units should be accepted in both upper and lower case, but should be returned in both the `initUnit` and `returnUnit` in lower case, except for liter, which should be represented as an uppercase `'L'`.
|
||||
Tutte le unità in entrata dovrebbero essere accettate sia in maiuscolo che in minuscolo, ma dovrebbero essere restituite in minuscolo sia per `initUnit` che `returnUnit`, ad eccezione del litro, che dovrebbe essere rappresentato come una `'L'` maiuscola.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -163,7 +163,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If the unit of measurement is invalid, returned will be `'invalid unit'`.
|
||||
Se l'unità di misura non è valida, sarà restituito `'invalid unit'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -176,7 +176,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If the number is invalid, returned will be `'invalid number'`.
|
||||
Se il numero non è valido, sarà restituito `'invalid number'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -191,7 +191,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
If both the unit and number are invalid, returned will be `'invalid number and unit'`.
|
||||
Se sia l'unità che il numero non sono validi, sarà restituito `'invalid number and unit'`.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -209,7 +209,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
You can use fractions, decimals or both in the parameter (ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.
|
||||
È possibile utilizzare frazioni, decimali o entrambi nel parametro (es. 5, 1/2, 2.5/6), ma se non viene fornito nulla il valore predefinito sarà 1.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -240,7 +240,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
Your return will consist of the `initNum`, `initUnit`, `returnNum`, `returnUnit`, and `string` spelling out units in the format `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` with the result rounded to 5 decimals.
|
||||
Il tuo risultato consisterà in `initNum`, `initUnit`, `returnNum`, `returnUnit`, e `string` che indica le unità nel formato `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` con il risultato arrotondato a 5 decimali.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -257,7 +257,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All 16 unit tests are complete and passing.
|
||||
Tutti i 16 test funzionali richiesti sono completi e superati.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
@ -282,7 +282,7 @@ async getUserInput => {
|
||||
};
|
||||
```
|
||||
|
||||
All 5 functional tests are complete and passing.
|
||||
Tutti i 5 test funzionali richiesti sono completi e superati.
|
||||
|
||||
```js
|
||||
async getUserInput => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d824a367417b2b2512c43
|
||||
title: Personal Library
|
||||
title: Biblioteca Personale
|
||||
challengeType: 4
|
||||
forumTopicId: 301571
|
||||
dashedName: personal-library
|
||||
@ -8,24 +8,24 @@ dashedName: personal-library
|
||||
|
||||
# --description--
|
||||
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://personal-library.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://personal-library.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-library) and complete your project locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-library) to complete your project.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-library) e completare il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-library) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
1. Add your MongoDB connection string to `.env` without quotes as `DB` Example: `DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib`
|
||||
2. In your `.env` file set `NODE_ENV` to `test`, without quotes
|
||||
3. You need to create all routes within `routes/api.js`
|
||||
4. You will create all functional tests in `tests/2_functional-tests.js`
|
||||
1. Aggiungi la stringa di connessione a MongoDB a `.env` senza virgolette come `DB` Esempio: `DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib`
|
||||
2. Nel tuo file `.env` imposta `NODE_ENV` a `test`, senza virgolette
|
||||
3. È necessario creare tutte le rotte dentro `routes/api.js`
|
||||
4. Creerai tutti i test funzionali in `tests/2_functional-tests.js`
|
||||
|
||||
# --hints--
|
||||
|
||||
You can provide your own project, not the example URL.
|
||||
È necessario fornire il proprio progetto, non l'URL di esempio.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
@ -35,7 +35,7 @@ You can provide your own project, not the example URL.
|
||||
};
|
||||
```
|
||||
|
||||
You can send a <b>POST</b> request to `/api/books` with `title` as part of the form data to add a book. The returned response will be an object with the `title` and a unique `_id` as keys. If `title` is not included in the request, the returned response should be the string `missing required field title`.
|
||||
Puoi inviare una richiesta <b>POST</b> a `/api/books` con `title` come parte dei dati del modulo per aggiungere un libro. La risposta restituita sarà un oggetto con un `title` e un `_id` unico come chiavi. Se `title` non è incluso nella richiesta, la risposta restituita dovrebbe essere la stringa `missing required field title`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -56,7 +56,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a <b>GET</b> request to `/api/books` and receive a JSON response representing all the books. The JSON response will be an array of objects with each object (book) containing `title`, `_id`, and `commentcount` properties.
|
||||
Puoi inviare una richiesta <b>GET</b> a `/api/books` e ricevere una risposta JSON che rappresenta tutti i libri. La risposta JSON sarà un array di oggetti con ogni oggetto (libro) contenente le proprietà `title`, `_id`e `commentcount`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -84,7 +84,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a <b>GET</b> request to `/api/books/{_id}` to retrieve a single object of a book containing the properties `title`, `_id`, and a `comments` array (empty array if no comments present). If no book is found, return the string `no book exists`.
|
||||
Puoi inviare una richiesta <b>GET</b> a `/api/books/{_id}` per recuperare un singolo oggetto di un libro contenente le proprietà `title`, `_id` e un array di commenti `comments` (array vuoto se nessun commento è presente). Se non viene trovato nessun libro, restituisci la stringa `no book exists`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -108,7 +108,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a <b>POST</b> request containing `comment` as the form body data to `/api/books/{_id}` to add a comment to a book. The returned response will be the books object similar to <b>GET</b> `/api/books/{_id}` request in an earlier test. If `comment` is not included in the request, return the string `missing required field comment`. If no book is found, return the string `no book exists`.
|
||||
È possibile inviare una richiesta <b>POST</b> contenente `comment` come dati del corpo del modulo a `/api/books/{_id}` per aggiungere un commento a un libro. La risposta restituita sarà l'oggetto libri simile alla richiesta <b>GET</b> `/api/books/{_id}` in un test precedente. Se `comment` non è incluso nella richiesta, restituisci la stringa `missing required field comment`. Se non viene trovato nessun libro, restituisci la stringa `no book exists`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -146,7 +146,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a <b>DELETE</b> request to `/api/books/{_id}` to delete a book from the collection. The returned response will be the string `delete successful` if successful. If no book is found, return the string `no book exists`.
|
||||
Puoi inviare una richiesta <b>DELETE</b> a `/api/books/{_id}` per eliminare un libro dalla collezione. La risposta restituita sarà la stringa `delete successful` se la richiesta ha avuto successo. Se non viene trovato nessun libro, restituisce la stringa `no book exists`.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -170,7 +170,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can send a <b>DELETE</b> request to `/api/books` to delete all books in the database. The returned response will be the string `'complete delete successful` if successful.
|
||||
Puoi inviare una richiesta <b>DELETE</b> a `/api/books` per eliminare tutti i libri nel database. La risposta restituita sarà la stringa `'complete delete successful` se la richiesta ha avuto successo.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -187,7 +187,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
All 10 functional tests required are complete and passing.
|
||||
Tutti i 10 test funzionali richiesti sono completi e superati.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e601bf95ac9d0ecd8b94afd
|
||||
title: Sudoku Solver
|
||||
title: Risolutore di sudoku
|
||||
challengeType: 4
|
||||
forumTopicId: 462357
|
||||
dashedName: sudoku-solver
|
||||
@ -8,60 +8,60 @@ dashedName: sudoku-solver
|
||||
|
||||
# --description--
|
||||
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://sudoku-solver.freecodecamp.rocks/>. Working on this project will involve you writing your code using one of the following methods:
|
||||
Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa: <https://sudoku-solver.freecodecamp.rocks/>. Lavorare su questo progetto ti porterà a scrivere il tuo codice utilizzando uno dei seguenti metodi:
|
||||
|
||||
- Clone [this GitHub repo](https://github.com/freecodecamp/boilerplate-project-sudoku-solver) and complete your project locally.
|
||||
- Use [our Replit starter project](https://replit.com/github/freeCodeCamp/boilerplate-project-sudoku-solver) to complete your project.
|
||||
- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
|
||||
- Clonare [questo repository GitHub](https://github.com/freecodecamp/boilerplate-project-sudoku-solver) e completare il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-sudoku-solver) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
- All puzzle logic can go into `/controllers/sudoku-solver.js`
|
||||
- The `validate` function should take a given puzzle string and check it to see if it has 81 valid characters for the input.
|
||||
- The `check` functions should be validating against the *current* state of the board.
|
||||
- The `solve` function should handle solving any given valid puzzle string, not just the test inputs and solutions. You are expected to write out the logic to solve this.
|
||||
- All routing logic can go into `/routes/api.js`
|
||||
- See the `puzzle-strings.js` file in `/controllers` for some sample puzzles your application should solve
|
||||
- To run the challenge tests on this page, set `NODE_ENV` to `test` without quotes in the `.env` file
|
||||
- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
|
||||
- Tutta la logica puzzle può andare in `/controllers/sudoku-solver.js`
|
||||
- La funzione `validate` dovrebbe prendere una data stringa rompicapo e controllarla per vedere se ha 81 caratteri validi per l'ingresso.
|
||||
- Le funzioni `check` dovrebbero convalidare un posizionamento rispetto allo stato *corrente* della scheda.
|
||||
- La funzione `solve` dovrebbe gestire la risoluzione di qualsiasi stringa di puzzle valida, non solo gli input e le soluzioni di test. Ci si aspetta che sia tu a scrivere la logica per risolvere questo problema.
|
||||
- Tutta la logica di routing può entrare in `/routes/api.js`
|
||||
- Vedi il file `puzzle-strings.js` in `/controllers` per alcuni puzzle di esempio che la tua applicazione dovrebbe risolvere
|
||||
- Per eseguire i test su questa pagina, imposta `NODE_ENV` a `test` senza virgolette nel file `.env`
|
||||
- Per eseguire i test nella console, utilizza il comando `npm run test`. Per aprire la console di Replit, premi Ctrl+Maiusc+P (Cmd se su un Mac) e digita "open shell"
|
||||
|
||||
Write the following tests in `tests/1_unit-tests.js`:
|
||||
Scrivi i seguenti test in `tests/1_unit-tests.js`:
|
||||
|
||||
- Logic handles a valid puzzle string of 81 characters
|
||||
- Logic handles a puzzle string with invalid characters (not 1-9 or `.`)
|
||||
- Logic handles a puzzle string that is not 81 characters in length
|
||||
- Logic handles a valid row placement
|
||||
- Logic handles an invalid row placement
|
||||
- Logic handles a valid column placement
|
||||
- Logic handles an invalid column placement
|
||||
- Logic handles a valid region (3x3 grid) placement
|
||||
- Logic handles an invalid region (3x3 grid) placement
|
||||
- Valid puzzle strings pass the solver
|
||||
- Invalid puzzle strings fail the solver
|
||||
- Solver returns the expected solution for an incomplete puzzle
|
||||
- La logica gestisce una stringa rompicapo valida di 81 caratteri
|
||||
- La logica gestisce una stringa rompicapo con caratteri non validi (non 1-9 o `.`)
|
||||
- La logica gestisce una stringa rompicapo che non è di 81 caratteri di lunghezza
|
||||
- La logica gestisce un posizionamento di riga valido
|
||||
- La logica gestisce un posizionamento di riga non valido
|
||||
- La logica gestisce un posizionamento di colonna valido
|
||||
- La logica gestisce un posizionamento di colonna non valido
|
||||
- La logica gestisce un posizionamento di regione (griglia 3x3) valido
|
||||
- La logica gestisce un posizionamento di regione (griglia 3x3) non valido
|
||||
- Le stringhe rompicapo valide passano il risolutore
|
||||
- Le stringhe rompicapo non valide vengono rifiutate dal risolutore
|
||||
- Il risolutore restituisce la soluzione prevista per un puzzle incompleto
|
||||
|
||||
Write the following tests in `tests/2_functional-tests.js`
|
||||
Scrivi i seguenti test in `tests/2_functional-tests.js`
|
||||
|
||||
- Solve a puzzle with valid puzzle string: POST request to `/api/solve`
|
||||
- Solve a puzzle with missing puzzle string: POST request to `/api/solve`
|
||||
- Solve a puzzle with invalid characters: POST request to `/api/solve`
|
||||
- Solve a puzzle with incorrect length: POST request to `/api/solve`
|
||||
- Solve a puzzle that cannot be solved: POST request to `/api/solve`
|
||||
- Check a puzzle placement with all fields: POST request to `/api/check`
|
||||
- Check a puzzle placement with single placement conflict: POST request to `/api/check`
|
||||
- Check a puzzle placement with multiple placement conflicts: POST request to `/api/check`
|
||||
- Check a puzzle placement with all placement conflicts: POST request to `/api/check`
|
||||
- Check a puzzle placement with missing required fields: POST request to `/api/check`
|
||||
- Check a puzzle placement with invalid characters: POST request to `/api/check`
|
||||
- Check a puzzle placement with incorrect length: POST request to `/api/check`
|
||||
- Check a puzzle placement with invalid placement coordinate: POST request to `/api/check`
|
||||
- Check a puzzle placement with invalid placement value: POST request to `/api/check`
|
||||
- Risolvi un puzzle con stringa rompicapo valida: richiesta POST a `/api/solve`
|
||||
- Risolvi un puzzle con stringa rompicapo mancante: richiesta POST a `/api/solve`
|
||||
- Risolvi un puzzle con stringa rompicapo non valida: richiesta POST a `/api/solve`
|
||||
- Risolvi un puzzle di lunghezza sbagliata: richiesta POST a `/api/solve`
|
||||
- Risolvi un puzzle che non può essere risolto: richiesta POST a `/api/solve`
|
||||
- Controlla un posizionamento del puzzle con tutti i campi: richiesta POST a `/api/check`
|
||||
- Controlla un posizionamento del puzzle con un singolo conflitto di posizionamento: richiesta POST a `/api/check`
|
||||
- Controlla un posizionamento del puzzle con conflitti multipli di posizionamento: richiesta POST a `/api/check`
|
||||
- Controlla un posizionamento del puzzle con tutti i conflitti di posizionamento: richiesta POST a `/api/check`
|
||||
- Controlla un posizionamento del puzzle con i campi richiesti mancanti: richiesta POST a `/api/check`
|
||||
- Controlla un posizionamento del puzzle con caratteri non validi: richiesta POST a `/api/check`
|
||||
- Controlla un posizionamento del puzzle di lunghezza sbagliata: richiesta POST a `/api/check`
|
||||
- Controlla un posizionamento del puzzle con coordinate non valide: richiesta POST a `/api/check`
|
||||
- Controlla un posizionamento del puzzle di valore non valido: richiesta POST a `/api/check`
|
||||
|
||||
# --hints--
|
||||
|
||||
You should provide your own project, not the example URL.
|
||||
È necessario fornire il proprio progetto, non l'URL di esempio.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
@ -70,7 +70,7 @@ You should provide your own project, not the example URL.
|
||||
};
|
||||
```
|
||||
|
||||
You can `POST` `/api/solve` with form data containing `puzzle` which will be a string containing a combination of numbers (1-9) and periods `.` to represent empty spaces. The returned object will contain a `solution` property with the solved puzzle.
|
||||
È possibile fare una richiesta `POST` a `/api/solve` con i dati del modulo contenente `puzzle` che sarà una stringa contenente una combinazione di numeri (1-9) e punti `.` per rappresentare spazi vuoti. L'oggetto restituito conterrà una proprietà `solution` con il puzzle risolto.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -89,7 +89,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the object submitted to `/api/solve` is missing `puzzle`, the returned value will be `{ error: 'Required field missing' }`
|
||||
Se l'oggetto sottoposto a `/api/solve` non ha il `puzzle`, il valore restituito sarà `{ error: 'Required field missing' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -107,7 +107,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the puzzle submitted to `/api/solve` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }`
|
||||
Se il rompicapo sottoposto a `/api/solve` contiene valori che non sono numeri o punti, il valore restituito sarà `{ error: 'Invalid characters in puzzle' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -125,7 +125,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the puzzle submitted to `/api/solve` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }`
|
||||
Se il rompicapo sottoposto a `/api/solve` ha lunghezza maggiore o minore di 81 caratteri, il valore restituito sarà `{ error: 'Expected puzzle to be 81 characters long' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -143,7 +143,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the puzzle submitted to `/api/solve` is invalid or cannot be solved, the returned value will be `{ error: 'Puzzle cannot be solved' }`
|
||||
Se il puzzle sottoposto a `/api/solve` non è valido o non può essere risolto, il valore restituito sarà `{ error: 'Puzzle cannot be solved' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -161,7 +161,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
You can `POST` to `/api/check` an object containing `puzzle`, `coordinate`, and `value` where the `coordinate` is the letter A-I indicating the row, followed by a number 1-9 indicating the column, and `value` is a number from 1-9.
|
||||
Puoi fare una richiesta `POST` a `/api/check` con un oggetto contenente `puzzle`, `coordinate`, e `value` dove la coordinata `coordinate` è la lettera A-I che indica la riga, seguita da un numero 1-9 che indica la colonna, e `value` è un numero compreso tra 1 e 9.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -180,7 +180,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
The return value from the `POST` to `/api/check` will be an object containing a `valid` property, which is `true` if the number may be placed at the provided coordinate and `false` if the number may not. If false, the returned object will also contain a `conflict` property which is an array containing the strings `"row"`, `"column"`, and/or `"region"` depending on which makes the placement invalid.
|
||||
Il valore di ritorno della richiesta `POST` a `/api/check` sarà un oggetto contenente una proprietà `valid`, che sarà `true` se il numero può essere posto alla coordinata fornita e `false` se non può. Se falso, l'oggetto restituito conterrà anche una proprietà `conflict` che è un array contenente le stringhe `"row"`, `"column"`, e/o `"region"` a seconda di quale rende il posizionamento non valido.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -203,7 +203,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If `value` submitted to `/api/check` is already placed in `puzzle` on that `coordinate`, the returned value will be an object containing a `valid` property with `true` if `value` is not conflicting.
|
||||
Se il valore `value` sottoposto a `/api/check` è già posizionato sul `puzzle` a quella `coordinate`, il valore restituito sarà un oggetto contenente una proprietà `valid` con `true` se `value` non dà conflitto.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -222,7 +222,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the puzzle submitted to `/api/check` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }`
|
||||
Se il puzzle sottoposto a `/api/check` contiene valori che non sono numeri o punti, il valore restituito sarà `{ error: 'Invalid characters in puzzle' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -242,7 +242,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the puzzle submitted to `/api/check` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }`
|
||||
Se il rompicapo sottoposto a `/api/check` ha lunghezza maggiore o minore di 81 caratteri, il valore restituito sarà `{ error: 'Expected puzzle to be 81 characters long' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -262,7 +262,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the object submitted to `/api/check` is missing `puzzle`, `coordinate` or `value`, the returned value will be `{ error: Required field(s) missing }`
|
||||
Se all'oggetto sottoposto a `/api/check` manca `puzzle`, `coordinate` o `value`, il valore restituito sarà `{ error: Required field(s) missing }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -280,7 +280,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the coordinate submitted to `api/check` does not point to an existing grid cell, the returned value will be `{ error: 'Invalid coordinate'}`
|
||||
Se la coordinata inviata a `api/check` non punta a una cella della griglia esistente, il valore restituito sarà `{ error: 'Invalid coordinate'}`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -300,7 +300,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
If the `value` submitted to `/api/check` is not a number between 1 and 9, the returned values will be `{ error: 'Invalid value' }`
|
||||
Se il valore `value` inviato a `/api/check` non è un numero compreso tra 1 e 9, i valori restituiti saranno `{ error: 'Invalid value' }`
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -320,7 +320,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
All 12 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for.
|
||||
Tutti i 12 test funzionali richiesti sono completi e superati. Vedi `/tests/1_unit-tests.js` per il comportamento previsto per il quale dovresti scrivere dei test.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -343,7 +343,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
All 14 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the functionality you should write tests for.
|
||||
Tutti i 14 test funzionali richiesti sono completi e superati. Vedi `/tests/2_functional-tests.js` per le funzionalità per le quali dovresti scrivere dei test.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c14c
|
||||
title: Introduction to Data Analysis
|
||||
title: Introduzione all'analisi dei dati
|
||||
challengeType: 11
|
||||
videoId: VJrP2FUzKP0
|
||||
dashedName: introduction-to-data-analysis
|
||||
@ -8,31 +8,31 @@ dashedName: introduction-to-data-analysis
|
||||
|
||||
# --description--
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
\- [Slides](https://docs.google.com/presentation/d/1cUIt8b2ySz-85_ykfeuuWsurccwTAuFPn782pZBzFsU/edit?usp=sharing)
|
||||
\- [Presentazione](https://docs.google.com/presentation/d/1cUIt8b2ySz-85_ykfeuuWsurccwTAuFPn782pZBzFsU/edit?usp=sharing)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is **not** part of Data Analysis?
|
||||
Quale dei seguenti elementi **non** è parte dell'analisi dei dati?
|
||||
|
||||
## --answers--
|
||||
|
||||
Building statistical models and data visualizations.
|
||||
Costruire modelli statistici e visualizzazioni di dati.
|
||||
|
||||
---
|
||||
|
||||
Picking a desired conclusion for the analysis.
|
||||
Scegliere una conclusione desiderata per l'analisi.
|
||||
|
||||
---
|
||||
|
||||
Fixing incorrect values and removing invalid data.
|
||||
Correggere i valori errati e rimuovere i dati non validi.
|
||||
|
||||
---
|
||||
|
||||
Transforming data into an appropriate data structure.
|
||||
Trasformare i dati in una struttura di dati appropriata.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c157
|
||||
title: Numpy Algebra and Size
|
||||
title: Algebra e dimensione con Numpy
|
||||
challengeType: 11
|
||||
videoId: XAT97YLOKD8
|
||||
dashedName: numpy-algebra-and-size
|
||||
@ -8,34 +8,34 @@ dashedName: numpy-algebra-and-size
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the relationship between size of objects (such as lists and datatypes) in memory in Python's standard library and the NumPy library? Knowing this, what are the implications for performance?
|
||||
Qual è la relazione tra le dimensioni degli oggetti (come liste e tipi di dati) nella memoria nella libreria standard di Python e nella libreria NumPy? Sapendo questo, quali sono le implicazioni per le prestazioni?
|
||||
|
||||
## --answers--
|
||||
|
||||
Standard Python objects take up much more memory to store than NumPy objects; operations on comparable standard Python and NumPy objects complete in roughly the same time.
|
||||
Gli oggetti Python standard occupano molta più memoria degli oggetti NumPy; operazioni su oggetti Python e NumPy standard comparabili sono completate approssimativamente nello stesso tempo.
|
||||
|
||||
---
|
||||
|
||||
NumPy objects take up much more memory than standard Python objects; operations on NumPy objects complete very quickly compared to comparable objects in standard Python.
|
||||
Gli oggetti NumPy occupano molta più memoria degli oggetti Python standard; le operazioni su oggetti NumPy sono completate molto più rapidamente rispetto agli oggetti comparabili presenti in Python standard.
|
||||
|
||||
---
|
||||
|
||||
NumPy objects take up much less memory than Standard Python objects; operations on Standard Python objects complete very quickly compared to comparable objects on NumPy Object.
|
||||
Gli oggetti NumPy occupano molta meno memoria degli oggetti Python standard; le operazioni su oggetti Python standard sono completate molto più rapidamente rispetto agli oggetti comparabili su NumPy.
|
||||
|
||||
---
|
||||
|
||||
Standard Python objects take up more memory than NumPy objects; operations on NumPy objects complete very quickly compared to comparable objects in standard Python.
|
||||
Gli oggetti Python standard occupano più memoria degli oggetti NumPy; le operazioni su oggetti NumPy sono completate molto più rapidamente rispetto agli oggetti comparabili presenti in Python standard.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c154
|
||||
title: Numpy Arrays
|
||||
title: Array di Numpy
|
||||
challengeType: 11
|
||||
videoId: VDYVFHBL1AM
|
||||
dashedName: numpy-arrays
|
||||
@ -8,18 +8,18 @@ dashedName: numpy-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print out?
|
||||
Cosa verrà visualizzato nella console con il seguente codice?
|
||||
|
||||
```py
|
||||
A = np.array([
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c156
|
||||
title: Numpy Boolean Arrays
|
||||
title: Array booleani di Numpy
|
||||
challengeType: 11
|
||||
videoId: N1ttsMmcVMM
|
||||
dashedName: numpy-boolean-arrays
|
||||
@ -8,18 +8,18 @@ dashedName: numpy-boolean-arrays
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print out?
|
||||
Cosa verrà visualizzato nella console con il seguente codice?
|
||||
|
||||
```py
|
||||
a = np.arange(5)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c152
|
||||
title: Numpy Introduction A
|
||||
title: Introduzione a Numpy A
|
||||
challengeType: 11
|
||||
videoId: P-JjV6GBCmk
|
||||
dashedName: numpy-introduction-a
|
||||
@ -8,30 +8,30 @@ dashedName: numpy-introduction-a
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Why is Numpy an important, but unpopular Python library?
|
||||
Perché Numpy è una libreria Python importante ma poco popolare?
|
||||
|
||||
## --answers--
|
||||
|
||||
Often you won't work directly with Numpy.
|
||||
Spesso non lavorerai direttamente con Numpy.
|
||||
|
||||
---
|
||||
|
||||
It is extremely slow.
|
||||
È estremamente lento.
|
||||
|
||||
---
|
||||
|
||||
Working with Numpy is difficult.
|
||||
Lavorare con Numpy è difficile.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c153
|
||||
title: Numpy Introduction B
|
||||
title: Introduzione a Numpy B
|
||||
challengeType: 11
|
||||
videoId: YIqgrNLAZkA
|
||||
dashedName: numpy-introduction-b
|
||||
@ -8,34 +8,34 @@ dashedName: numpy-introduction-b
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi invece usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
About how much memory does the integer `5` consume in plain Python?
|
||||
Quanta memoria consuma all'incirca in Python puro il numero intero `5`?
|
||||
|
||||
## --answers--
|
||||
|
||||
32 bits
|
||||
32 bit
|
||||
|
||||
---
|
||||
|
||||
20 bytes
|
||||
20 byte
|
||||
|
||||
---
|
||||
|
||||
16 bytes
|
||||
16 byte
|
||||
|
||||
---
|
||||
|
||||
8 bits
|
||||
8 bit
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c15b
|
||||
title: Pandas Conditional Selection and Modifying DataFrames
|
||||
title: Selezione condizionale con Panda e modifica dei DataFrame
|
||||
challengeType: 11
|
||||
videoId: BFlH0fN5xRQ
|
||||
dashedName: pandas-conditional-selection-and-modifying-dataframes
|
||||
@ -8,18 +8,18 @@ dashedName: pandas-conditional-selection-and-modifying-dataframes
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print out?
|
||||
Cosa verrà visualizzato nella console con il seguente codice?
|
||||
|
||||
```py
|
||||
import pandas as pd
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c15c
|
||||
title: Pandas Creating Columns
|
||||
title: Creazione di colonne con Panda
|
||||
challengeType: 11
|
||||
videoId: _sSo2XZoB3E
|
||||
dashedName: pandas-creating-columns
|
||||
@ -8,18 +8,18 @@ dashedName: pandas-creating-columns
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What code would add a "Certificates per month" column to the `certificates_earned` DataFrame like the one below?
|
||||
Quale codice aggiungerebbe una colonna "Certificates per month" al DataFrame `certificates_earned` come mostrato sotto?
|
||||
|
||||
<pre> Certificates Time (in months) Certificates per month
|
||||
Tom 8 16 0.50
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c159
|
||||
title: Pandas Indexing and Conditional Selection
|
||||
title: Indicizzazione di Pandas e selezione condizionale
|
||||
challengeType: 11
|
||||
videoId: '-ZOrgV_aA9A'
|
||||
dashedName: pandas-indexing-and-conditional-selection
|
||||
@ -8,18 +8,18 @@ dashedName: pandas-indexing-and-conditional-selection
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print out?
|
||||
Cosa verrà visualizzato nella console con il seguente codice?
|
||||
|
||||
```py
|
||||
import pandas as pd
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c162
|
||||
title: Reading Data CSV and TXT
|
||||
title: Lettura di dati CSV e TXT
|
||||
challengeType: 11
|
||||
videoId: ViGEv0zOzUk
|
||||
dashedName: reading-data-csv-and-txt
|
||||
@ -8,18 +8,18 @@ dashedName: reading-data-csv-and-txt
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas/tree/master/unit-1-reading-data-with-python-and-pandas/lesson-1-reading-csv-and-txt-files/files)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas/tree/master/unit-1-reading-data-with-python-and-pandas/lesson-1-reading-csv-and-txt-files/files)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
How would you import the CSV file `data.csv` and store it in a DataFrame using the Pandas module?
|
||||
Come faresti per importare il file CSV `data.csv` e salvarlo in un DataFrame usando il modulo Pandas?
|
||||
|
||||
## --answers--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a093a74c4063ca6f7c163
|
||||
title: Reading Data from Databases
|
||||
title: Leggere i dati dal database
|
||||
challengeType: 11
|
||||
videoId: MtgXS1MofRw
|
||||
dashedName: reading-data-from-databases
|
||||
@ -8,30 +8,30 @@ dashedName: reading-data-from-databases
|
||||
|
||||
# --description--
|
||||
|
||||
*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
|
||||
*Invece di usare notebooks.ai come mostrato nel video, puoi usare Google Colab.*
|
||||
|
||||
More resources:
|
||||
Altre risorse:
|
||||
|
||||
- [Notebooks on GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas/tree/master/unit-1-reading-data-with-python-and-pandas/lesson-11-reading-data-from-relational-databases/files)
|
||||
- [How to open Notebooks from GitHub using Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
- [Notebook su GitHub](https://github.com/ine-rmotr-curriculum/RDP-Reading-Data-with-Python-and-Pandas/tree/master/unit-1-reading-data-with-python-and-pandas/lesson-11-reading-data-from-relational-databases/files)
|
||||
- [Come aprire Notebooks da GitHub usando Google Colab.](https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb)
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What method does a `Cursor` instance have and what does it allow?
|
||||
Che metodo ha un'istanza di `Cursor` e che cosa permette?
|
||||
|
||||
## --answers--
|
||||
|
||||
The `Cursor` instance has a `.run()` method which allows you to run SQL queries.
|
||||
L'istanza `Cursor` ha un metodo `.run()` che consente di eseguire query SQL.
|
||||
|
||||
---
|
||||
|
||||
The `Cursor` instance has a `.select()` method which allows you to select records.
|
||||
L'istanza `Cursor` ha un metodo `.select()` che consente di selezionare un documento.
|
||||
|
||||
---
|
||||
|
||||
The `Cursor` instance has an `.execute()` method which will receive SQL parameters to run against the database.
|
||||
L'istanza `Cursor` ha un metodo `.execute()` che riceverà i parametri SQL da eseguire sul database.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e46f802ac417301a38fb92b
|
||||
title: Page View Time Series Visualizer
|
||||
title: Visualizzatore della pagina delle serie temporali
|
||||
challengeType: 10
|
||||
forumTopicId: 462369
|
||||
dashedName: page-view-time-series-visualizer
|
||||
@ -8,17 +8,17 @@ dashedName: page-view-time-series-visualizer
|
||||
|
||||
# --description--
|
||||
|
||||
For this project you will visualize time series data using a line chart, bar chart, and box plots. You will use Pandas, matplotlib, and seaborn to visualize a dataset containing the number of page views each day on the freeCodeCamp.org forum from 2016-05-09 to 2019-12-03. The data visualizations will help you understand the patterns in visits and identify yearly and monthly growth.
|
||||
Per questo progetto visualizzerai i dati delle serie temporali usando un grafico a linea, un grafico a barre, e un diagramma a scatola e baffi. Userai Pandas, matplotlib, e seaborn per visualizzare il set dei dati contentente il numero di visualizzazioni di pagina di ogni giorno per il forum di freecodecamp.org dal 2016-05-09 al 2019-12-03. La visualizzazione dei dati ti aiuterà a riconoscerme schemi nelle visite e identificare crescita annuale e mensile.
|
||||
|
||||
You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer).
|
||||
Puoi accedere [alla descrizione completa del progetto e al codice iniziale su Replit](https://replit.com/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer).
|
||||
|
||||
After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below.
|
||||
Dopo essere andato a quel collegamento, fai un fork del progetto. Una volta completato il progetto in base alle istruzioni riportate in 'README.md', invia il link del progetto qui sotto.
|
||||
|
||||
We are still developing the interactive instructional part of the data analysis with Python curriculum. For now, you will have to use other resources to learn how to pass this challenge.
|
||||
Stiamo ancora sviluppando la parte didattica interattiva del curriculum di analisi dei dati con Python. Per ora, dovrai utilizzare altre risorse per imparare a superare questa sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
It should pass all Python tests.
|
||||
Dovrebbe superare tutti i test Python.
|
||||
|
||||
```js
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a0a8e09c5df3cc3600ed3
|
||||
title: Basics of Numpy
|
||||
title: Fondamenti di Numpy
|
||||
challengeType: 11
|
||||
videoId: f9QrZrKQMLI
|
||||
dashedName: basics-of-numpy
|
||||
@ -10,7 +10,7 @@ dashedName: basics-of-numpy
|
||||
|
||||
## --text--
|
||||
|
||||
What will the following code print?
|
||||
Cosa scriverà il seguente codice?
|
||||
|
||||
```python
|
||||
b = np.array([[1.0,2.0,3.0],[3.0,4.0,5.0]])
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a0a8e09c5df3cc3600ed8
|
||||
title: Mathematics
|
||||
title: Matematica
|
||||
challengeType: 11
|
||||
videoId: 7txegvyhtVk
|
||||
dashedName: mathematics
|
||||
@ -10,7 +10,7 @@ dashedName: mathematics
|
||||
|
||||
## --text--
|
||||
|
||||
What is the value of `b` after running the following code?
|
||||
Qual è il valore di `b` dopo aver eseguito il seguente codice?
|
||||
|
||||
```py
|
||||
import numpy as np
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e9a0a8e09c5df3cc3600ed9
|
||||
title: Reorganizing Arrays
|
||||
title: Riorganizzazione degli array
|
||||
challengeType: 11
|
||||
videoId: VNWAQbEM-C8
|
||||
dashedName: reorganizing-arrays
|
||||
@ -10,7 +10,7 @@ dashedName: reorganizing-arrays
|
||||
|
||||
## --text--
|
||||
|
||||
What code would produce the following array?
|
||||
Quale codice produrrebbe il seguente array?
|
||||
|
||||
```py
|
||||
[[1. 1.]
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
---
|
||||
id: 5e46fc95ac417301a38fb934
|
||||
title: Data Analysis with Python Certificate
|
||||
title: Certificato Analisi dei dati con Python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 5e46f7e5ac417301a38fb928
|
||||
title: Mean-Variance-Standard Deviation Calculator
|
||||
title: Calcolatore della Varianza, Media e Deviazione Standard
|
||||
-
|
||||
id: 5e46f7e5ac417301a38fb929
|
||||
title: Demographic Data Analyzer
|
||||
title: Analizzatore di Dati Demografici
|
||||
-
|
||||
id: 5e46f7f8ac417301a38fb92a
|
||||
title: Medical Data Visualizer
|
||||
title: Visualizzatore di Dati Medici
|
||||
-
|
||||
id: 5e46f802ac417301a38fb92b
|
||||
title: Page View Time Series Visualizer
|
||||
title: Visualizzatore della pagina delle serie temporali
|
||||
-
|
||||
id: 5e4f5c4b570f7e3a4949899f
|
||||
title: Sea Level Predictor
|
||||
title: Predittore del livello del mare
|
||||
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
---
|
||||
id: 5e6021435ac9d0ecd8b94b00
|
||||
title: Information Security Certificate
|
||||
title: Certificato Sicurezza dell'Informazione
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 587d824a367417b2b2512c44
|
||||
title: Stock Price Checker
|
||||
title: Controllo del prezzo delle azioni
|
||||
-
|
||||
id: 587d824a367417b2b2512c45
|
||||
title: Anonymous Message Board
|
||||
title: Pannello messaggi Anonimo
|
||||
-
|
||||
id: 5e46f979ac417301a38fb932
|
||||
title: Port Scanner
|
||||
-
|
||||
id: 5e46f983ac417301a38fb933
|
||||
title: SHA-1 Password Cracker
|
||||
title: Cracker Password SHA-1
|
||||
-
|
||||
id: 5e601c775ac9d0ecd8b94aff
|
||||
title: Secure Real Time Multiplayer Game
|
||||
title: Gioco multiplayer in tempo reale sicuro
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
---
|
||||
id: 660add10cb82ac38a17513be
|
||||
title: Legacy Back End Certificate
|
||||
title: Vecchio Certificato Back End
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bdef
|
||||
title: Timestamp Microservice
|
||||
title: Microservizio Timestamp
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bdff
|
||||
title: Request Header Parser Microservice
|
||||
title: Microservizio Parser di header della richiesta
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bd0e
|
||||
title: URL Shortener Microservice
|
||||
title: Microservizio Abbreviazione URL
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bdee
|
||||
title: Image Search Abstraction Layer
|
||||
title: Livello di astrazione Ricerca Immagine
|
||||
-
|
||||
id: bd7158d8c443edefaeb5bd0f
|
||||
title: File Metadata Microservice
|
||||
title: Microservizio Metadati di un file
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bdef
|
||||
title: Build a Voting App
|
||||
title: Costruisci un'app per le votazioni
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bdff
|
||||
title: Build a Nightlife Coordination App
|
||||
title: Costruisci un'app per il coordinamento della vita notturna
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bd0e
|
||||
title: Chart the Stock Market
|
||||
title: Grafico della Borsa
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bd0f
|
||||
title: Manage a Book Trading Club
|
||||
title: Gestisci un Club di scambio del libro
|
||||
-
|
||||
id: bd7158d8c443eddfaeb5bdee
|
||||
title: Build a Pinterest Clone
|
||||
title: Costruisci un Clone di Pinterest
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
---
|
||||
id: 561add10cb82ac39a17513bc
|
||||
title: Legacy Data Visualization Certificate
|
||||
title: Vecchio Certificato Data Visualization
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7157d8c242eddfaeb5bd13
|
||||
title: Build a Markdown Previewer
|
||||
title: Costruisci un visualizzatore di Markdown
|
||||
-
|
||||
id: bd7156d8c242eddfaeb5bd13
|
||||
title: Build a Camper Leaderboard
|
||||
title: Costruisci una Classifica Camper
|
||||
-
|
||||
id: bd7155d8c242eddfaeb5bd13
|
||||
title: Build a Recipe Box
|
||||
title: Costruisci una scatola delle ricette
|
||||
-
|
||||
id: bd7154d8c242eddfaeb5bd13
|
||||
title: Build the Game of Life
|
||||
title: Costruisci il Gioco della Vita
|
||||
-
|
||||
id: bd7153d8c242eddfaeb5bd13
|
||||
title: Build a Roguelike Dungeon Crawler Game
|
||||
title: Costruisci un gioco di genere Rogue Dungeon Crawler
|
||||
-
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Bar Chart
|
||||
title: Visualizza i dati con un grafico a barre
|
||||
-
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
title: Visualizza i dati con un grafico a dispersione
|
||||
-
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Heat Map
|
||||
title: Visualizza i dati con una mappa di calore
|
||||
-
|
||||
id: bd7198d8c242eddfaeb5bd13
|
||||
title: Show National Contiguity with a Force Directed Graph
|
||||
title: Mostra la Contiguità Nazionale con un Grafico diretto della Forza
|
||||
-
|
||||
id: bd7108d8c242eddfaeb5bd13
|
||||
title: Map Data Across the Globe
|
||||
title: Mappa i dati in tutto il globo
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17513be
|
||||
title: Legacy Front End Certificate
|
||||
title: Vecchio Certificato Front End
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: bd7158d8c242eddfaeb5bd13
|
||||
title: Build a Personal Portfolio Webpage
|
||||
title: Costruisci una pagina per il tuo portfolio personale
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: Build a Random Quote Machine
|
||||
title: Costruisci una Macchina per le citazioni casuali
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd0f
|
||||
title: Build a 25 + 5 Clock
|
||||
title: Costruisci un Orologio 25 + 5
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd17
|
||||
title: Build a JavaScript Calculator
|
||||
title: Costruisci una calcolatrice JavaScript
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd10
|
||||
title: Show the Local Weather
|
||||
title: Mostra il Meteo locale
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd1f
|
||||
title: Use the Twitch JSON API
|
||||
title: Usa l'API JSON di Twitch
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd18
|
||||
title: Stylize Stories on Camper News
|
||||
title: Storie di Stylize su Camper News
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd19
|
||||
title: Build a Wikipedia Viewer
|
||||
title: Costruisci un visualizzatore di Wikipedia
|
||||
-
|
||||
id: bd7158d8c442eedfaeb5bd1c
|
||||
title: Build a Tic Tac Toe Game
|
||||
title: Costruisci un gioco Tic Tac Toe
|
||||
-
|
||||
id: bd7158d8c442eddfaeb5bd1c
|
||||
title: Build a Simon Game
|
||||
title: Costruisci un gioco Simon
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17213bd
|
||||
title: Legacy Full Stack Certificate
|
||||
title: Vecchio certificato Full Stack
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 561add10cb82ac38a17513bc
|
||||
title: Responsive Web Design Certificate
|
||||
title: Certificato Web Design Responsivo
|
||||
-
|
||||
id: 561abd10cb81ac38a17513bc
|
||||
title: JavaScript Algorithms and Data Structures Certificate
|
||||
title: Certificato Algoritmi e Strutture Dati in JavaScript
|
||||
-
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: Front End Libraries Certificate
|
||||
title: Certificato Librerie di sviluppo Front End
|
||||
-
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: Data Visualization Certificate
|
||||
title: Certificato Data Visualization
|
||||
-
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: API's and Microservices Certificate
|
||||
title: Certificato API e microservizi
|
||||
-
|
||||
id: 561add10cb82ac38a17213bc
|
||||
title: Legacy Information Security and Quality Assurance Certificate
|
||||
title: Vecchio certificato di Sicurezza delle Informazioni e Garanzia di Qualità
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17213bc
|
||||
title: Legacy Information Security and Quality Assurance Certificate
|
||||
title: Vecchio certificato di Sicurezza delle Informazioni e Garanzia di Qualità
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 587d8249367417b2b2512c41
|
||||
title: Metric-Imperial Converter
|
||||
title: Convertitore Metrico-Imperiale
|
||||
-
|
||||
id: 587d8249367417b2b2512c42
|
||||
title: Issue Tracker
|
||||
title: Tracciatore di problemi
|
||||
-
|
||||
id: 587d824a367417b2b2512c43
|
||||
title: Personal Library
|
||||
title: Biblioteca personale
|
||||
-
|
||||
id: 587d824a367417b2b2512c44
|
||||
title: Stock Price Checker
|
||||
title: Controllo del prezzo delle azioni
|
||||
-
|
||||
id: 587d824a367417b2b2512c45
|
||||
title: Anonymous Message Board
|
||||
title: Pannello messaggi anonimo
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
---
|
||||
id: 5e46fc95ac417301a38fb935
|
||||
title: Machine Learning with Python Certificate
|
||||
title: Certificato Machine Learning con Python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 5e46f8d6ac417301a38fb92d
|
||||
title: Rock Paper Scissors
|
||||
title: Carta Sasso Forbice
|
||||
-
|
||||
id: 5e46f8dcac417301a38fb92e
|
||||
title: Cat and Dog Image Classifier
|
||||
title: Classificatore di immagini di gatti e cani
|
||||
-
|
||||
id: 5e46f8e3ac417301a38fb92f
|
||||
title: Book Recommendation Engine using KNN
|
||||
title: Motore per la raccomandazione di libri che usa KNN
|
||||
-
|
||||
id: 5e46f8edac417301a38fb930
|
||||
title: Linear Regression Health Costs Calculator
|
||||
title: Calcolatore di costi per la salute con la Regressione Lineare
|
||||
-
|
||||
id: 5e46f8edac417301a38fb931
|
||||
title: Neural Network SMS Text Classifier
|
||||
title: Classificatore neurale di messaggi SMS
|
||||
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
---
|
||||
id: 5e611829481575a52dc59c0e
|
||||
title: Quality Assurance Certificate
|
||||
title: Certificato Garanzia di Qualità
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 587d8249367417b2b2512c41
|
||||
title: Metric-Imperial Converter
|
||||
title: Convertitore Metrico-Imperiale
|
||||
-
|
||||
id: 587d8249367417b2b2512c42
|
||||
title: Issue Tracker
|
||||
title: Tracciatore di Problemi
|
||||
-
|
||||
id: 587d824a367417b2b2512c43
|
||||
title: Personal Library
|
||||
title: Biblioteca Personale
|
||||
-
|
||||
id: 5e601bf95ac9d0ecd8b94afd
|
||||
title: Sudoku Solver
|
||||
title: Risolutore Sudoku
|
||||
-
|
||||
id: 5e601c0d5ac9d0ecd8b94afe
|
||||
title: American British Translator
|
||||
title: Traduttore Americano Britannico
|
||||
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
---
|
||||
id: 606243f50267e718b1e755f4
|
||||
title: Relational Databases Certificate
|
||||
title: Certificato Database Relazionali
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 5f1a4ef5d5d6b5ab580fc6ae
|
||||
title: Celestial Bodies Database
|
||||
title: Database Corpi Celesti
|
||||
-
|
||||
id: 5f9771307d4d22b9d2b75a94
|
||||
title: World Cup Database
|
||||
title: Database Coppa Del Mondo
|
||||
-
|
||||
id: 5f87ac112ae598023a42df1a
|
||||
title: Salon Appointment Scheduler
|
||||
title: Pianificatore Appuntamento Salone
|
||||
-
|
||||
id: 602d9ff222201c65d2a019f2
|
||||
title: Periodic Table Database
|
||||
title: Database della Tavola Periodica
|
||||
-
|
||||
id: 602da04c22201c65d2a019f4
|
||||
title: Final Boss
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
---
|
||||
id: 5e44431b903586ffb414c951
|
||||
title: Scientific Computing with Python Certificate
|
||||
title: Certificato Calcolo scientifico con Python
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 5e44412c903586ffb414c94c
|
||||
title: Arithmetic Formatter
|
||||
title: Formattatore aritmetico
|
||||
-
|
||||
id: 5e444136903586ffb414c94d
|
||||
title: Time Calculator
|
||||
title: Calcolatrice del tempo
|
||||
-
|
||||
id: 5e44413e903586ffb414c94e
|
||||
title: Budget App
|
||||
title: App per il budget
|
||||
-
|
||||
id: 5e444147903586ffb414c94f
|
||||
title: Polygon Area Calculator
|
||||
title: Calcolatore dell'area dei poligoni
|
||||
-
|
||||
id: 5e44414f903586ffb414c950
|
||||
title: Probability Calculator
|
||||
title: Calcolatore delle probabilità
|
||||
|
||||
@ -33,7 +33,7 @@ assert(result[0] == '<h1>');
|
||||
`myRegex` deve ser preguiçosa
|
||||
|
||||
```js
|
||||
assert(/\?/g.test(myRegex));
|
||||
assert(/[^\\][\*\+\?]\?/.test(myRegex));
|
||||
```
|
||||
|
||||
`myRegex` não deve incluir a string `h1`
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036147
|
||||
title: Connect Redux to React
|
||||
title: Conecte o Redux ao React
|
||||
challengeType: 6
|
||||
forumTopicId: 301426
|
||||
dashedName: connect-redux-to-react
|
||||
@ -8,23 +8,23 @@ dashedName: connect-redux-to-react
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you've written both the `mapStateToProps()` and the `mapDispatchToProps()` functions, you can use them to map `state` and `dispatch` to the `props` of one of your React components. The `connect` method from React Redux can handle this task. This method takes two optional arguments, `mapStateToProps()` and `mapDispatchToProps()`. They are optional because you may have a component that only needs access to `state` but doesn't need to dispatch any actions, or vice versa.
|
||||
Agora que você escreveu ambas as funções `mapStateToProps()` and the `mapDispatchToProps()`, você pode usá-las para mapear `state` e `dispatch` para `props` de um de seus componentes React. O método `connect` do Redux React pode lidar com essa tarefa. Esse método recebe dois argumentos opcionais, `mapStateToProps()` e `mapDispatchToProps()`. Eles são opcionais porque você pode ter um componente que precisa apenas acessar o `state`, mas não precisa despachar nenhuma ação, ou vice versa.
|
||||
|
||||
To use this method, pass in the functions as arguments, and immediately call the result with your component. This syntax is a little unusual and looks like:
|
||||
Para usar esse método, passe nas funções como argumentos, e imediatamente chame o resultado com seu componente. Essa sintaxe é um pouco incomum e se parece com:
|
||||
|
||||
```js
|
||||
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
|
||||
```
|
||||
|
||||
**Note:** If you want to omit one of the arguments to the `connect` method, you pass `null` in its place.
|
||||
**Nota:** Se você quiser omitir um dos argumentos do método `connect`, você passa `null` no lugar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has the `mapStateToProps()` and `mapDispatchToProps()` functions and a new React component called `Presentational`. Connect this component to Redux with the `connect` method from the `ReactRedux` global object, and call it immediately on the `Presentational` component. Assign the result to a new `const` called `ConnectedComponent` that represents the connected component. That's it, now you're connected to Redux! Try changing either of `connect`'s arguments to `null` and observe the test results.
|
||||
O editor de código tem as funções `mapStateToProps()` e `mapDispatchToProps()` e um novo componente React chamado `Presentational`. Conecte esse componente ao redux com o método `connect` do objeto global `ReactRedux`, e o chame imediatamente no componente `Presentational`. Atribua o resultado a uma nova `const` chamada `ConnectedComponent` que representa o componente conectado. É isso, agora você está conectado ao Redux! Tente alterar qualquer um dos argumentos de `connect` para `null` e observe os resultados do teste.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Presentational` component should render.
|
||||
O componente `Presentational` deve renderizar.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive a prop `messages` via `connect`.
|
||||
O componente `Presentational` deve receber uma prop `messages` via `connect`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive a prop `submitNewMessage` via `connect`.
|
||||
O componente `Presentational` deve receber uma prop `submitNewMessage` via `connect`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036148
|
||||
title: Connect Redux to the Messages App
|
||||
title: Conecte o Redux ao App de Mensagens
|
||||
challengeType: 6
|
||||
forumTopicId: 301427
|
||||
dashedName: connect-redux-to-the-messages-app
|
||||
@ -8,17 +8,17 @@ dashedName: connect-redux-to-the-messages-app
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you understand how to use `connect` to connect React to Redux, you can apply what you've learned to your React component that handles messages.
|
||||
Agora que você entendeu como usar `connect` para conectar o React ao Redux, você pode aplicar o que aprendeu ao seus componentes React que lidam com mensagens.
|
||||
|
||||
In the last lesson, the component you connected to Redux was named `Presentational`, and this wasn't arbitrary. This term *generally* refers to React components that are not directly connected to Redux. They are simply responsible for the presentation of UI and do this as a function of the props they receive. By contrast, container components are connected to Redux. These are typically responsible for dispatching actions to the store and often pass store state to child components as props.
|
||||
Na última lição, o componente que você conectou ao Redux foi nomeado `Presentational`, e isso não foi arbitrário. Esse termo *geralmente* refere-se a componentes React que não estão conectados diretamente ao Redux. Eles simplesmente são responsáveis pela apresentação da interface do usuário e fazem isso como uma função das props que recebem. Em contraste, os componentes de contêiner são conectados ao Redux. Estes são tipicamente responsáveis por despachar ações ao store e, frequentemente, passam o state do store para componentes filhos como props.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has all the code you've written in this section so far. The only change is that the React component is renamed to `Presentational`. Create a new component held in a constant called `Container` that uses `connect` to connect the `Presentational` component to Redux. Then, in the `AppWrapper`, render the React Redux `Provider` component. Pass `Provider` the Redux `store` as a prop and render `Container` as a child. Once everything is setup, you will see the messages app rendered to the page again.
|
||||
O editor de código tem todo o código que você escreveu nesta seção até agora. A única alteração é que o componente React é renomeado para `Presentational`. Crie um novo componente mantido em uma constante chamada `Container` que usa `connect` para conectar o componente `Presentational` ao Redux. Em seguida, no `AppWrapper`, renderize o componente `Provider` do Redux React. Passe `Provider` ao `store` do Redux como prop e renderize `Container` como filho. Assim que tudo estiver pronto, você verá as mensagens do app renderizados na página novamente.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `AppWrapper` should render to the page.
|
||||
O `AppWrapper` deve ser renderizardo na página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should render to page.
|
||||
O componente `Presentational` deve ser renderizado na página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should render an `h2`, `input`, `button`, and `ul` elements.
|
||||
O componente `Presentational` deve renderizar os elementos `h2`, `input`, `button`, e `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive `messages` from the Redux store as a prop.
|
||||
O componente `Presentational` deve receber `messages` do store Redux como prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -70,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive the `submitMessage` action creator as a prop.
|
||||
O componente `Presentational` deve receber o criador de ação `submitMessage` como prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036149
|
||||
title: Extract Local State into Redux
|
||||
title: Extrair Estado Local para dentro do Redux
|
||||
challengeType: 6
|
||||
forumTopicId: 301428
|
||||
dashedName: extract-local-state-into-redux
|
||||
@ -8,17 +8,17 @@ dashedName: extract-local-state-into-redux
|
||||
|
||||
# --description--
|
||||
|
||||
You're almost done! Recall that you wrote all the Redux code so that Redux could control the state management of your React messages app. Now that Redux is connected, you need to extract the state management out of the `Presentational` component and into Redux. Currently, you have Redux connected, but you are handling the state locally within the `Presentational` component.
|
||||
Você está quase pronto! Lembre-se que você escreveu todo o código Redux para que o Redux pudesse controlar o gerenciamento de estado do seu aplicativo de mensagens React. Agora que o Redux está conectado, você precisa extrair o gerenciamento de estado do componente `Presentational` para o Redux. Atualmente, você tem o Redux conectado, mas está manipulando o estado localmente dentro do componente `Presentational`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the `Presentational` component, first, remove the `messages` property in the local `state`. These messages will be managed by Redux. Next, modify the `submitMessage()` method so that it dispatches `submitNewMessage()` from `this.props`, and pass in the current message input from local `state` as an argument. Because you removed `messages` from local state, remove the `messages` property from the call to `this.setState()` here as well. Finally, modify the `render()` method so that it maps over the messages received from `props` rather than `state`.
|
||||
No componente `Presentational`, primeiro, remova a propriedade `messages` no `state` local. Essas mensagens serão gerenciadas pelo Redux. Em seguida, modifique o método `submitMessage()` para que ele despache `submitNewMessage()` de `this.props`, e passe no input de mensagem atual do `state` local como um argumento. Como você removeu `mensagens` do state local, também remova aqui a propriedade `messages` da chamada para `this.setState()`. Finalmente, modifique o método `render()` para que ele mapeie as mensagens recebidas de `props` ao invés do `state`.
|
||||
|
||||
Once these changes are made, the app will continue to function the same, except Redux manages the state. This example also illustrates how a component may have local `state`: your component still tracks user input locally in its own `state`. You can see how Redux provides a useful state management framework on top of React. You achieved the same result using only React's local state at first, and this is usually possible with simple apps. However, as your apps become larger and more complex, so does your state management, and this is the problem Redux solves.
|
||||
Quando essas alterações forem feitas, o aplicativo continuará a funcionar do mesmo jeito, exceto que o Redux gerencia o estado. Este exemplo também ilustra como um componente pode ter um `state` local: seu componente ainda monitora a entrada do usuário localmente em seu próprio `state`. Você pode ver como o Redux fornece um framework de gerenciamento de estado útil em cima do React. Você alcançou o mesmo resultado usando apenas o state local do React no início, e isso geralmente é possível com aplicativos simples. No entanto, como seus aplicativos se tornam maiores e mais complexos, seu gerenciamento de estado também fica mais complexo, e esse é o problema que o Redux resolve.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `AppWrapper` should render to the page.
|
||||
O `AppWrapper` deve ser renderizado na página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should render to page.
|
||||
O componente `Presentational` deve ser renderizado na página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should render an `h2`, `input`, `button`, and `ul` elements.
|
||||
O componente `Presentational` deve renderizar os elementos `h2`, `input`, `button` e `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive `messages` from the Redux store as a prop.
|
||||
O componente `Presentational` deve receber `messages` do store Redux como prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -70,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive the `submitMessage` action creator as a prop.
|
||||
O componente `Presentational` deve receber o criador de ação `submitMessage` como prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of the `Presentational` component should contain one property, `input`, which is initialized to an empty string.
|
||||
O state do componente `Presentational` deve conter uma propriedade, `input`, a qual é inicializada como uma string vazia.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -100,7 +100,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Typing in the `input` element should update the state of the `Presentational` component.
|
||||
Digitar no elemento `input` deve atualizar o estado do componente `Presentational`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -124,7 +124,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
Dispatching the `submitMessage` on the `Presentational` component should update Redux store and clear the input in local state.
|
||||
Despachar o `submitMessage` no componente `Presentational` deve atualizar o store Redux e limpar o input no state local.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -156,7 +156,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
The `Presentational` component should render the `messages` from the Redux store.
|
||||
O componente `Presentational` deve renderizar `messages` do store Redux.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036143
|
||||
title: Extract State Logic to Redux
|
||||
title: Extrair a Lógica de State do Redux
|
||||
challengeType: 6
|
||||
forumTopicId: 301429
|
||||
dashedName: extract-state-logic-to-redux
|
||||
@ -8,23 +8,23 @@ dashedName: extract-state-logic-to-redux
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you finished the React component, you need to move the logic it's performing locally in its `state` into Redux. This is the first step to connect the simple React app to Redux. The only functionality your app has is to add new messages from the user to an unordered list. The example is simple in order to demonstrate how React and Redux work together.
|
||||
Agora que você terminou o componente React, você precisa mover a lógica que está sendo executada localmente em seu `state` para o Redux. Este é o primeiro passo para conectar um aplicativo React simples ao Redux. A única funcionalidade que o seu app possui é adicionar novas mensagens do usuário em uma lista não ordenada. O exemplo é simples para demonstrar como o React e Redux trabalham juntos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
First, define an action type `ADD` and set it to a const `ADD`. Next, define an action creator `addMessage()` which creates the action to add a message. You'll need to pass a `message` to this action creator and include the message in the returned `action`.
|
||||
Primeiro, defina um tipo de ação `ADD` e atribua ela a constante `ADD`. Em seguida, defina o criador de ação `addMessage()` o qual cria uma ação para adicionar uma mensagem. Você precisará passar `message` para esse criador de ação e incluir a mensagem na `action` retornada.
|
||||
|
||||
Then create a reducer called `messageReducer()` that handles the state for the messages. The initial state should equal an empty array. This reducer should add a message to the array of messages held in state, or return the current state. Finally, create your Redux store and pass it the reducer.
|
||||
Em seguida, crie um reducer chamado `messageReducer()` que lida com o state para as mensagens. O state inicial deve ser igual a um array vazio. Este reducer deve adicionar uma mensagem ao array de mensagens mantidos no state, ou retornar o state atual. Finalmente, crie seu store Redux e passe o reducer.
|
||||
|
||||
# --hints--
|
||||
|
||||
The const `ADD` should exist and hold a value equal to the string `ADD`
|
||||
A const `ADD` deve existir e manter um valor igual a string `ADD`
|
||||
|
||||
```js
|
||||
assert(ADD === 'ADD');
|
||||
```
|
||||
|
||||
The action creator `addMessage` should return an object with `type` equal to `ADD` and `message` equal to the message that is passed in.
|
||||
O criador de ação `addMessage` deve retornar um objeto com `type` igual a `ADD` e `message` igual à mensagem que foi passada.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +35,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`messageReducer` should be a function.
|
||||
`messageReducer` deve ser uma função.
|
||||
|
||||
```js
|
||||
assert(typeof messageReducer === 'function');
|
||||
```
|
||||
|
||||
The store should exist and have an initial state set to an empty array.
|
||||
O store deve existir e ter um estado inicial definido como um array vazio.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +52,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Dispatching `addMessage` against the store should immutably add a new message to the array of messages held in state.
|
||||
Despachar `addMessage` para o store deve imutavelmente adicionar uma nova mensagem ao array de mensagens mantido no state.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `messageReducer` should return the current state if called with any other actions.
|
||||
O `messageReducer` deve retornar o state atual se chamado com qualquer outra ação.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036141
|
||||
title: Getting Started with React Redux
|
||||
title: Primeiros Passos com Redux React
|
||||
challengeType: 6
|
||||
forumTopicId: 301430
|
||||
dashedName: getting-started-with-react-redux
|
||||
@ -8,19 +8,19 @@ dashedName: getting-started-with-react-redux
|
||||
|
||||
# --description--
|
||||
|
||||
This series of challenges introduces how to use Redux with React. First, here's a review of some of the key principles of each technology. React is a view library that you provide with data, then it renders the view in an efficient, predictable way. Redux is a state management framework that you can use to simplify the management of your application's state. Typically, in a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates.
|
||||
Essa série de desafio introduz como usar o Redux com React. Primeiro, aqui está uma revisão de alguns princípios chaves de cada tecnologia. React é uma biblioteca de visualização que você fornece dados, e então ele renderiza a visualização de uma forma eficiente e previsível. Redux é um framework de gerenciamento de estado que você usa para simplificar o gerenciamento do estado da sua aplicação. Tipicamente, em uma aplicação Redux React, você cria um único store Redux que gerencia o estado de todo o seu app. Seus componentes React inscrevem-se apenas aos pedaços de dados no store que são relevantes para suas responsabilidades. Em seguida, você despacha ações diretamente de componentes React, o que então aciona a atualização do store.
|
||||
|
||||
Although React components can manage their own state locally, when you have a complex app, it's generally better to keep the app state in a single location with Redux. There are exceptions when individual components may have local state specific only to them. Finally, because Redux is not designed to work with React out of the box, you need to use the `react-redux` package. It provides a way for you to pass Redux `state` and `dispatch` to your React components as `props`.
|
||||
Embora componentes React podem gerenciar seus próprios estados localmente, quando você tem um app complexo, geralmente é melhor manter o estado do app em um único lugar com Redux. Existem exceções quando componentes individuais podem ter um estado local específico apenas para eles. Finalmente, como o redux não é projetado para trabalhar com o React puro, você precisa usar o pacote `react-redux`. Ele fornece uma forma de você passar o `state` e `dispatch` do Redux para seus componentes React como `props`.
|
||||
|
||||
Over the next few challenges, first, you'll create a simple React component which allows you to input new text messages. These are added to an array that's displayed in the view. This should be a nice review of what you learned in the React lessons. Next, you'll create a Redux store and actions that manage the state of the messages array. Finally, you'll use `react-redux` to connect the Redux store with your component, thereby extracting the local state into the Redux store.
|
||||
Ao longo dos próximos desafios, primeiro, você criará um componente React simples que lhe permite inserir novas mensagens de texto. Estes são adicionados a um array que é exibido na exibição. Essa deve ser uma boa revisão do que você aprendeu nas lições do React. Em seguida, você vai criar um store e ações do Redux que gerenciam o estado do array de mensagens. Finalmente, você usará `react-redux` para conectar o store do Redux com seu componente, deste modo extraindo o state local para o store Redux.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Start with a `DisplayMessages` component. Add a constructor to this component and initialize it with a state that has two properties: `input`, that's set to an empty string, and `messages`, that's set to an empty array.
|
||||
Comece com o componente `DisplayMessages`. Adicione um construtor para esse componente e inicialize ele com um state com duas propriedades: `input`, que é definido como uma string vazia, e `messages`, que é definido para um array vazio.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `DisplayMessages` component should render an empty `div` element.
|
||||
O componente `DisplayMessages` deve renderizar um elemento `div` vazio.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `DisplayMessages` constructor should be called properly with `super`, passing in `props`.
|
||||
O construtor `DisplayMessages` deve ser chamado corretamente com `super`, passando `props`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -46,7 +46,7 @@ The `DisplayMessages` constructor should be called properly with `super`, passin
|
||||
);
|
||||
```
|
||||
|
||||
The `DisplayMessages` component should have an initial state equal to `{input: "", messages: []}`.
|
||||
O componente `DisplayMessages` deve ter um state inicial igual a `{input: "", messages: []}`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036142
|
||||
title: Manage State Locally First
|
||||
title: Gerenciar State Localmente Primeiro
|
||||
challengeType: 6
|
||||
forumTopicId: 301431
|
||||
dashedName: manage-state-locally-first
|
||||
@ -8,19 +8,19 @@ dashedName: manage-state-locally-first
|
||||
|
||||
# --description--
|
||||
|
||||
Here you'll finish creating the `DisplayMessages` component.
|
||||
Aqui você terminará de criar o componente `DisplayMessages`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
First, in the `render()` method, have the component render an `input` element, `button` element, and `ul` element. When the `input` element changes, it should trigger a `handleChange()` method. Also, the `input` element should render the value of `input` that's in the component's state. The `button` element should trigger a `submitMessage()` method when it's clicked.
|
||||
Primeiro, no método `render()`, faça o componente renderizar os elementos `input`, `button` e `ul`. Quando o elemento `input` alterar, ele deve acionar o método `handleChange()`. Além disso, o elemento `input` deve renderizar o valor do `input` que está no state do componente. O elemento `button` deve acionar o método `submitMessage()` quando for clicado.
|
||||
|
||||
Second, write these two methods. The `handleChange()` method should update the `input` with what the user is typing. The `submitMessage()` method should concatenate the current message (stored in `input`) to the `messages` array in local state, and clear the value of the `input`.
|
||||
Em segundo lugar, escreva esses dois métodos. O método `handleChange()` deve atualizar o `input` com o que o usuário digitar. O método `submitMessage()` deve concatenar a mensagem atual (armazenada em `input`) para o array `messages` no state local, e limpar o valor do `input`.
|
||||
|
||||
Finally, use the `ul` to map over the array of `messages` and render it to the screen as a list of `li` elements.
|
||||
Finalmente, use o `ul` para mapear em cima do array `messages` e o renderize na tela como uma lista de elementos `li`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `DisplayMessages` component should initialize with a state equal to `{ input: "", messages: [] }`.
|
||||
O componente `DisplayMessages` deve inicializar com o estado igual a `{ input: "", messages: []}`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `DisplayMessages` component should render a `div` containing an `h2` element, a `button` element, a `ul` element, and `li` elements as children.
|
||||
O componente `DisplayMessages` deve renderizar um `div` contendo um elemento `h2`, um elemento `button`, um elemento `ul` e elementos `li` como filhos.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -58,13 +58,13 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
`.map` should be used on the `messages` array.
|
||||
`.map` deve ser usado no array de `mensagens`.
|
||||
|
||||
```js
|
||||
assert(code.match(/this\.state\.messages\.map/g));
|
||||
```
|
||||
|
||||
The `input` element should render the value of `input` in local state.
|
||||
O elemento `input` deve renderizar o valor de `input` no state local.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -83,7 +83,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
Calling the method `handleChange` should update the `input` value in state to the current input.
|
||||
Chamar o método `handleChange` deve atualizar o valor do `input` no state para o input atual.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -106,7 +106,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
Clicking the `Add message` button should call the method `submitMessage` which should add the current `input` to the `messages` array in state.
|
||||
Clicar o botão `Add message` deve chamar o método `submitMessage` o qual deve adicionar o texto atual no `input` ao array `messages` no state.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -149,7 +149,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
The `submitMessage` method should clear the current input.
|
||||
O método `submitMessage` deve limpar o input atual.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036146
|
||||
title: Map Dispatch to Props
|
||||
title: Mapeie Dispatch para Props
|
||||
challengeType: 6
|
||||
forumTopicId: 301432
|
||||
dashedName: map-dispatch-to-props
|
||||
@ -8,9 +8,9 @@ dashedName: map-dispatch-to-props
|
||||
|
||||
# --description--
|
||||
|
||||
The `mapDispatchToProps()` function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store. It's similar in structure to the `mapStateToProps()` function you wrote in the last challenge. It returns an object that maps dispatch actions to property names, which become component `props`. However, instead of returning a piece of `state`, each property returns a function that calls `dispatch` with an action creator and any relevant action data. You have access to this `dispatch` because it's passed in to `mapDispatchToProps()` as a parameter when you define the function, just like you passed `state` to `mapStateToProps()`. Behind the scenes, React Redux is using Redux's `store.dispatch()` to conduct these dispatches with `mapDispatchToProps()`. This is similar to how it uses `store.subscribe()` for components that are mapped to `state`.
|
||||
A função `mapDispatchToProps()` é usada para fornecer criadores de ação específicos para seus componentes React, para que eles possam despachar ações ao store Redux. É semelhante em estrutura à função `mapStateToProps()` que você escreveu no último desafio. Isso retorna um objeto que mapeia as ações de despache para nomes de propriedades, o que se torna `props` do componente. No entanto, em vez de retornar um pedaço do `state`, cada propriedade retorna uma função que chama `dispatch` com um criador de ação e quaisquer dados de ação relevantes. Você tem acesso a este `dispatch` porque ele foi passado para `mapDispatchToProps()` como um parâmetro quando você define a função, assim como você passou o estado `` para `mapStateToProps()`. Nos bastidores, React Redux está usando `store.dispatch()` do Redux para realizar estes despachos com `mapDispatchToProps()`. Isso é semelhante a como ele usa `store.subscribe()` para componentes que são mapeados para o `state`.
|
||||
|
||||
For example, you have a `loginUser()` action creator that takes a `username` as an action payload. The object returned from `mapDispatchToProps()` for this action creator would look something like:
|
||||
Por exemplo, você tem o criador de ação `loginUser()` que recebe um `username` como uma ação payload. O objeto retornado do `mapDispatchToProps()` para este criador da ação pareceria algo como:
|
||||
|
||||
```jsx
|
||||
{
|
||||
@ -22,11 +22,11 @@ For example, you have a `loginUser()` action creator that takes a `username` as
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor provides an action creator called `addMessage()`. Write the function `mapDispatchToProps()` that takes `dispatch` as an argument, then returns an object. The object should have a property `submitNewMessage` set to the dispatch function, which takes a parameter for the new message to add when it dispatches `addMessage()`.
|
||||
O editor de código fornece um criador de ação chamado `addMessage()`. Escreva a função `mapDispatchToProps()` que recebe `dispatch` como um argumento, e então retorna um objeto. O objeto deve ter a propriedade `submitNewMessage` definida para a função de despacho, que recebe um parâmetro para a nova mensagem a ser adicionada quando despachar `addMessage()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`addMessage` should return an object with keys `type` and `message`.
|
||||
`addMessage` deve retornar um objeto com chaves `type` e `message`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,19 +40,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`mapDispatchToProps` should be a function.
|
||||
`mapDispatchToProps` deve ser uma função.
|
||||
|
||||
```js
|
||||
assert(typeof mapDispatchToProps === 'function');
|
||||
```
|
||||
|
||||
`mapDispatchToProps` should return an object.
|
||||
`mapDispatchToProps` deve retornar um objeto.
|
||||
|
||||
```js
|
||||
assert(typeof mapDispatchToProps() === 'object');
|
||||
```
|
||||
|
||||
Dispatching `addMessage` with `submitNewMessage` from `mapDispatchToProps` should return a message to the dispatch function.
|
||||
Despachar `addMessage` com `submitNewMessage` do `mapDispatchToProps` deve retornar uma mensagem para a função de despachamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036145
|
||||
title: Map State to Props
|
||||
title: Mapear State para Props
|
||||
challengeType: 6
|
||||
forumTopicId: 301433
|
||||
dashedName: map-state-to-props
|
||||
@ -8,37 +8,37 @@ dashedName: map-state-to-props
|
||||
|
||||
# --description--
|
||||
|
||||
The `Provider` component allows you to provide `state` and `dispatch` to your React components, but you must specify exactly what state and actions you want. This way, you make sure that each component only has access to the state it needs. You accomplish this by creating two functions: `mapStateToProps()` and `mapDispatchToProps()`.
|
||||
O componente `Provider` permite que você forneça `state` e `dispatch` para seus componentes React, mas você deve especificar exatamente que state e actions deseja. Desta forma, você tem certeza que cada componente só tem acesso ao state de que precisa. Você consegue isso criando duas funções: `mapStateToProps()` e `mapDispatchToProps()`.
|
||||
|
||||
In these functions, you declare what pieces of state you want to have access to and which action creators you need to be able to dispatch. Once these functions are in place, you'll see how to use the React Redux `connect` method to connect them to your components in another challenge.
|
||||
Nessas funções, você declara quais pedaços do state você quer ter acesso e quais criadores de ação você precisa ser capaz de despachar. Quando essas funções estiverem no lugar, você verá como usar o método `connect` do React Redux para conectá-los aos seus componentes em outro desafio.
|
||||
|
||||
**Note:** Behind the scenes, React Redux uses the `store.subscribe()` method to implement `mapStateToProps()`.
|
||||
**Nota:** Nos bastidores, o React Redux usa o método `store.subscribe()` para implementar `mapStateToProps()`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a function `mapStateToProps()`. This function should take `state` as an argument, then return an object which maps that state to specific property names. These properties will become accessible to your component via `props`. Since this example keeps the entire state of the app in a single array, you can pass that entire state to your component. Create a property `messages` in the object that's being returned, and set it to `state`.
|
||||
Crie a função `mapStateToProps()`. Esta função deve receber `state` como um argumento, em seguida, retornar um objeto que mapeia esse state para nomes de propriedade específicos. Essas propriedades se tornarão acessíveis para o componente via `props`. Uma vez que esse exemplo mantém o estado inteiro do app em um único array, você pode passar todo o state para o seu componente. Cria uma propriedade `messages` no objeto que está sendo retornado e defina-a no `state`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The const `state` should be an empty array.
|
||||
A const `state` deve ser um array vazio.
|
||||
|
||||
```js
|
||||
assert(Array.isArray(state) && state.length === 0);
|
||||
```
|
||||
|
||||
`mapStateToProps` should be a function.
|
||||
`mapStateToProps` deve ser uma função.
|
||||
|
||||
```js
|
||||
assert(typeof mapStateToProps === 'function');
|
||||
```
|
||||
|
||||
`mapStateToProps` should return an object.
|
||||
`mapStateToProps` deve retornar um objeto.
|
||||
|
||||
```js
|
||||
assert(typeof mapStateToProps() === 'object');
|
||||
```
|
||||
|
||||
Passing an array as state to `mapStateToProps` should return this array assigned to a key of `messages`.
|
||||
Passar um array como state para `mapStateToProps` deve retornar esse array atribuído à chave `messages`.
|
||||
|
||||
```js
|
||||
assert(mapStateToProps(['messages']).messages.pop() === 'messages');
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403614a
|
||||
title: Moving Forward From Here
|
||||
title: Movendo Adiante Daqui
|
||||
challengeType: 6
|
||||
forumTopicId: 301434
|
||||
dashedName: moving-forward-from-here
|
||||
@ -8,19 +8,19 @@ dashedName: moving-forward-from-here
|
||||
|
||||
# --description--
|
||||
|
||||
Congratulations! You finished the lessons on React and Redux. There's one last item worth pointing out before you move on. Typically, you won't write React apps in a code editor like this. This challenge gives you a glimpse of what the syntax looks like if you're working with npm and a file system on your own machine. The code should look similar, except for the use of `import` statements (these pull in all of the dependencies that have been provided for you in the challenges). The "Managing Packages with npm" section covers npm in more detail.
|
||||
Parabéns! Você concluiu as lições sobre React e Redux. Vale a pena destacar um último item antes de continuar. Normalmente, você não escreverá apps React em um editor de código como esse. Esse desafio dá-lhe um vislumbre de como a sintaxe se parece se você está trabalhando com o npm e um sistema de arquivos na sua própria máquina. O código deve ser similar, exceto para o uso de instruções de `import` (essas puxam em todas as dependências fornecidas para você nos desafios). A seção "Gerenciando pacotes com npm" cobre o npm com mais detalhes.
|
||||
|
||||
Finally, writing React and Redux code generally requires some configuration. This can get complicated quickly. If you are interested in experimenting on your own machine, the <a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="nofollow">Create React App</a> comes configured and ready to go.
|
||||
Finalmente, escrever o React e o código Redux geralmente requerem alguma configuração. Isto pode tornar-se complicado rapidamente. Se você estiver interessado em experimentar em sua própria máquina, o <a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="nofollow">Criar um App React</a> vem configurado e pronto para ser usado.
|
||||
|
||||
Alternatively, you can enable Babel as a JavaScript Preprocessor in CodePen, add React and ReactDOM as external JavaScript resources, and work there as well.
|
||||
Como alternativa, você pode habilitar o Babel como um pré-processador de JavaScript no CodePen, adicionar React e ReactDOM como recursos externos de JavaScript, e trabalhar lá também.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Log the message `'Now I know React and Redux!'` to the console.
|
||||
Exiba a mensagem `'Now I know React and Redux!'` no console.
|
||||
|
||||
# --hints--
|
||||
|
||||
The message `Now I know React and Redux!` should be logged to the console.
|
||||
A mensagem `Now I know React and Redux!` deve ser exibida no console.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036144
|
||||
title: Use Provider to Connect Redux to React
|
||||
title: Use Provider para Conectar Redux ao React
|
||||
challengeType: 6
|
||||
forumTopicId: 301435
|
||||
dashedName: use-provider-to-connect-redux-to-react
|
||||
@ -8,9 +8,9 @@ dashedName: use-provider-to-connect-redux-to-react
|
||||
|
||||
# --description--
|
||||
|
||||
In the last challenge, you created a Redux store to handle the messages array and created an action for adding new messages. The next step is to provide React access to the Redux store and the actions it needs to dispatch updates. React Redux provides its `react-redux` package to help accomplish these tasks.
|
||||
No último desafio, você criou um store Redux para lidar com o array messages e criou uma ação para adicionar novas mensagens. O próximo passo é fornecer ao React o acesso ao store Redux e as ações que ele precise para despachar atualizações. React Redux fornece seu pacote `react-redux` para ajudar a realizar essas tarefas.
|
||||
|
||||
React Redux provides a small API with two key features: `Provider` and `connect`. Another challenge covers `connect`. The `Provider` is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux `store` and `dispatch` functions throughout your component tree. `Provider` takes two props, the Redux store and the child components of your app. Defining the `Provider` for an App component might look like this:
|
||||
React Redux fornece uma pequena API com dois principais recursos: `Provider` e `connect`. Outro desafio cobre `connect`. O `Provider` é um componente encapsulador do Redux React que encapsula seu aplicativo React. Este wrapper permite então que você acesse o `store` Redux e funções de `dispatch` em toda a sua árvore de componentes. `Provider` usa duas props, o store do Redux e os componentes filhos do seu aplicativo. Definir o `Provider` para um componente do aplicativo pode se parecer com isto:
|
||||
|
||||
```jsx
|
||||
<Provider store={store}>
|
||||
@ -20,13 +20,13 @@ React Redux provides a small API with two key features: `Provider` and `connect`
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor now shows all your Redux and React code from the past several challenges. It includes the Redux store, actions, and the `DisplayMessages` component. The only new piece is the `AppWrapper` component at the bottom. Use this top level component to render the `Provider` from `ReactRedux`, and pass the Redux store as a prop. Then render the `DisplayMessages` component as a child. Once you are finished, you should see your React component rendered to the page.
|
||||
O editor de código agora mostra todos os seus códigos Redux e React dos vários desafios passados. Inclui o store, actions e o componente `DisplayMessages`. O único novo pedaço é o componente `AppWrapper` na parte inferior. Use este componente de nível superior para renderizar o `Provider` de `ReactRedux`, e passar ao store do Redux como uma propriedade. Em seguida, renderize o componente `DisplayMessages` como filho. Quando você terminar, você deve usar seu componente React renderizado para a página.
|
||||
|
||||
**Note:** React Redux is available as a global variable here, so you can access the Provider with dot notation. The code in the editor takes advantage of this and sets it to a constant `Provider` for you to use in the `AppWrapper` render method.
|
||||
**Nota:** Redux React está disponível como uma variável global aqui, então você pode acessar o Provider com notação de ponto. O código no editor aproveita isso e o define para uma constante `Provider` para você usar no método de renderização `AppWrapper`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `AppWrapper` should render.
|
||||
O `AppWrapper` deve renderizar.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -37,7 +37,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Provider` wrapper component should have a prop of `store` passed to it, equal to the Redux store.
|
||||
O componente wrapper do `Provider` deve ter uma propriedade `store` passada para ele, igual ao store do Redux.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@ -51,7 +51,7 @@ The `Provider` wrapper component should have a prop of `store` passed to it, equ
|
||||
);
|
||||
```
|
||||
|
||||
`DisplayMessages` should render as a child of `AppWrapper`.
|
||||
`DisplayMessages` deve renderizar como filho de `AppWrapper`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -64,7 +64,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `DisplayMessages` component should render an `h2`, `input`, `button`, and `ul` element.
|
||||
O componente `DisplayMessages` deve renderizar os elementos `h2`, `input`, `button`, e `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036172
|
||||
title: Render State in the User Interface Another Way
|
||||
title: Renderizar Estado na Interface de Usuário de Outra Forma
|
||||
challengeType: 6
|
||||
forumTopicId: 301408
|
||||
dashedName: render-state-in-the-user-interface-another-way
|
||||
@ -8,17 +8,17 @@ dashedName: render-state-in-the-user-interface-another-way
|
||||
|
||||
# --description--
|
||||
|
||||
There is another way to access `state` in a component. In the `render()` method, before the `return` statement, you can write JavaScript directly. For example, you could declare functions, access data from `state` or `props`, perform computations on this data, and so on. Then, you can assign any data to variables, which you have access to in the `return` statement.
|
||||
Há outra forma de acessar o `state` em um componente. No método `render()`, antes da instrução `return`, você pode escrever JavaScript diretamente. Por exemplo, você poderia declarar funções, acessar dados de `state` ou `props`, executar computações nesses dados, entre outras coisas. Em seguida, você pode atribuir quaisquer dados para variáveis, que você tem acesso na instrução `return`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the `MyComponent` render method, define a `const` called `name` and set it equal to the name value in the component's `state`. Because you can write JavaScript directly in this part of the code, you don't have to enclose this reference in curly braces.
|
||||
No método de renderização do `MyComponent`, defina uma `const` chamada `name` e defina-a igual ao valor do nome no `state` do componente. Como você pode escrever JavaScript diretamente nesta parte do código, você não precisa incluir essa referência em chaves.
|
||||
|
||||
Next, in the return statement, render this value in an `h1` tag using the variable `name`. Remember, you need to use the JSX syntax (curly braces for JavaScript) in the return statement.
|
||||
Em seguida, na instrução return, renderize este valor em uma tag `h1` usando a variável `name`. Lembre-se, você precisa usar a sintaxe JSX (chaves para JavaScript) na instrução de retorno.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should have a key `name` with value `freeCodeCamp` stored in its state.
|
||||
`MyComponent` deve ter uma chave `name` com o valor `freeCodeCamp` armazenado no seu state.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should render an `h1` header enclosed in a single `div`.
|
||||
`MyComponent` deve renderizar um título `h1` que está dentro de um único `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -37,14 +37,14 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The rendered `h1` tag should include a reference to `{name}`.
|
||||
A tag `h1` renderizada deve ter uma referência a `{name}`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')));
|
||||
```
|
||||
|
||||
The rendered `h1` header should contain text rendered from the component's state.
|
||||
O título `h1` renderizado deve conter apenas texto renderizado do estado do componente.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036184
|
||||
title: Render with an If-Else Condition
|
||||
title: Renderizar com uma condição If-Else
|
||||
challengeType: 6
|
||||
forumTopicId: 301410
|
||||
dashedName: render-with-an-if-else-condition
|
||||
@ -8,17 +8,17 @@ dashedName: render-with-an-if-else-condition
|
||||
|
||||
# --description--
|
||||
|
||||
Another application of using JavaScript to control your rendered view is to tie the elements that are rendered to a condition. When the condition is true, one view renders. When it's false, it's a different view. You can do this with a standard `if/else` statement in the `render()` method of a React component.
|
||||
Outra aplicação de usar JavaScript para controlar sua visão renderizada é associar os elementos que são renderizados em uma condição. Quando a condição é verdadeira, uma visão renderiza. Quando é falso, é uma visão diferente. Você pode fazer isso com uma instrução padrão `if/else` no método `render()` de um componente React.
|
||||
|
||||
# --instructions--
|
||||
|
||||
MyComponent contains a `boolean` in its state which tracks whether you want to display some element in the UI or not. The `button` toggles the state of this value. Currently, it renders the same UI every time. Rewrite the `render()` method with an `if/else` statement so that if `display` is `true`, you return the current markup. Otherwise, return the markup without the `h1` element.
|
||||
MyComponent contém um `boolean` em seu estado que rastreia se você deseja exibir algum elemento na interface do usuário ou não. O `button` alterna o estado deste valor. No momento, ele renderiza a mesma interface do usuário todas as vezes. Reescreva o método `render()` com uma instrução `if/else` para que se `display` for `true`, você retorna a marcação atual. Caso contrário, retorne a marcação sem o elemento `h1`.
|
||||
|
||||
**Note:** You must write an `if/else` to pass the tests. Use of the ternary operator will not pass here.
|
||||
**Nota:** Você deve escrever um `if/else` para passar nos testes. O uso do operador ternário não passará aqui.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should exist and render.
|
||||
`MyComponent` deve existir e renderizar.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
When `display` is set to `true`, a `div`, `button`, and `h1` should render.
|
||||
Quando `display` é definido como `true`, uma `div`, um `button`, e um `h1` devem renderizar.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -50,7 +50,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
When `display` is set to `false`, only a `div` and `button` should render.
|
||||
Quando `display` é definido como `false`, apenas uma `div` e um `button` devem renderizar.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -71,7 +71,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
The render method should use an `if/else` statement to check the condition of `this.state.display`.
|
||||
O método de renderização deve usar um comando `if/else` para verificar a condição de `this.state.display`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616f
|
||||
title: Review Using Props with Stateless Functional Components
|
||||
title: Revise Uso de Props com Componentes Funcionais Sem Estado
|
||||
challengeType: 6
|
||||
forumTopicId: 301411
|
||||
dashedName: review-using-props-with-stateless-functional-components
|
||||
@ -8,19 +8,19 @@ dashedName: review-using-props-with-stateless-functional-components
|
||||
|
||||
# --description--
|
||||
|
||||
Except for the last challenge, you've been passing props to stateless functional components. These components act like pure functions. They accept props as input and return the same view every time they are passed the same props. You may be wondering what state is, and the next challenge will cover it in more detail. Before that, here's a review of the terminology for components.
|
||||
Exceto pelo último desafio, você tem passado "props" para componentes funcionais sem estado. Esses componentes agem como funções puras. Eles aceitam props como entrada e retornam a mesma view toda vez que eles são passados nas mesmas props. Você pode estar se perguntando o que é state, e o próximo desafio o abordará com mais detalhes. Antes disso, aqui está uma revisão da terminologia para componentes.
|
||||
|
||||
A *stateless functional component* is any function you write which accepts props and returns JSX. A *stateless component*, on the other hand, is a class that extends `React.Component`, but does not use internal state (covered in the next challenge). Finally, a *stateful component* is a class component that does maintain its own internal state. You may see stateful components referred to simply as components or React components.
|
||||
Um *componente funcional stateless (sem estado)* é qualquer função que você escreve que aceita props e retorna JSX. Um *componente stateless (sem estado)*, por outro lado, é uma classe que estende `React.Component`, mas não usa estado interno (abordado no próximo desafio). Finalmente, um *componente stateful (com estado)* é um componente de classe que mantém seu próprio estado interno. Você pode ver componentes de estado referidos simplesmente como componentes ou componentes React.
|
||||
|
||||
A common pattern is to try to minimize statefulness and to create stateless functional components wherever possible. This helps contain your state management to a specific area of your application. In turn, this improves development and maintenance of your app by making it easier to follow how changes to state affect its behavior.
|
||||
Um padrão comum é tentar minimizar statefulness e criar componentes funcionais sem estado, sempre que possível. Isso ajuda a conter sua gestão de estado para uma área específica de sua aplicação. Por sua vez, isso melhora o desenvolvimento e a manutenção do seu aplicativo, tornando mais fácil acompanhar como alterações no estado afetam seu comportamento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a `CampSite` component that renders a `Camper` component as a child. Define the `Camper` component and assign it default props of `{ name: 'CamperBot' }`. Inside the `Camper` component, render any code that you want, but make sure to have one `p` element that includes only the `name` value that is passed in as a `prop`. Finally, define `propTypes` on the `Camper` component to require `name` to be provided as a prop and verify that it is of type `string`.
|
||||
O editor de código tem um componente `CampSite` que renderiza um componente `Camper` como filho. Defina o componente `Camper` e atribua-lhe as propriedades padrão de `{ name: 'CamperBot' }`. Dentro do componente `Camper`, renderize qualquer código que você quiser, mas certifique-se de ter um elemento `p` que inclua apenas o valor `name` que é passado como uma `prop`. Finalmente defina `propTypes` no componente `Camper` para exigir que o `name` seja fornecido como uma prop e verifique se é do tipo `string`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `CampSite` component should render.
|
||||
O componente `CampSite` deve ser renderizado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Camper` component should render.
|
||||
O componente `Camper` deve ser renderizado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Camper` component should include default props which assign the string `CamperBot` to the key `name`.
|
||||
O componente `Camper` deve incluir a props padrão que atribui a string `CamperBot` à chave `name`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -52,7 +52,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Camper` component should include prop types which require the `name` prop to be of type `string`.
|
||||
O componente `Camper` deve incluir tipo de prop, o que obriga que a prop `name` seja do tipo `string`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -62,7 +62,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Camper` component should contain a `p` element with only the text from the `name` prop.
|
||||
O componente `Camper` deve conter um elemento `p` com apenas o texto da prop `name`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036173
|
||||
title: Set State with this.setState
|
||||
title: Definir estado com this.setState
|
||||
challengeType: 6
|
||||
forumTopicId: 301412
|
||||
dashedName: set-state-with-this-setstate
|
||||
@ -8,7 +8,7 @@ dashedName: set-state-with-this-setstate
|
||||
|
||||
# --description--
|
||||
|
||||
The previous challenges covered component `state` and how to initialize state in the `constructor`. There is also a way to change the component's `state`. React provides a method for updating component `state` called `setState`. You call the `setState` method within your component class like so: `this.setState()`, passing in an object with key-value pairs. The keys are your state properties and the values are the updated state data. For instance, if we were storing a `username` in state and wanted to update it, it would look like this:
|
||||
Os desafios anteriores abordaram `state` de componente e como inicializar state no `construtor`. Há também uma maneira de alterar o `state` do componente. React fornece um método para atualizar o componente `state` chamado `setState`. Você chama o método `setState` dentro da sua classe de componente assim: `this.setState()`, passando como parâmetro um objeto com pares de valor chave. As chaves são suas propriedades do estado e os valores são dados do estado atualizados. Por exemplo, se armazenássemos um `username` em state e quiséssemos atualizá-lo, ficaria assim:
|
||||
|
||||
```jsx
|
||||
this.setState({
|
||||
@ -16,17 +16,17 @@ this.setState({
|
||||
});
|
||||
```
|
||||
|
||||
React expects you to never modify `state` directly, instead always use `this.setState()` when state changes occur. Also, you should note that React may batch multiple state updates in order to improve performance. What this means is that state updates through the `setState` method can be asynchronous. There is an alternative syntax for the `setState` method which provides a way around this problem. This is rarely needed but it's good to keep it in mind! Please consult the [React documentation](https://facebook.github.io/react/docs/state-and-lifecycle.html) for further details.
|
||||
React espera que você nunca modifique o `state` diretamente, em vez disso sempre use `this.setState()` quando as mudanças de estado ocorrerem. Além disso, você deve notar que React pode agrupar várias atualizações de estado para melhorar o desempenho. Isso significa que atualizações de estado através do método `setState` podem ser assíncronas. Existe uma sintaxe alternativa para o método `setState` que fornece uma forma de contornar esse problema. Isso raramente é necessário, mas é bom ter isso em mente! Por favor, consulte a [documentação do React](https://facebook.github.io/react/docs/state-and-lifecycle.html) para mais detalhes.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There is a `button` element in the code editor which has an `onClick()` handler. This handler is triggered when the `button` receives a click event in the browser, and runs the `handleClick` method defined on `MyComponent`. Within the `handleClick` method, update the component `state` using `this.setState()`. Set the `name` property in `state` to equal the string `React Rocks!`.
|
||||
Há um elemento`button` no editor de código que tem um manipulador `onClick()`. Este manipulador é acionado quando o `button` recebe um evento de clique no navegador e executa o método `handleClick` definido no `MyComponent`. Dentro do método `handleClick`, atualize o componente `state` usando `this.setState()`. Defina a propriedade `name` no `state` para ser igual à string `React Rocks!`.
|
||||
|
||||
Click the button and watch the rendered state update. Don't worry if you don't fully understand how the click handler code works at this point. It's covered in upcoming challenges.
|
||||
Clique no botão e veja a atualização do estado renderizado. Não se preocupe se você não entender completamente como o código do manipulador de cliques funciona neste momento. Será abordado nos desafios futuros.
|
||||
|
||||
# --hints--
|
||||
|
||||
The state of `MyComponent` should initialize with the key value pair `{ name: Initial State }`.
|
||||
O state de `MyComponent` deve inicializar com o par de chave e valor `{ name: Initial State }`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -35,13 +35,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should render an `h1` header.
|
||||
`MyComponent` deve retornar um título `h1`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
|
||||
```
|
||||
|
||||
The rendered `h1` header should contain text rendered from the component's state.
|
||||
O título `h1` renderizado deve conter apenas texto renderizado do estado do componente.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -57,7 +57,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
Calling the `handleClick` method on `MyComponent` should set the name property in state to equal `React Rocks!`.
|
||||
Chamar o método `handleClick` no `MyComponent` deve definir a propriedade name em state para igual a `React Rocks!`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -8,21 +8,21 @@ dashedName: use--for-a-more-concise-conditional
|
||||
|
||||
# --description--
|
||||
|
||||
The `if/else` statements worked in the last challenge, but there's a more concise way to achieve the same result. Imagine that you are tracking several conditions in a component and you want different elements to render depending on each of these conditions. If you write a lot of `else if` statements to return slightly different UIs, you may repeat code which leaves room for error. Instead, you can use the `&&` logical operator to perform conditional logic in a more concise way. This is possible because you want to check if a condition is `true`, and if it is, return some markup. Here's an example:
|
||||
As declarações `if/else` funcionaram no último desafio, mas há uma maneira mais concisa de alcançar o mesmo resultado. Imagine que está a monitorar várias condições num componente e que pretende que diferentes elementos sejam renderizados, dependendo de cada uma destas condições. Se você escrever muitas instruções `else if` para retornar interfaces de usuário ligeiramente diferentes, você pode repetir código o que deixa espaço para erros. Ao invés disso, você pode usar o operador lógico `&&` para executar a lógica condicional de uma forma mais concisa. Isto é possível porque você quer verificar se uma condição é `verdadeira`, e se é, retorna uma marcação. Um exemplo:
|
||||
|
||||
```jsx
|
||||
{condition && <p>markup</p>}
|
||||
```
|
||||
|
||||
If the `condition` is `true`, the markup will be returned. If the condition is `false`, the operation will immediately return `false` after evaluating the `condition` and return nothing. You can include these statements directly in your JSX and string multiple conditions together by writing `&&` after each one. This allows you to handle more complex conditional logic in your `render()` method without repeating a lot of code.
|
||||
Se a `condition` for `verdadeira`, a marcação será retornada. Se a condição for `falsa`, a operação retornará imediatamente `false` após avaliar a `condition` e não retornará nada. Você pode incluir essas declarações diretamente em seu JSX e juntar várias condições, escrevendo `&&` após cada uma. Isso permite que você lide com uma lógica condicional mais complexa em seu método `render()` sem repetir muito código.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Solve the previous example again, so the `h1` only renders if `display` is `true`, but use the `&&` logical operator instead of an `if/else` statement.
|
||||
Resolva o exemplo anterior novamente, para que `h1` renderize apenas se `display` for `true`, mas use o operador lógico `&&` ao invés de uma instrução `if/else`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should exist and render.
|
||||
`MyComponent` deve existir e renderizar.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
When `display` is set to `true`, a `div`, `button`, and `h1` should render.
|
||||
Quando `display` é definido como `true`, uma `div`, um `button`, e um `h1` devem renderizar.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -54,7 +54,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
When `display` is set to `false`, only a `div` and `button` should render.
|
||||
Quando `display` é definido como `false`, apenas uma `div` e um `button` devem renderizar.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -75,7 +75,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
The render method should use the `&&` logical operator to check the condition of `this.state.display`.
|
||||
O método de renderização deve usar o operador lógico `&&` para verificar a condição de `this.state.display`.
|
||||
|
||||
```js
|
||||
(getUserInput) => assert(getUserInput('index').includes('&&'));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036187
|
||||
title: Use a Ternary Expression for Conditional Rendering
|
||||
title: Usar uma Expressão Ternária para Renderização Condicional
|
||||
challengeType: 6
|
||||
forumTopicId: 301414
|
||||
dashedName: use-a-ternary-expression-for-conditional-rendering
|
||||
@ -8,7 +8,7 @@ dashedName: use-a-ternary-expression-for-conditional-rendering
|
||||
|
||||
# --description--
|
||||
|
||||
Before moving on to dynamic rendering techniques, there's one last way to use built-in JavaScript conditionals to render what you want: the <dfn>ternary operator</dfn>. The ternary operator is often utilized as a shortcut for `if/else` statements in JavaScript. They're not quite as robust as traditional `if/else` statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, `if/else` statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago — when an `if/else` statement was required, it was always *outside* the `return` statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
|
||||
Antes de seguir para técnicas de renderização dinâmica, Há uma última maneira de usar condicionais de JavaScript incorporadas para renderizar o que você quer: o <dfn>operador ternário</dfn>. O operador ternário é frequentemente utilizado como um atalho para comandos `if/else` em JavaScript. Eles não são tão robustos quanto as declarações tradicionais `if/else`, mas são muito populares entre desenvolvedores React. Uma das razões para isso é devido a como JSX é compilado, instruções `if/else` não podem ser inseridas diretamente no código JSX. Você pode ter percebido isso há alguns desafios — quando uma instrução `if/else` foi necessária, estava sempre *fora* da instrução `return`. Expressões Ternárias podem ser uma excelente alternativa se você deseja implementar a lógica condicional dentro de seu JSX. Lembre que um operador ternário tem três partes, mas você pode combinar várias expressões ternárias juntas. Aqui está a sintaxe básica:
|
||||
|
||||
```jsx
|
||||
condition ? expressionIfTrue : expressionIfFalse;
|
||||
@ -16,24 +16,23 @@ condition ? expressionIfTrue : expressionIfFalse;
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has three constants defined within the `CheckUserAge` component's `render()` method. They are called `buttonOne`, `buttonTwo`, and `buttonThree`. Each of these is assigned a simple JSX expression representing a button element. First, initialize the state of `CheckUserAge` with `input` and `userAge` both set to values of an empty string.
|
||||
O editor de código tem três constantes definidas dentro do método `render()` do componente `CheckUserAge`. Eles são chamados de `buttonOne`, `buttonTwo` e `buttonThree`. A cada uma destas é atribuída uma simples expressão JSX representando um elemento de botão. Primeiro, inicialize o estado de `CheckUserAge` com `input` e `userAge` definidos com valores de uma string vazia.
|
||||
|
||||
Once the component is rendering information to the page, users should have a way to interact with it. Within the component's `return` statement, set up a ternary expression that implements the following logic: when the page first loads, render the submit button, `buttonOne`, to the page. Then, when a user enters their age and clicks the button, render a different button based on the age. If a user enters a number less than `18`, render `buttonThree`. If a user enters a number greater than or equal to `18`, render `buttonTwo`.
|
||||
Uma vez que o componente está renderizando informações na página, os usuários devem ter uma maneira de interagir com ele. Dentro da instrução `return` do componente, configure uma expressão ternária que implementa a seguinte lógica: quando a página primeiro carrega, renderizar o botão de envio, `buttonOne`, para a página. Então, quando um usuário digita sua idade e clica no botão, renderize um botão diferente baseado na idade. Se um usuário inserir um número menor que `18`, renderize `buttonThree`. Se um usuário inserir um número maior ou igual a `18`, renderize `buttonTwo`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `CheckUserAge` component should render with a single `input` element and a single `button` element.
|
||||
O componente `CheckUserAge` deve renderizar com um único elemento `input` e um único elemento</code>button`.</p>
|
||||
|
||||
```js
|
||||
assert(
|
||||
<pre><code class="js">assert(
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input')
|
||||
.length === 1 &&
|
||||
Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button')
|
||||
.length === 1
|
||||
);
|
||||
```
|
||||
`</pre>
|
||||
|
||||
The `CheckUserAge` component's state should be initialized with a property of `userAge` and a property of `input`, both set to a value of an empty string.
|
||||
O state do componente `CheckUserAge` deve ser inicializado com uma propriedade de `userAge` e uma propriedade `input`, ambos definidos com o valor de uma string vazia.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -42,7 +41,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
When the `CheckUserAge` component is first rendered to the DOM, the `button`'s inner text should be Submit.
|
||||
Quando o componente `CheckUserAge` é renderizado pela primeira vez no DOM, o texto interno do `button` deve ser enviado.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -51,7 +50,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
When a number of less than 18 is entered into the `input` element and the `button` is clicked, the `button`'s inner text should read `You Shall Not Pass`.
|
||||
Quando um número menor que 18 for inserido no elemento `input` e o `button` for clicado, o texto interno do `button` será `You Shall Not Pass`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -83,7 +82,7 @@ When a number of less than 18 is entered into the `input` element and the `butto
|
||||
})();
|
||||
```
|
||||
|
||||
When a number greater than or equal to 18 is entered into the `input` element and the `button` is clicked, the `button`'s inner text should read `You May Enter`.
|
||||
Quando um número maior ou igual a 18 for inserido no elemento `input` e o `button` for clicado, o texto interno do `button` deve ler `You May Enter`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -115,7 +114,7 @@ When a number greater than or equal to 18 is entered into the `input` element an
|
||||
})();
|
||||
```
|
||||
|
||||
Once a number has been submitted, and the value of the `input` is once again changed, the `button` should return to reading `Submit`.
|
||||
Uma vez que um número for enviado, e o valor do `input` é novamente alterado, o texto interno do `button` deve voltar a ser `Submit`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -156,7 +155,7 @@ Once a number has been submitted, and the value of the `input` is once again cha
|
||||
})();
|
||||
```
|
||||
|
||||
Your code should not contain any `if/else` statements.
|
||||
Seu código não deve conter nenhuma instrução `if/else`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036183
|
||||
title: Use Advanced JavaScript in React Render Method
|
||||
title: Use JavaScript Avançado no Método de Renderização do React
|
||||
challengeType: 6
|
||||
forumTopicId: 301415
|
||||
dashedName: use-advanced-javascript-in-react-render-method
|
||||
@ -8,27 +8,26 @@ dashedName: use-advanced-javascript-in-react-render-method
|
||||
|
||||
# --description--
|
||||
|
||||
In previous challenges, you learned how to inject JavaScript code into JSX code using curly braces, `{ }`, for tasks like accessing props, passing props, accessing state, inserting comments into your code, and most recently, styling your components. These are all common use cases to put JavaScript in JSX, but they aren't the only way that you can utilize JavaScript code in your React components.
|
||||
Nos desafios anteriores, você aprendeu como injetar o código JavaScript em JSX usando chaves `{ }`, para tarefas como acessar props, passar props, acessar o state, inserir comentários em seu código e, mais recentemente, estilizar seus componentes. Estes são todos os casos de uso comuns para colocar JavaScript em JSX, mas eles não são a única maneira de você usar o código JavaScript em seus componentes React.
|
||||
|
||||
You can also write JavaScript directly in your `render` methods, before the `return` statement, ***without*** inserting it inside of curly braces. This is because it is not yet within the JSX code. When you want to use a variable later in the JSX code *inside* the `return` statement, you place the variable name inside curly braces.
|
||||
Você também pode escrever JavaScript diretamente nos seus métodos de `render`, antes da instrução `return`, ***sem*** inseri-lo dentro de chaves. Isto é devido a ainda não está dentro do código JSX. Quando você quiser usar uma variável mais tarde no código JSX *dentro* da instrução `return`, você coloca o nome da variável dentro de chaves.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the code provided, the `render` method has an array that contains 20 phrases to represent the answers found in the classic 1980's Magic Eight Ball toy. The button click event is bound to the `ask` method, so each time the button is clicked a random number will be generated and stored as the `randomIndex` in state. On line 52, delete the string `change me!` and reassign the `answer` const so your code randomly accesses a different index of the `possibleAnswers` array each time the component updates. Finally, insert the `answer` const inside the `p` tags.
|
||||
No código fornecido, o método `render` tem uma matriz que contém 20 frases para representar as respostas encontradas no clássico brinquedo da Bola de Oito Mágica de 1980. O evento de clique no botão está ligado ao método `ask`, então cada vez que o botão é clicado um número aleatório será gerado e armazenado como o `randomIndex` no state. Na linha 52, exclua a string `change me!` e reatribua a const `answer` para que seu código acesse aleatoriamente um índice diferente do array `possibleAnswers` a cada vez que o componente atualizar. Finalmente, insira a const `answer` dentro das tags `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `MagicEightBall` component should exist and should render to the page.
|
||||
O componente </code>MagicEightBall` deve existir e deve renderizar à página.</p>
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
<pre><code class="js">assert.strictEqual(
|
||||
Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall')
|
||||
.length,
|
||||
1
|
||||
);
|
||||
```
|
||||
`</pre>
|
||||
|
||||
`MagicEightBall`'s first child should be an `input` element.
|
||||
O primeiro filho de `MagicEightBall` deve ser um elemento `input`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@ -40,7 +39,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`MagicEightBall`'s third child should be a `button` element.
|
||||
O terceiro filho de `MagicEightBall` deve ser um elemento `button`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@ -52,7 +51,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`MagicEightBall`'s state should be initialized with a property of `userInput` and a property of `randomIndex` both set to a value of an empty string.
|
||||
`MagicEightBall`deve ser inicializado com uma propriedade `userInput` e uma propriedade `randomIndex` ambas definidas com o valor de uma string vazia.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -62,7 +61,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
When `MagicEightBall` is first mounted to the DOM, it should return an empty `p` element.
|
||||
Quando `MagicEightBall` for montado pela primeira vez no DOM, ele deve retornar um elemento `p` vazio.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -71,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
When text is entered into the `input` element and the button is clicked, the `MagicEightBall` component should return a `p` element that contains a random element from the `possibleAnswers` array.
|
||||
Quando o texto é inserido no elemento `input` e o botão é clicado, o componente `MagicEightBall` deve retornar um elemento `p` que contém um elemento aleatório do array `possibleAnswers`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403618c
|
||||
title: Use Array.filter() to Dynamically Filter an Array
|
||||
title: Use Array.filter() para Filtrar Dinamicamente um Array
|
||||
challengeType: 6
|
||||
forumTopicId: 301416
|
||||
dashedName: use-array-filter-to-dynamically-filter-an-array
|
||||
@ -8,7 +8,7 @@ dashedName: use-array-filter-to-dynamically-filter-an-array
|
||||
|
||||
# --description--
|
||||
|
||||
The `map` array method is a powerful tool that you will use often when working with React. Another method related to `map` is `filter`, which filters the contents of an array based on a condition, then returns a new array. For example, if you have an array of users that all have a property `online` which can be set to `true` or `false`, you can filter only those users that are online by writing:
|
||||
O método de array `map` é uma ferramenta poderosa que você usará muitas vezes ao trabalhar com React. Outro método relacionado a `map` é o `filter`, o qual filtra o conteúdo de um array baseado em uma condição, em seguida retorna um novo array. Por exemplo, se você tem um array de usuários que todo usuário têm a propriedade `online` que pode ser definida como `true` ou `false`, você pode filtrar apenas aqueles usuários que estão online escrevendo:
|
||||
|
||||
```js
|
||||
let onlineUsers = users.filter(user => user.online);
|
||||
@ -16,11 +16,11 @@ let onlineUsers = users.filter(user => user.online);
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the code editor, `MyComponent`'s `state` is initialized with an array of users. Some users are online and some aren't. Filter the array so you see only the users who are online. To do this, first use `filter` to return a new array containing only the users whose `online` property is `true`. Then, in the `renderOnline` variable, map over the filtered array, and return a `li` element for each user that contains the text of their `username`. Be sure to include a unique `key` as well, like in the last challenges.
|
||||
No editor de código, o `state` de `MyComponent` é inicializado com um array de usuários. Alguns usuários estão online e outros não. Filtre o array para que você veja apenas os usuários que estão online. Para isso, primeiro use `filter` para retornar um novo array contendo apenas os usuários os quais possuem a propriedade `online` como `true`. Em seguida, na variável `renderOnline`, mapeie sobre o array filtrado e retorne um elemento `li` para cada usuário que contem o texto de seus `username`. Garante que você inclua uma `key` única, como nos últimos desafios.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should exist and render to the page.
|
||||
`MyComponent` deve existir e ser rendizado na página.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@ -29,7 +29,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent`'s state should be initialized to an array of six users.
|
||||
O state de `MyComponent` deve ser inicializado com um array de seis usuários.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should return a `div`, an `h1`, and then an unordered list containing `li` elements for every user whose online status is set to `true`.
|
||||
`MyComponent` deve retornar os elementos `div`, `h1` e em seguida uma lista não ordenada contendo elementos `li` para cada usuário que possui o status online como sendo `true (verdadeiro)`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
})();
|
||||
```
|
||||
|
||||
`MyComponent` should render `li` elements that contain the `username` of each online user.
|
||||
`MyComponent` deve renderizar elementos `li` que contêm o `username` de cada usuário online.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@ -109,7 +109,7 @@ assert(
|
||||
})();
|
||||
```
|
||||
|
||||
Each list item element should have a unique `key` attribute.
|
||||
Cada item de elemento da lista deve ter um atributo `key` único.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403618a
|
||||
title: Use Array.map() to Dynamically Render Elements
|
||||
title: Use Array.map() para Renderizar Elementos Dinamicamente
|
||||
challengeType: 6
|
||||
forumTopicId: 301417
|
||||
dashedName: use-array-map-to-dynamically-render-elements
|
||||
@ -8,21 +8,21 @@ dashedName: use-array-map-to-dynamically-render-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Conditional rendering is useful, but you may need your components to render an unknown number of elements. Often in reactive programming, a programmer has no way to know what the state of an application is until runtime, because so much depends on a user's interaction with that program. Programmers need to write their code to correctly handle that unknown state ahead of time. Using `Array.map()` in React illustrates this concept.
|
||||
Renderização condicional é útil, mas você pode precisar de seus componentes para renderizar um número desconhecido de elementos. Muitas vezes em programação reativa, um programador não tem como saber o estado de uma aplicação até o tempo de execução, porque muito depende da interação do usuário com esse programa. Os programadores precisam escrever o seu código para lidar corretamente com esse estado desconhecido antes do tempo. Usar `Array.map()` em React ilustra este conceito.
|
||||
|
||||
For example, you create a simple "To Do List" app. As the programmer, you have no way of knowing how many items a user might have on their list. You need to set up your component to dynamically render the correct number of list elements long before someone using the program decides that today is laundry day.
|
||||
Por exemplo, você cria um aplicativo "Lista de Coisas a Fazer" simples. Como programador, você não tem como saber quantos itens um usuário pode ter em sua lista. Você precisa configurar seu componente para renderizar dinamicamente o número correto de elementos da lista muito antes de alguém usar o programa decidir que hoje é o dia da lavagem.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has most of the `MyToDoList` component set up. Some of this code should look familiar if you completed the controlled form challenge. You'll notice a `textarea` and a `button`, along with a couple of methods that track their states, but nothing is rendered to the page yet.
|
||||
O editor de código tem a maioria do componente `MyToDoList` configurado. Parte deste código deve parecer familiar se você completou o desafio de formulário controlado. Você notará um `textarea` e um `button`, junto com alguns métodos que rastreiam seus estados, mas nada é renderizado na página ainda.
|
||||
|
||||
Inside the `constructor`, create a `this.state` object and define two states: `userInput` should be initialized as an empty string, and `toDoList` should be initialized as an empty array. Next, delete the comment in the `render()` method next to the `items` variable. In its place, map over the `toDoList` array stored in the component's internal state and dynamically render a `li` for each item. Try entering the string `eat, code, sleep, repeat` into the `textarea`, then click the button and see what happens.
|
||||
Dentro do `construtor`, crie um objeto `this.state` e defina dois estados: `userInput` deve ser inicializado como uma string vazia, e `toDoList` deve ser inicializado como um array vazio. Em seguida, exclua o comentário no método `render()` ao lado da variável `itens`. Em seu lugar, mapeie sobre o array `toDoList` armazenado no estado interno do componente e renderize dinamicamente um `li` para cada item. Tente inserir a string `eat, code, sleep, repeat` dentro do `textarea`, depois clique no botão e veja o que acontece.
|
||||
|
||||
**Note:** You may know that all sibling child elements created by a mapping operation like this do need to be supplied with a unique `key` attribute. Don't worry, this is the topic of the next challenge.
|
||||
**Nota:** Você pode saber que todos os elementos filhos do irmão criados por uma operação de mapeamento como esta precisam ser fornecidos com um atributo `key` exclusivo. Não se preocupe, este é o tema do próximo desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
The MyToDoList component should exist and render to the page.
|
||||
O componente MyToDoList deve existir e renderizar à página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The first child of `MyToDoList` should be a `textarea` element.
|
||||
O primeiro filho do `MyToDoList` deve ser um elemento `textarea`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second child of `MyToDoList` should be a `br` element.
|
||||
O segundo filho do `MyToDoList` deve ser um elemento `br`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third child of `MyToDoList` should be a `button` element.
|
||||
O terceiro filho do `MyToDoList` deve ser um elemento `button`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -74,7 +74,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyToDoList` should be initialized with `toDoList` as an empty array.
|
||||
O estado de `MyToDoList` deve ser inicializado com `toDoList` como um array vazio.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -89,7 +89,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyToDoList` should be initialized with `userInput` as an empty string.
|
||||
O estado de `MyToDoList` deve ser inicializado com `userInput` como uma string vazia.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -104,7 +104,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
When the `Create List` button is clicked, the `MyToDoList` component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the `textarea` element.
|
||||
Quando o botão `Create List` é clicado, o componente `MyToDoList` deve retornar, dinamicamente, uma lista não ordenada que contém um elemento de item de lista para cada item de uma lista separada por vírgulas inserida no elemento `textarea`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616b
|
||||
title: Use Default Props
|
||||
title: Usar Propriedades Padrão
|
||||
challengeType: 6
|
||||
forumTopicId: 301418
|
||||
dashedName: use-default-props
|
||||
@ -8,15 +8,15 @@ dashedName: use-default-props
|
||||
|
||||
# --description--
|
||||
|
||||
React also has an option to set default props. You can assign default props to a component as a property on the component itself and React assigns the default prop if necessary. This allows you to specify what a prop value should be if no value is explicitly provided. For example, if you declare `MyComponent.defaultProps = { location: 'San Francisco' }`, you have defined a location prop that's set to the string `San Francisco`, unless you specify otherwise. React assigns default props if props are undefined, but if you pass `null` as the value for a prop, it will remain `null`.
|
||||
React também tem uma opção para definir as propriedades padrão. Você pode atribuir propriedades padrão a um componente como uma propriedade no próprio componente e o React atribui a propriedade padrão se necessário. Isso permite que você especifique qual deve ser um valor da propriedade se nenhum valor for explicitamente fornecido. Por exemplo, se você declarar `MyComponent.defaultProps = { location: 'San Francisco' }`, você definiu uma propriedade de localização definida para a string `San Francisco`, a menos que você especifique de outra forma. React atribui propriedades padrão se "props" forem indefinidas, mas se você passar `null` como o valor para uma prop, continuará `null`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor shows a `ShoppingCart` component. Define default props on this component which specify a prop `items` with a value of `0`.
|
||||
O editor de código mostra um componente `ShoppingCart`. Defina as props padrão neste componente que especifica um objeto `items` com um valor de `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `ShoppingCart` component should render.
|
||||
O componente `ShoppingCart` deve renderizar.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `ShoppingCart` component should have a default prop of `{ items: 0 }`.
|
||||
O componente `ShoppingCart` deve ter uma propriedade padrão de `{ items: 0 }`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user