Translation of the "AJAX and APIs" page

content/docs/faq-ajax.md

@@ -1,79 +1,79 @@
 ---
 id: faq-ajax
-title: AJAX and APIs
+title: AJAX e APIs
 permalink: docs/faq-ajax.html
 layout: docs
 category: FAQ
 ---
 
-### How can I make an AJAX call? {#how-can-i-make-an-ajax-call}
+### Como fazer uma requisição AJAX? {#como-fazer-uma-requisicao-ajax}
 
-You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+Você pode usar qualquer biblioteca AJAX que desejar com React. Algumas populares são [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), e o nativo do navegador [window.fetch](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API).
 
-### Where in the component lifecycle should I make an AJAX call? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
+### Onde eu devo fazer uma chamada AJAX no ciclo de vida do componente? {#onde-eu-devo-fazer-uma-chamada-ajax-no-ciclo-de-vida-do-componente}
 
-You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved.
+Você deve preencher dados com chamadas AJAX no método [`componentDidMount`](/docs/react-component.html#mounting) do ciclo de vida. Isto é para que você consiga usar `setState` para atualizar seu componente quando os dados forem recebidos.
 
-### Example: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state}
+### Exemplo: Usando resultados AJAX para definir o estado local {#exemplo-usando-ajax-para-definir-o-estado-local}
 
-The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state. 
+O componente abaixo demonstra como deve fazer uma chamada AJAX no `componentDidMount` para preencher o estado local. 
 
-The example API returns a JSON object like this:
+A API de exemplo retorna um objeto JSON como este:
 
 ```
 {
-  "items": [
-    { "id": 1, "name": "Apples",  "price": "$2" },
-    { "id": 2, "name": "Peaches", "price": "$5" }
+  "itens": [
+    { "id": 1, "nome": "Maçãs",  "preço": "R$2" },
+    { "id": 2, "nome": "Pêssegos", "preço": "R$5" }
   ] 
 }
 ```
 
 ```jsx
-class MyComponent extends React.Component {
+class MeuComponente extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      error: null,
-      isLoaded: false,
-      items: []
+      erro: null,
+      foiCarregado: false,
+      itens: []
     };
   }
 
   componentDidMount() {
-    fetch("https://api.example.com/items")
+    fetch("https://api.exemplo.com/itens")
       .then(res => res.json())
       .then(
-        (result) => {
+        (resultado) => {
           this.setState({
-            isLoaded: true,
-            items: result.items
+            foiCarregado: true,
+            itens: resultado.itens
           });
         },
-        // Note: it's important to handle errors here
-        // instead of a catch() block so that we don't swallow
-        // exceptions from actual bugs in components.
-        (error) => {
+        // Nota: É importante lidar com os erros aqui
+        // em vez de um bloco catch() para não recebermos
+        // exceções de erros dos componentes.
+        (erro) => {
           this.setState({
-            isLoaded: true,
-            error
+            foiCarregado: true,
+            erro
           });
         }
       )
   }
 
   render() {
-    const { error, isLoaded, items } = this.state;
-    if (error) {
-      return <div>Error: {error.message}</div>;
-    } else if (!isLoaded) {
-      return <div>Loading...</div>;
+    const { erro, foiCarregado, itens } = this.state;
+    if (erro) {
+      return <div>Erro: {erro.mensagem}</div>;
+    } else if (!foiCarregado) {
+      return <div>Carregando...</div>;
     } else {
       return (
         <ul>
-          {items.map(item => (
-            <li key={item.name}>
-              {item.name} {item.price}
+          {itens.map(item => (
+            <li key={item.nome}>
+              {item.nome} {item.preço}
             </li>
           ))}
         </ul>