initial commit

5 files changed, 1128 insertions, 0 deletions

diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html
new file mode 100644
index 0000000000..5c1798518d
--- /dev/null
+++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/comecando_com_react/index.html
@@ -0,0 +1,461 @@
+---
+title: Começando com React
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Comecando_com_React
+translation_of: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">Neste artigo mostraremos como dizer Olá para o React. Descobriremos um pouco sobre e os casos de usos, configurar uma Reac toolchain no computador localmente, e criar e usar um app simples como partida, aprendendo um pouco sobre como o processo de React funciona.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>
+    <p>Familiaridade com <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e linguagem <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, conhecimento de <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/linha de comandos.</a></p>
+
+    <p>React usa a sintaxe HTML-in-JavaScript com o nome JSX (JavaScript e XML). Familiaridade em ambos HTML e JavaScript ajudará aprender JSX, e identificar melhor se os erros na sua aplicação estão relacionado ao JavaScript ou na parte especifíca do React.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Configurar um ambiente local de desenvolvimento React, criar o primeiro app e entender o básico de como as coisas funcionam.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Olá_React">Olá, React</h2>
+
+<p>Segundo seu slogan oficial, <a href="https://reactjs.org/">React</a> é uma biblioteca para construção de interfaces de usuário. React não é um framework – nem mesmo é exclusivo para web. É utilizado com outras bibliotecas para renderização em certos ambientes. Por exemplo, <a href="https://reactnative.dev/">React Native</a> pode ser usado para construção de aplicativos móveis; <a href="https://facebook.github.io/react-360/">React 360</a> pode ser usado para construir aplicações de realidade virtual; e muitas outras possibilidades.</p>
+
+<p>Para construir para web, desenvolvedores usam React em conjunto com <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a>. React e ReactDOM são frequentemente discutidos nos mesmos espaços e utlizados para resolver os mesmos problemas como outros arcabouços(frameworks). Quando referimos React como "arcabouço"(framework) estamos trabalhando com o termo/entendimento coloquial.</p>
+
+<p>A meta primária do React é minimizar os erros que ocorrem quando os desenvolvedores estão construindo UIs(User Interface). Isto é devido ao uso de componentes - autocontidos, partes lógicas de códigos que descrevem uma parte da interface do usuário. Estes componentes são adicionados para criar uma UI completa e o React concentra muito do trabalho de renderizar, proporcionando que se concentre no projeto de UI.</p>
+
+<h2 id="Casos_de_uso">Casos de uso</h2>
+
+<p>Diferente de outros frameworks comentados neste módulo, React não implementa regras restritas no código como convenções ou organizações de arquivos. Isto permite que times criem convenções próprias que melhor se adequem e para adotar o React do jeito que desejar. React pode manusear um botão único, poucas partes da interface ou a interface inteira de um app.</p>
+
+<p>Enquanto React pode ser utilizado por <a href="https://reactjs.org/docs/add-react-to-a-website.html">pequenos pedaços de interface</a> e não "cai" em uma aplicação com uma biblioteca como jQuery ou até mesmo como um framework como Vue - é mais acessível quando você constrói todo o app com React.</p>
+
+<p>Além disso, muitos dos beneficios da experiencias de desenvolvimento de uma aplicação React, tais como escrever interfaces com JSX, requerem um processo de compilação. Adicionar um compilador como o Babel em um website faz o código funcionar lentamente, então os desenvolvedores geralmente configuram algumas ferramentas para fazer compilações em etapas. React, sem duvídas, tem um grande ecossistema de ferramentas, mas isso pode ser aprendido.</p>
+
+<p>Este artigo será focado no caso de uso do React para renderizar toda a interface do usuario de um aplicativo, usando ferramentas fornecidas pelo prórpio <a href="https://create-react-app.dev/">create-react-app</a> do Facebook.</p>
+
+<h2 id="Como_React_usa_Javascript">Como React usa Javascript?</h2>
+
+<p>React utiliza características de Javascript moderno para muitos de seus padrões. O maior desvio do React para o JavaScript dá-se pela utilização sintaxe<a href="https://reactjs.org/docs/introducing-jsx.html"> JSX</a>. O JSX estende a sintaxe padrão do Javascript hablitando-o a utilizar código similar a HTML que pode viver lado a lado ao JSX. Por exemplo:</p>
+
+<pre class="brush: js notranslate">const heading = &lt;h1&gt; Mozilla Developer Network&lt;/h1&gt;;</pre>
+
+<p>A constante <em>heading </em>acima é conhecida como uma <strong>expressão JSX. </strong>React pode utilizá-la para renderizar a <em>tag </em><code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt; </a></code>em nosso aplicativo.</p>
+
+<p>Suponha que quiséssemos conter nosso cabeçalho em uma tag <code><a href="/en-US/docs/Web/HTML/Element/header">&lt;header&gt;</a></code>, por razões semânticas? A aproximação em JSX permite-nos aninhar nossos elementos dentro uns dos outros, do mesmo jeito que fazemos com o HTML:</p>
+
+<pre class="brush: js notranslate">const header = (
+  &lt;header&gt;
+    &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;
+  &lt;/header&gt;
+);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Os parenteses no recorte de código anterior não são exclusivos ao JSX e não têm nenhum efeito na sua aplicação. Eles estão lá para sinalizar para você (e seu computador) que as múltiplas linhas de código dentro do mesmo são parte da mesma expressão. Você poderia muito bem escrever a expressão do cabeçalho do seguinte jeito:</p>
+
+<pre class="brush: js notranslate">const header = &lt;header&gt;
+    &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;
+&lt;/header&gt;</pre>
+
+<p>Entretanto, isso é meio estranho, porquê a tag <code><a href="/en-US/docs/Web/HTML/Element/header">&lt;header&gt;</a></code>  que inicia a expressão não está alinhada na mesma posição que sua tag de fechamento correspondente.</p>
+</div>
+
+<p>Claro, seu navegador não é capaz de ler o JSX sem alguma ajuda. Quando compilado (utilizando uma ferramenta como <a href="https://babeljs.io/">Babel</a> ou <a href="https://parceljs.org/">Parcel </a>), nossa expressão de cabeçalho ficaria assim:</p>
+
+<pre class="brush: js notranslate">const header = React.createElement("header", null,
+  React.createElement("h1", null, "Mozilla Developer Network")
+);</pre>
+
+<p>É <em>possível </em>pular o processo de compilação e utilizar <code><a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement() </a></code>para escrever sua UI você mesmo. Ao fazer isso, entretanto, você perde o benefício declarativo do JSX, e seu código torna-se mais difícil de ler. Compilação é um passo adicional no processo de desenvolvimento, porém muitos desenvolvedores na comunidade do React acham que a legibilidade do JSX vale a pena. Ainda mais, ferramentas populares fazem a parte de compilar JSX-para-Javascript parte do próprio processo de configuração. Você não vai ter que configurar a compilação você mesmo, a não ser que você queira.</p>
+
+<p>Por conta do JSX ser uma mistura de HTML e Javascript, muitos desenvolvedores acham o JSX intuitivo. Outros dizem que a natureza mista torna o mesmo mais confuso. Entretanto, assim que você estiver confortável com o JSX, este irá permitir que você construa interfaces de usuários mais rapidamente e intuitivamente, e permitirá que outros melhor entendam seu código com apenas algumas olhadas.</p>
+
+<p>Para ler mais sobre o JSX, confira este artigo do time do React, <a href="https://reactjs.org/docs/jsx-in-depth.html">JSX In Depth</a>.</p>
+
+<h2 id="Configurando_seu_primeiro_app_React">Configurando seu primeiro app React</h2>
+
+<p>Existem muitos jeitos de utilizar o React, mas nós iremos utilizar a ferramenta de interface da linha de comando (ILC), <em>create-react-app</em>, como mencionado anteriormente, que acelera o processo de desenvolvimento da aplicação em React instalando alguns pacotes e criando alguns arquivos para você, lidando com os processos de automação mencionados acima.</p>
+
+<p>É possível <a href="https://reactjs.org/docs/add-react-to-a-website.html">adicionar React á um website sem create-react-app</a> copiando alguns elementos <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt; </a></code>em um arquivo HTML, mas o a interface de linha de comando <em>create-react-app </em>é um ponto de partida comum para aplicações em React. Utilizar-lo vai permitir que você passe mais tempo construindo seu aplicativo e menos tempo incomodando-se com configurações.</p>
+
+<h3 id="Requisitos">Requisitos</h3>
+
+<p>Para começar a utilizar o <em>create-react-app, </em>você precisa ter o <a href="https://nodejs.org/en/">Node.js </a>instalado. É recomendado que você utilize a versão com suporte de longa data (SLT). <em>Node </em>inclui o <em>npm </em>(o gerenciador de pacotes node), e o <em>npx </em>(o executador de pacotes do node).</p>
+
+<p>Você também pode utilizar o gerenciador de pacotes <em>Yarn </em>como uma alternativa, mas nós iremos assumir que você está utilizando o <em>npm </em>para esta série de tutoriais. Veja <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management"> Gerenciador de pacotes - básico </a>para mais informações sobre o <em>npm </em>ou o <em>Yarn</em>.</p>
+
+<p>Se você está utilizando o Windows, você vai precisar instalar alguns softwares adicionais para que você tenha as mesmas capacidades de um terminal Unix/macOS e utilizar os comandos de terminal que serão mencionados neste tutorial. <strong>Gitbash </strong>(que vem junto como parte do pacote de ferramentas <a href="https://gitforwindows.org/"> Git para o Windows </a>) ou o <a href="https://docs.microsoft.com/en-us/windows/wsl/about"> subsistema Windows para Linux </a>(<strong>WSL</strong>) ambos são adequados. Veja o <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Curso intensivo - Linha de comando </a>para mais informações sobre estes e sobre comandos de terminal no geral.<br>
+  </p>
+
+<p>Mantenha em mente também que React e ReactDOM produzem aplicativos que funcionam apenas em navegadores consideravelmente modernos, IE9+ (Internet Explorer 9) com o auxílio de alguns <em><a href="https://en.wikipedia.org/wiki/Polyfill_(programming)">polyfills</a>. </em>É recomendado que você utilize um navegador moderno com o Firefox, Safari ou Chrome enquanto estiver trabalhando nestes tutoriais.</p>
+
+<p>Veja também os seguintes artigos para mais informações:</p>
+
+<ul>
+ <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"O que é NPM" no NodeJS.org</a></li>
+ <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introdução ao NPX" no blog npm</a></li>
+ <li><a href="https://create-react-app.dev/">Documentação do create-react-app</a></li>
+</ul>
+
+<h3 id="Inicializando_seu_app">Inicializando seu app</h3>
+
+<p>O <em>create-react-app </em>leva apenas um argumento: o nome que você quer dar ao seu aplicativo. <em>create-react-app </em>utiliza este nome para criar uma nova pasta, e então cria os arquivos necessários para o funcionamento do seu aplicativo dentro desta pasta. Certifique-se de utilizar o comando <code>cd</code> até o local em seu computador que você deseja que seu aplicativo viva dentro de seu disco rígido, feito isso, utilize o seguinte comando em seu terminal:</p>
+
+<pre class="brush: bash notranslate">npx create-react-app moz-todo-react</pre>
+
+<p>Isto criará a pasta <code>moz-todo-react</code>, e também faz mais algumas coisas dentro desta:</p>
+
+<ul>
+ <li>Instala alguns pacotes <em>npm </em>essenciais para a funcionalidade do app.</li>
+ <li>Escreve scripts para iniciar e servir a aplicação.</li>
+ <li>Cria a estrutura de arquivos e pastas que define a arquitetura básica do aplicativo.</li>
+ <li>Inicializa o diretório como um <em>repositório git</em>, se você tem o <em>git </em>instalado em seu computador.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Se você tem o gerenciador de pacotes <em>Yarn</em> instalado, <em>create-react-app </em>vai utilizá-lo por padrão em vez de utilizar o<em> npm</em>. Se você tem ambos gerenciadores de pacotes instalados e explicitamente quer utilizar o NPM, você pode adicionar a opção <code>--use-npm</code> quando você executar o <em>create-react-app</em>:</p>
+
+<pre class="brush: bash notranslate">npx create-react-app moz-todo-react --use-npm</pre>
+</div>
+
+<p><em>create-react-app </em>vai mostrar várias mensagens em seu terminal enquanto ele trabalha; isto é normal! Isso pode levar alguns minutos, agora pode ser uma boa hora para ir preparar uma xícara de chá.</p>
+
+<p>Quando o processo finalizar, dê um <code>cd</code> para dentro da pasta <code>moz-todo-react </code>e execute o comando <code>npm start</code>. Os scripts instalados pelo <em>create-react-app </em>vão começar a serem servidos em um servidor local, no endereço <em>localhost:3000, </em>e abrirão o aplicativo em uma nova aba em seu navegador. Seu navegador vai mostrar algo como isto:</p>
+
+<p><img alt="Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application" src="https://mdn.mozillademos.org/files/17203/default-create-react-app.png" style="border-style: solid; border-width: 1px; height: 980px; width: 1600px;"></p>
+
+<h3 id="Estrutura_da_aplicação">Estrutura da aplicação</h3>
+
+<p><em>create-react-app </em>dá para você tudo que você precisa para desenvolver uma aplicação React. A estrutura inicial do arquivo vai ficar assim:</p>
+
+<pre class="notranslate">moz-todo-react
+├── README.md
+├── node_modules
+├── package.json
+├── package-lock.json
+├── .gitignore
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+└── src
+    ├── App.css
+    ├── App.js
+    ├── App.test.js
+    ├── index.css
+    ├── index.js
+    ├── logo.svg
+    └── serviceWorker.js</pre>
+
+<p>A pasta <code>src </code>é onde nós iremos ficar a maior parte do nosso tempo, é onde o código fonte da nossa aplicação vive.</p>
+
+<p>A pasta <code>public </code>contém arquivos que serão lidos pelo navegador enquanto você desenvolve o aplicativo; o mais importante de todos estes arquivos é o <code>index.html</code>. O React irá injetar seu código neste arquivo para que seu navegador possa executá-lo. Existem outras marcações que ajudam o <em>create-react-app </em>a funcionar, então cuidado para não editar estas, a não ser que você saiba o que você está fazendo. Você é encorajado a mudar o texto dentro do elemento <code><a href="/en-US/docs/Web/HTML/Element/title">&lt;title&gt; </a></code>neste arquivo, esta mudança irá refletir no título de sua aplicação. Títulos de páginas precisos são importante para acessibilidade!</p>
+
+<p>A pasta <code>public </code>também será publicada quando você construir e lançar uma versão de produção de seu aplicativo. Nós não cobriremos <em>lançamento </em>(deploy) de aplicações neste tutorial, entretanto você provavelmente conseguirá implementar uma solução similar para isso descrito em nosso tutorial <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Lançando nosso app</a>.</p>
+
+<p>O arquivo <code>package.json </code>contém informação sobre nosso projeto que o Node.js/npm use para manté-lo organizado. Esse arquivo não é exclusivo para aplicações em React; o <em>create-react-app </em>simplesmente encarregasse de popular este. Você não precisa entender este arquivo para completar este tutorial, entretanto, se você estiver interessado em aprender mais sobre este, você pode ler <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">O que é o arquivo 'package.json'? no NodeJS.org</a>; nós também falamos sobre ele no nosso tutorial <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Básico sobre gerenciamento de pacotes.</a></p>
+
+<h2 id="Explorando_seu_primeiro_componente_React_—_&lt;App>">Explorando seu primeiro componente React — <code>&lt;App/&gt;</code></h2>
+
+<p>No React, um <strong>componente </strong>é um módulo reutilizável que renderiza parte de nosso aplicativo. Estas partes podem ser grandes ou pequenas, mas elas geralmente são claramente definidas: elas servem um único propósito, um propósito óbvio.</p>
+
+<p>Vamos o arquivo <code>src/App.js</code> dado que nosso navegador está nos instigando a editá-lo. Esse arquivo contém nosso primeiro componente, <code>App</code>, e algumas outras linhas de código.</p>
+
+<pre class="brush: js notranslate">import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
+        &lt;/p&gt;
+        &lt;a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        &gt;
+          Learn React
+        &lt;/a&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}
+export default App;</pre>
+
+<p>O arquivo <code>App.js</code> consiste de três partes principais: algumas declarações de <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import </a></code>no topo, o componente <code>App </code>no meio, e uma declaração de <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export </a></code>na parte de baixo. A maioria dos componentes React segue este padrão.</p>
+
+<h3 id="Declarações_de_import">Declarações de <em>import</em></h3>
+
+<p>As declaração de <code>import </code>no topo de nosso arquivo <code>App.js</code> nos permitem utilizar código que foi definido em outro lugar fora de nosso arquivo. Vamos dar uma olhada nestas declarações mais de perto.</p>
+
+<pre class="brush: js notranslate">import React from 'react';
+import logo from './logo.svg';
+import './App.css';</pre>
+
+<p>A primeira declaração importa a própria biblioteca React mesmo. Por conta do React transformar o JSX que nós escrevemos em declarações de <code>React.createElement()</code>, todos componentes React devem importar o módulo <code>React</code>. Se você pular este passo, sua aplicação irá resultar em um erro.</p>
+
+<p>A segunda declaração importa um logo de <code>.'/logo.svg</code>. Note que o <code>./</code> no começo do caminho e a extensão <code>.svg</code> no final — estes nos falam que o arquivo é local e que não é um arquivo de Javascript. De fato, o arquivo <code>logo.svg</code> vive em nossa pasta base.</p>
+
+<p>Nós não escrevemos um caminho ou extensão quando importando o módulo <code>React </code>— este não é um arquivo local; em vez disso, este é listado como uma dependência em nosso arquivo <code>package.json</code>. Tome cuidado com esta distinção enquanto você trabalha nesta lição!</p>
+
+<p>A terceira declaração importa o CSS relacionado ao nosso componente App. Note que não existe um nome de variável e também não há a diretriz <code>from</code>. Essa declaração de <em>import </em>em particular não é nativa à sintaxe de módulos do Javascript — esta vem do <em>Webpack</em>, a ferramenta que o aplicativo <em>create-react-app </em>utiliza para agrupar todos nosso arquivos de Javascript e servi-los ao navegador.</p>
+
+<h3 id="O_componente_App">O componente <code>App</code></h3>
+
+<p>Depois dos <em>imports, </em>nós temos uma função chamada <code>App</code>. Enquanto a maior parte da nossa comunidade Javascript prefere nomes utilizando o padrão <em>camel-case </em>como <code>helloWorld</code>, os componentes React utilizam o padrão de formatação para variáveis em <em>pascal-case, </em>como <code>HelloWorld</code>, para ficar claro que um dado elemento JSX é um componente React e não apenas uma <em>tag </em>de HTML comum. Se você mudasse o nome da função <code>App </code>para <code>app </code>o seu navegador iria mostrar um erro.</p>
+
+<p>Vamos dar uma olhada em App mais de perto.</p>
+
+<pre class="brush: js notranslate">function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
+        &lt;/p&gt;
+        &lt;a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        &gt;
+          Learn React
+        &lt;/a&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>A função <code>App</code> retrona uma expressão JSX. Essa expressão define o que, no fim, o seu navegador irá renderizar para o DOM.</p>
+
+<p>Alguns elementos na expressão têm atributos, que são escritos assim como no HTML, seguindo o seguinte padrão de <code>atributo="valor"</code>. Na linha 3, a tag <code><a href="/en-US/docs/Web/HTML/Element/div">&lt;div&gt; </a></code>de abertaura tem o atributo <em><code>className</code></em>. Isso é o mesmo que o atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a> </code>no HTML, porém por conta do JSX ser Javascript, nós não podemos utilizar a palavra <code>class</code> - esta é reservada, isso quer dizer que o Javascript já utiliza-a para um propósito específico e causaria problemas no nosso código inseri-lá aqui. Alguns outros atributos de HTML são escritos diferentes em JSX em comparação com o HTML, pela mesma razão. Nós falaremos sobre estes quando encontrarmos os mesmos.</p>
+
+<p>Tome um momento para mudar a <em>tag </em><code><a href="/en-US/docs/Web/HTML/Element/p">&lt;p&gt;</a> </code>na linha 6 para que esta diga "Hello, world!", e então salve o arquivo. Você irá notar que esta mudança é imediatamente refletida e renderiza no servidor de desenvolvimento executando em <code>http://localhost:3000</code> em seu navegador. Agora delete a <em>tag </em><code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> e salve; o link <em>"Learn React" </em>vai desaparecer.</p>
+
+<p>Seu componente <code>App </code>deve estar assim agora:</p>
+
+<pre class="brush: js notranslate">function App() {
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Hello, World!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<h3 id="Declarações_export">Declarações <em>export</em></h3>
+
+<p>Bem no final do seu arquivo <code>App.js</code>, a declaração <code>export default App</code> faz com que seu componente <code>App</code> esteja disponível para outros módulos.</p>
+
+<h2 id="Interrogando_o_index">Interrogando o <em>index</em></h2>
+
+<p>Vamos abrir <code>src/index.js</code>, porque é onde nosso componente <code>App </code>está sendo utilizado. Esse arquivo é o ponto de entrada para nosso aplicativo, e inicialmente parece-se assim:</p>
+
+<pre class="brush: js notranslate">import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();</pre>
+
+<p>Assim como em <code>App.js</code>, o arquivo começa importando todos os módulos de JS (Javascript) e outros recursos que precisa executar. <code>src/index.css </code>contém estilos globais (CSS) que são aplicados em todo nosso aplicativo. Nós podemos também ver nosso componente <code>App </code>importado aqui; este é disponibilizado para ser importado graças à declaração de <code>export</code> no final do nosso arquivo <code>App.js</code>.</p>
+
+<p>A linha 7 invoca a função <code>ReactDOM.render()</code> com dois argumentos:</p>
+
+<ul>
+ <li>O componente que queremos renderizar, <code>&lt;App /&gt; </code>neste caso.</li>
+ <li>O elemento do DOM que queremos que nosso componente seja renderizado dentro, neste caso é o elemento com o ID de <code>root</code>. Se você olhar dentro de <code>public/index.html</code>, você verá que existe um elemento <code>&lt;div&gt;</code> logo ali dentro do elemento <code>&lt;body&gt;</code>.</li>
+</ul>
+
+<p>Tudo isso diz para o React que nós queremos renderizar nossa aplicação React como o componente <code>App</code> como a raíz do app, ou o primeiro componente.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: No JSX, componentes React e elementos HTML precisam ser barras de fechamento. Escrever apenas <code>&lt;App&gt;</code> ou apenas <code>&lt;img&gt;</code> irá causar um erro.</p>
+</div>
+
+<p><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> são pedaços interessantes de código que ajudam a perfomance da aplicação e permitem a utilização de algumas características de sua aplicação de web a funcionarem <em>offline</em>, porém estes não estão no escopo deste artigo. Você pode deletar a linha 5, como também as linhas 9 até a 12.</p>
+
+<p>Seu arquivo <code>index.js</code> final deve estar assim:</p>
+
+<pre class="brush: js notranslate">import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));</pre>
+
+<h2 id="Variáveis_e_props">Variáveis e props</h2>
+
+<p>A seguir, nós usaremos algumas de nossas habilidades de JavaScript para ficarmos mais confortáveis editando componentes e trabalhando com dados no React. Nós falaremos sobre como variáveis são utilizadas dentro do JSX, introduziremos <em>props</em>, que são por si uma forma de passar dados para um componente (que então podem ser acessadas utilizando-se de variáveis).</p>
+
+<h3 id="Variáveis_no_JSX">Variáveis no JSX</h3>
+
+<p>De volta ao <code>App.js</code> vamos focar na linha 9:</p>
+
+<pre class="brush: js notranslate">&lt;img src={logo} className="App-logo" alt="logo" /&gt;</pre>
+
+<p>Aqui, na <em>tag </em><code>&lt;img /&gt; </code>o atributo <code>src</code> está entre chaves ( { } ). É assim que o JSX reconhece variáveis. React irá ver <code>{logo}</code>, saberá que você está referindo-se ao <em>import </em>do logo na linha 2 do nosso aplicativo, e então buscar o arquivo logo e renderizá-lo.</p>
+
+<p>Vamos tentar fazer uma variável própria. Antes da declaração de <em>return </em>de <code>App</code> adicione <code>const subject = 'React';</code>. Seu componente <code>App</code> deve estar assim agora:</p>
+
+<pre class="brush: js notranslate">function App() {
+  const subject = "React";
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Hello, World!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>Muda a linha 8 para usar a nossa variável <code>subject</code> em vez da palavra "world", desta forma:</p>
+
+<pre class="brush: js notranslate">function App() {
+  const subject = "React";
+  return (
+    &lt;div className="App"&gt;
+      &lt;header className="App-header"&gt;
+        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
+        &lt;p&gt;
+          Hello, {subject}!
+        &lt;/p&gt;
+      &lt;/header&gt;
+    &lt;/div&gt;
+  );
+}</pre>
+
+<p>Quando você salvar, seu navegador deverá mostrar "Hello, React!", em vez de mostrar "Hello, world!"</p>
+
+<p>Variáveis são conveniente, mas esta que nós definimos não faz jus aos ótimos recursos do React. É aí que entram as <em>props</em>.</p>
+
+<h3 id="props_de_Componentes"><em>props </em>de Componentes</h3>
+
+<p>Uma <strong>prop</strong> é qualquer dado passado para um componente React. <em>Props</em> são escritos dentro de invocações de componentes e utilizam a mesma sintaxe que atributos de HTML - <code>prop="valor"</code>. Vamos abrir o <code>index.js</code> e dar à nossa invocação do <code>&lt;App/&gt;</code> nossa primeira <em>prop</em>.</p>
+
+<p>Adicione a <em>prop</em> <code>subject</code> para a invocação do componente <code>&lt;App/&gt;</code>, com o valor de <code>Clarice</code>. Quando você terminar, seu código deve estar assim:</p>
+
+<pre class="brush: js notranslate">ReactDOM.render(&lt;App subject="Clarice" /&gt;, document.getElementById('root'));</pre>
+
+<p>De volta ao <code>App.js</code>, vamos revisitar a própria função App, que é lida da seuginte forma ( com a declaração de <code>return </code>encurtada, a fim de ser breve.)</p>
+
+<pre class="brush: js notranslate">function App() {
+  const subject = "React";
+  return (
+    // return statement
+  );
+}</pre>
+
+<p>Mude a definação da nossa função <code>App</code> para que aceite <code>props</code> como um parâmetro. Assim como qualquer outro parâmetro, você pode colocar <code>props</code> em um <code>console.log()</code> para ler o que este contém no console de seu navegador. Vá em frente e faça justamente isto depois da sua constante <code>subject</code> porém antes da sua declaração de <code>return</code>, da seguinte forma:</p>
+
+<pre class="brush: js notranslate">function App(props) {
+  const subject = "React";
+  console.log(props);
+  return (
+    // return statement
+  );
+}</pre>
+
+<p>Salve seu arquivo e dê uma olhada no console do navegador. Você deve ver algo assim nos <em>logs</em>:</p>
+
+<pre class="brush: js notranslate">Object { subject: "Clarice" }</pre>
+
+<p>A propriedade <code>subjet</code> deste objeto corresponde à <em>prop </em><code>subject</code> que nós adicionamos à nossa chamada do componente <code>&lt;App /&gt; </code>, e a <em>string</em> <code>Clarice</code> corresponde ao seu valor. <em>props </em>de coponentes no React são sempre coletadas em objetos neste mesmo estilo.</p>
+
+<p>Agora que <code>subjet</code> é uma de nossas <em>props</em>, vamos utilizá-la em <code>App.js</code>. Mude a constante <code>subject</code> para que, em vez de ler a string que diz <code>React</code>, você está lendo o valor de <code>props.subject</code>. Você também pode deletar o <code>console.log()</code>, se você quiser.</p>
+
+<pre class="brush: js notranslate">function App(props) {
+  const subject = props.subject;
+  return (
+    // return statement
+  );
+}</pre>
+
+<p>Quando você salvar o arquivo, o aplicativo agora deve dizer "Hello, Clarice!". Se você retornar ao <code>index.js</code>, editar o valor de <code>subject</code> e salvar, seu texto irá mudar.</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Isto nos traz ao fim da nossa primeira olhada no React, incluindo como instalá-lo localmente, criando um aplicativo inicial e como os básicos funcionam. No próximo artigo nós começaremos construindo nossa primeira aplicação de verdade — uma lista de afazeres. Antes de fazermos isso, entretanto, vamos relembrar algumas coisas que aprendemos.</p>
+
+<p>No React</p>
+
+<ul>
+ <li>Componentes podem importar módulos que eles precisam e devem exportar a si mesmo no final de seus respectivos arquivos.</li>
+ <li>Componentes em forma de função são nomeados com <code>PascalCase</code>.</li>
+ <li>Você pode ler variáveis de JSX ao colocá-las entre chaves, da seguinte forma <code>{assim}</code>.</li>
+ <li>Alguns atributos de JSX são diferente dos atributos de HTML, isto é feito para que eles não entrem em conflito com palavras reservadas do JavaScript. Por exemplo. <code>class</code> no HTML transforma-se em <code>className</code> no JSX. Note que atributos com múltiplas palavras são escritos no padrão de formatação <em>camel-case</em>.</li>
+ <li><em>Props</em> são escritas bem como atributos dentro das invocações de componentes e são passadas para dentro de componentes.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introdução a frameworks <em>client-side</em></a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Principais características de frameworks</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Começando com o React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Começando nossa app de lista de afazares</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizando nosso aplicativo React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">Interatividade no React: <em>events </em>e <em>state</em></a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">Interatividade no React: Editando, filtrando e renderização condicional</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibilidade no React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">Recursos sobre React</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Começando com o Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember: estrutura de apps e componetização</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Interatividade no Ember: Events, classes e state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Interatividade no Ember: Funcionalidade do rodapé e renderização condicional</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Roteamento no Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Recursos sobre o Ember e problemas comuns</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Começando com o Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Criando nosso primeiro componente com o Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Renderizando uma lista de componentes Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adicionando um novo formulário de afazeres: Events do Vue, métodos e models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Estilizando componentes Vue com CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Utilizando propriedades computadas do Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Renderização condicional no Vue: Editando afazeres existentes</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Gerenciamento de foco com Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Recursos sobre Vue</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html
new file mode 100644
index 0000000000..ba7a1cba3e
--- /dev/null
+++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -0,0 +1,136 @@
+---
+title: Understanding client-side JavaScript frameworks
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+tags:
+  - Beginner
+  - Frameworks
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - client-side
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">As estruturas JavaScript são uma parte essencial do desenvolvimento front-end da Web moderna, que fornecem aos desenvolvedores ferramentas utilizadas e testadas para a criação de aplicativos Web interativos e escalonáveis. Muitas empresas modernas usam estruturas como parte padrão de suas ferramentas, portanto, muitos trabalhos de desenvolvimento front-end agora exigem experiência em estruturas.</p>
+
+<p class="summary"><span class="tlid-translation translation" lang="pt"><span class="alt-edited">Como um desenvolvedor front-end iniciante, pode ser difícil descobrir por onde começar ao aprender frameworks - com tantos frameworks diferentes para escolher, novos aparecem o tempo todo, geralmente funcionam de maneira semelhante, mas fazem algumas coisas de forma diferente, e há alguns cuidados específicos a serem seguidos ao se usar frameworks.</span></span></p>
+
+<p class="summary">Neste conjunto de artigos, nosso objetivo é fornecer um ponto de partida confortável para ajudá-lo a começar a aprender frameworks. Não pretendemos ensinar exaustivamente tudo o que você precisa saber sobre o React / ReactDOM, ou Vue, ou algum outro framework específico; os próprios documentos das equipes do framework já fazem esse trabalho. Em vez disso, queremos fazer backup e responder primeiro a perguntas mais fundamentais, como:</p>
+
+<ul>
+ <li class="summary">Por que devo usar um framework? Que problemas eles resolvem para mim?</li>
+ <li class="summary">Que perguntas devo fazer ao tentar escolher um framwork? Eu preciso mesmo usar um framework?</li>
+ <li class="summary">Quais recursos os frameworks têm? Como funcionam em geral e como as implementações dos frameworks desses recursos diferem?</li>
+ <li class="summary">Como se relacionam com JavaScript ou HTML "vanilla"?</li>
+</ul>
+
+<p class="summary">Depois disso, forneceremos alguns tutoriais que abordam os fundamentos de alguns dos principais frameworks, que fornecem contexto e familiaridade suficientes para começar a se aprofundar mais. Queremos que avance e aprenda sobre estruturas de uma maneira pragmática que não se esqueça das melhores práticas fundamentais da plataforma da web, como acessibilidade.</p>
+
+<p class="summary"><strong><a href="https://wiki.developer.mozilla.org/pr-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Comece agora, com "Introdução às estruturas do lado do cliente"</a></strong></p>
+
+<h2 id="Pré_-_requisitos">Pré - requisitos</h2>
+
+<p>Você deve aprender o básico das principais linguagens para web(<strong>HTML</strong>, <strong>CSS </strong> e principalmente <strong>Javascript</strong>) antes de estudar os frameworks voltados para client-side.Dessa forma, o seu código será mais rico e profissional, preparando você para lidar com problemas com mais confiança, resultado do bom entendimento sobre os recursos fundamentais dos frameworks que constroem as plataformas.</p>
+
+<h2 id="Guias_de_introdução">Guias de introdução</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1.trodução a frameworks para client-side</a></dt>
+ <dd>( begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2.Principais recursos para frameworks</a></dt>
+ <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd>
+</dl>
+
+<h2 id="React_tutorials">React tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="c">1. </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Começando com o React</a></dt>
+ <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Começando com a nossa lista "to do" do React</a></dt>
+ <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componetizando o nosso app React</a></dt>
+ <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4.</a> <a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">Interatividade React : Eventos e estado</a></dt>
+ <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">Interatividade com o React : Editando, filltrando e renderizando</a></dt>
+ <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Acessibilidade com o React</a></dt>
+ <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">Recursos do React</a></dt>
+ <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd>
+</dl>
+
+<h2 id="Ember_tutorials">Ember tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt>
+ <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt>
+ <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt>
+ <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt>
+ <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt>
+ <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt>
+ <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd>
+</dl>
+
+<h2 id="Vue_tutorials">Vue tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p>
+
+<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt>
+ <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt>
+ <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt>
+ <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt>
+ <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code>&lt;input&gt;</code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt>
+ <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt>
+ <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt>
+ <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt>
+ <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt>
+ <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd>
+</dl>
+
+<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2>
+
+<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p>
+
+<ul>
+ <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li>
+ <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li>
+ <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li>
+ <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li>
+</ul>
+
+<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p>
+
+<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p>
diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html
new file mode 100644
index 0000000000..607b876a2e
--- /dev/null
+++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_iniciando/index.html
@@ -0,0 +1,281 @@
+---
+title: Iniciando com Vue
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_iniciando
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">Agora vamos apresentar o Vue, o nosso terceiro frameworks. Neste artigo, examinaremos um pouco do histórico do Vue, aprenderemos como instalá-lo e criar um novo projeto, estudaremos a estrutura de alto nível de todo o projeto e um componente individual, veremos como executar o projeto localmente e o deixaremos preparado para começar a construir o nosso exemplo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>
+    <p>Conhecimento com as liguagens <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, conhecimento do <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p>
+
+    <p>Os componentes do Vue são escritos como uma combinação de objetos JavaScript que gerenciam os dados do aplicativo e uma sintaxe de modelo baseada em HTML que é mapeada para a estrutura DOM subjacente. Para a instalação e para usar alguns dos recursos mais avançados do Vue (como simples Componentes de arquivo ou funções de renderização), você precisará de um terminal com node + npm instalados.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para configurar um ambiente de desenvolvimento local do Vue, crie um aplicativo inicial e entenda o básico de como ele funciona.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Um_Vue_mais_claro"><span class="tlid-translation translation" lang="pt"><span title="">Um Vue mais claro</span></span></h2>
+
+<p>O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/jQuery">JQuery</a>.</p>
+
+<p>Dito isto, você também pode usar o Vue para escrever aplicativos de página única (Single Page Applications - SPAs) inteiros. Isso permite criar marcações gerenciadas inteiramente pelo Vue, o que pode melhorar a experiência e o desempenho do desenvolvedor ao lidar com aplicativos complexos. Também permite tirar proveito das bibliotecas para roteamento do lado do cliente (client-side) e gerenciamento de estado quando necessário. Além disso, o Vue adota uma abordagem "intermediária" das ferramentas, como roteamento do lado do cliente e gerenciamento de estado. Embora a equipe mantenedora do Vue sugira bibliotecas para essas funções, elas não são agrupadas diretamente no Vue. Isso permite que você selecione bibliotecas de gerenciamento de estado/roteamento diferentes, se elas se ajustarem melhor ao seu aplicativo.</p>
+
+<p>Além de permitir a integração progressiva do Vue em seus aplicativos, o Vue também fornece uma abordagem progressiva para escrever marcações. Como a maioria dos frameworks, o Vue permite criar blocos reutilizáveis de marcação por meio de componentes. Na maioria das vezes, os componentes do Vue são gravados usando uma sintaxe de modelo HTML especial. Quando você precisar de mais controle do que a sintaxe HTML permite, poderá escrever funções JSX ou JavaScript simples para definir seus componentes.</p>
+
+<p>À medida que você trabalha neste tutorial, convém manter o <a href="https://vuejs.org/v2/guide/">guia do Vue</a> e a <a href="https://vuejs.org/v2/api/">documentação da API</a> abertos em outras guias, para poder consultar um item se quiser obter mais informações sobre qualquer subtópico.<br>
+ Para uma boa comparação (mas potencialmente tendenciosa) entre o Vue e muitos outros frameworks, consulte <a href="https://vuejs.org/v2/guide/comparison.html">Vue Docs: Comparação com outros frameworks</a>.</p>
+
+<h2 id="Installation">Installation</h2>
+
+<p>To use Vue in an existing site, you can drop one of the following <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p>
+
+<ul>
+ <li>
+  <p>Development Script (Unoptimized, but includes console warnings. Great for development</p>
+
+  <pre class="brush: html">&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>
+  <p>Production Script (Optimized version, minimal console warnings. It is recommended that you specify a version number when including Vue on your site so that any framework updates do not break your live site without you knowing.)</p>
+
+  <pre class="brush: html">&lt;script src="https://cdn.jsdelivr.net/npm/vue@2"&gt;&lt;/script&gt;</pre>
+ </li>
+</ul>
+
+<p>However, this approach has some limitations. To build more complex apps, you’ll want to use the <a href="https://www.npmjs.com/package/vue">Vue NPM package</a>. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package &amp; the CLI you will need:</p>
+
+<ol>
+ <li>Node.js 8.11+ installed.</li>
+ <li>npm or yarn.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p>
+</div>
+
+<p>To install the CLI, run the following command in your terminal:</p>
+
+<pre class="brush: bash">npm install --global @vue/cli</pre>
+
+<p>Or if you'd prefer to use yarn:</p>
+
+<pre class="brush: bash">yarn global add @vue/cli</pre>
+
+<p>Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run <code>vue create &lt;project-name&gt;</code>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.</p>
+
+<p>We’ll look at using this below.</p>
+
+<h2 id="Initializing_a_new_project">Initializing a new project</h2>
+
+<p>To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:</p>
+
+<ol>
+ <li>In terminal, <code>cd</code> to where you'd like to create your sample app, then run <code>vue create moz-todo-vue</code>.</li>
+ <li>Use the arrow keys and <kbd>Enter</kbd> to select the "Manually select features" option.</li>
+ <li>The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press <kbd>Enter</kbd> to proceed.</li>
+ <li>Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit <kbd>Enter</kbd> again. This will help us catch common errors, but not be overly opinionated.</li>
+ <li>Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit <kbd>Enter</kbd> to continue.</li>
+ <li>Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's <code>package.json</code> file. Select "In dedicated config files" and push <kbd>Enter</kbd>.</li>
+ <li>Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type <kbd>y</kbd> , otherwise type <kbd>n</kbd>.</li>
+</ol>
+
+<p>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p>
+
+<p>If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag <code>--packageManager=&lt;package-manager&gt;</code>, when you run <code>vue create</code>.  So if you wanted to create the <code>moz-todo-vue</code> project with npm and you'd previously chosen yarn, you’d run <code>vue create moz-todo-vue --packageManager=npm</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: We've not gone over all of the options here, but you can <a href="https://cli.vuejs.org">find more information on the CLI</a> in the Vue docs.</p>
+</div>
+
+<h2 id="Project_structure">Project structure</h2>
+
+<p>If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:</p>
+
+<ul>
+ <li><code>.eslintrc.js</code>: This is a config file for <a href="https://eslint.org/">eslint</a>. You can use this to manage your linting rules.</li>
+ <li><code>babel.config.js</code>: This is the config file for <a href="https://babeljs.io/">Babel</a>, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.</li>
+ <li><code>.browserslistrc</code>: This is a config for <a href="https://github.com/browserslist/browserslist">Browserslist</a>. You can use this to control which browsers your tooling optimizes for.</li>
+ <li><code>public</code>: This directory contains static assets that are published, but not processed by <a href="https://webpack.js.org/">Webpack</a> during build (with one exception; <code>index.html</code> gets some processing).
+  <ul>
+   <li><code>favicon.ico</code>: This is the favicon for your app. Currently, it's the Vue logo.</li>
+   <li><code>index.html</code>: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it.
+    <div class="note"><strong>Note</strong>: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.</div>
+   </li>
+  </ul>
+ </li>
+ <li><code>src</code>: This directory contains the core of your Vue app.
+  <ul>
+   <li><code>main.js</code>: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the <code>index.html</code> file your app should be attached to. This file is often where you register global components or additional Vue libraries.</li>
+   <li><code>App.vue</code>: this is the top-level component in your Vue app. See below for more explanation of Vue components.</li>
+   <li><code>components</code>: this directory is where you keep your components. Currently it just has one example component.</li>
+   <li><code>assets</code>: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like <a href="https://sass-lang.com/">Sass/SCSS</a> or <a href="https://stylus-lang.com/">Stylus</a>.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a <code>views</code> directory).</p>
+</div>
+
+<h2 id=".vue_files_single_file_components">.vue files (single file components)</h2>
+
+<p>Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.</p>
+
+<p>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in <code>.vue</code>. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.</p>
+
+<p>As a bonus, projects created with the Vue CLI are configured to use <code>.vue</code> files with Webpack out of the box. In fact, if you look inside the <code>src</code> folder in the project we created with the CLI, you'll see your first <code>.vue</code> file: <code>App.vue</code>.</p>
+
+<p>Let's explore this now.</p>
+
+<h3 id="App.vue">App.vue</h3>
+
+<p>Open your <code>App.vue</code> file — you’ll see that it has three parts: <code>&lt;template&gt;</code>, <code>&lt;script&gt;</code>, and <code>&lt;style&gt;</code>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.</p>
+
+<p><code>&lt;template&gt;</code> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: By setting the <code>lang</code> attribute on the <code>&lt;template&gt;</code> tag, you can use Pug template syntax instead of standard HTML — <code>&lt;template lang="pug"&gt;</code>. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.</p>
+</div>
+
+<p><code>&lt;script&gt;</code> contains all of the non-display logic of your component. Most importantly, your <code>&lt;script&gt;</code> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a <code>render()</code> function.</p>
+
+<p>In the case of <code>App.vue</code>, our default export sets the name of the component to <code>app</code> and registers the <code>HelloWorld</code> component by adding it into the <code>components</code> property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.</p>
+
+<pre class="brush: js">import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'app',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you want to use <a href="https://www.typescriptlang.org/">TypeScript</a> syntax, you need to set the <code>lang</code> attribute on the <code>&lt;script&gt;</code> tag to signify to the compiler that you're using TypeScript — <code>&lt;script lang="ts"&gt;</code>.</p>
+</div>
+
+<p><code>&lt;style&gt;</code> is where you write your CSS for the component. If you add a <code>scoped</code> attribute — <code>&lt;style scoped&gt;</code> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you select a CSS pre-processor when creating the project via the CLI, you can add a <code>lang</code> attribute to the <code>&lt;style&gt;</code> tag so that the contents can be processed by Webpack at build time. For example, <code>&lt;style lang="scss"&gt;</code> will allow you to use SCSS syntax in your styling information.</p>
+</div>
+
+<h2 id="Running_the_app_locally">Running the app locally</h2>
+
+<p>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a <code>serve</code> command to the project’s <code>package.json</code> file as an npm script, so you can easily run it.</p>
+
+<p>In your terminal, try running <code>npm run serve</code> (or <code>yarn serve</code> if you prefer yarn). Your terminal should output something like the following:</p>
+
+<pre>INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   &lt;http://localhost:8080/&gt;
+  - Network: &lt;http://192.168.1.9:8080/&gt;
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.</pre>
+
+<p>If you navigate to the “local” address in a new browser tab (this should be something like <code>http://localhost:8080</code> as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.</p>
+
+<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="https://mdn.mozillademos.org/files/17240/vue-default-app.png" style="border-style: solid; border-width: 1px; height: 779px; width: 1600px;"></p>
+
+<h2 id="Making_a_couple_of_changes">Making a couple of changes</h2>
+
+<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> element from the template section:</p>
+
+<pre class="brush: html"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd">&lt;img alt="Vue logo" src="./assets/logo.png"&gt;</span></pre>
+
+<p>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the <code>HelloWorld</code> component from our template.</p>
+
+<p>First of all delete this line:</p>
+
+<pre class="brush: html">&lt;HelloWorld msg="Welcome to Your Vue.js App"/&gt;</pre>
+
+<p>If you save your <code>App.vue</code> file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <code>&lt;script&gt;</code> element that import and register the component:</p>
+
+<p>Delete these lines now:</p>
+
+<pre class="brush: js">import HelloWorld from './components/HelloWorld.vue'</pre>
+
+<pre class="brush: js">components: {
+  HelloWorld
+}</pre>
+
+<p>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <code>&lt;template&gt;</code>.</p>
+
+<p>Let’s add a new <code>&lt;h1&gt;</code> inside <code>&lt;div id="app"&gt;</code>. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:</p>
+
+<pre class="brush: html">&lt;template&gt;
+  &lt;div id="app"&gt;
+    &lt;h1&gt;To-Do List&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p><code>App.vue</code> will now show our heading, as you'd expect.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.</p>
+
+<p>With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.</p>
+
+<p>In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.</p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/pt-br/learn/tools_and_testing/cross_browser_testing/index.html b/files/pt-br/learn/tools_and_testing/cross_browser_testing/index.html
new file mode 100644
index 0000000000..331e47b921
--- /dev/null
+++ b/files/pt-br/learn/tools_and_testing/cross_browser_testing/index.html
@@ -0,0 +1,49 @@
+---
+title: Cross Browser Teste
+slug: Learn/Tools_and_testing/Cross_browser_testing
+tags:
+  - Accessibility
+  - Automation
+  - Beginner
+  - CSS
+  - CodingScripting
+  - HTML
+  - JavaScript
+  - Landing
+  - Learn
+  - Module
+  - NeedsTranslation
+  - Testing
+  - Tools
+  - TopicStub
+  - cross browser
+translation_of: Learn/Tools_and_testing/Cross_browser_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></dt>
+ <dd>This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></dt>
+ <dd>Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), low fi testing strategies (get yourself a range of devices and some virtual machines and do adhoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></dt>
+ <dd>With the scene set, we'll now look specifically at the common cross browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></dt>
+ <dd>Now we'll look at common cross browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></dt>
+ <dd>Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></dt>
+ <dd>Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as <code>@supports</code>.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></dt>
+ <dd>Manually running tests on several browsers and devices, several times per day, can get tedious and time consuming. To handle this efficiently, you should become familiar with automation tools. In this article we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></dt>
+ <dd>In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.</dd>
+</dl>
diff --git a/files/pt-br/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/pt-br/learn/tools_and_testing/cross_browser_testing/introduction/index.html
new file mode 100644
index 0000000000..8999820e0b
--- /dev/null
+++ b/files/pt-br/learn/tools_and_testing/cross_browser_testing/introduction/index.html
@@ -0,0 +1,201 @@
+---
+title: Introduction to cross browser testing
+slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction
+translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>
+
+<p class="summary">This article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To gain an understanding of the high-level concepts involved in cross browser testing.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_que_é_cross_browser_testing">O que é cross browser testing?</h2>
+
+<p>Cross browser testing é a prática de se assegurar de que os web sites e web apps que você cria funcionarão em um número aceitável de navegadores web. Como um desenvolvedor web, é de sua responsabilidade assegurar de não apenas fazer com que os seus projetos funcionem, mas também que funcionem para todos os usuários, não importa o navegador, dispositivo ou ferramentas auxiliares adicionais que eles estarão usando. Você deve pensar sobre:</p>
+
+<ul>
+ <li>Different browsers other than the one or two that you use regularly on your devices, including slightly older browsers that some people might still be using, which don't support all the latest, shiniest CSS and JavaScript features.</li>
+ <li>Different devices with different capabilities, from the latest greatest tablets and smartphones, through smart TVs, right down to cheap tablets and even older feature phones that may run browsers with limited capabilities.</li>
+ <li>People with disabilities, who use the Web with the aid of assistive technologies like screenreaders, or don't use a mouse (some people use only the keyboard).</li>
+</ul>
+
+<p>Remember that you are not your users — just because your site works on your Macbook Pro or high-end Galaxy Nexus, doesn't mean it will work for all your users — there's a whole lot of testing to be done!</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/">Make the web work for everyone</a> provides more useful perspective on the different browsers people use, their market share, and related cross browser compatibility issues.</p>
+</div>
+
+<p>We should explain a few bits of terminology here. To start with, when we talk about sites "working cross browser", we are really saying that they should provide an acceptable user experience across different browsers. It is potentially OK for a site to not deliver the exact same experience on all browsers, as long as the core functionality is accessible in some way. On modern browsers you might get something animated, 3D and shiny, whereas on older browsers you might just get a flat graphic representing the same information. As long as the site owner is happy with this, then you have done your job.</p>
+
+<p>On the other hand, it is not OK for a site to work fine for sighted users, but be completely inaccessible for visually impaired users because their screen reader application can't read any of the information stored on it.</p>
+
+<p>Second, when we say "across an acceptable number of web browsers", we don't mean 100% of the browsers in the world — this is just about impossible. You can make some informed calls as to what browsers and devices your users will be using (as we'll discuss in the second article in the series — see <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>), but you can't guarantee everything. As a web developer, you need to agree a range of browsers and devices that the code definitely needs to work on with the site owner, but beyond that, you need to code defensively to give other browsers the best chance possible of being able to use your content. This is one of the great challenges of web development.</p>
+
+<div class="note">
+<p><strong>Note</strong>: We'll cover defensive coding later in the module too.</p>
+</div>
+
+<h2 id="Why_do_cross_browser_issues_occur">Why do cross browser issues occur?</h2>
+
+<p>There are many different reasons why cross browser issues occur, and note that here we are talking about issues where things behave different across different browsers / devices / browsing preferences. Before you even get to cross browser issues, you should have already fixed out bugs in your code (see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, and <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a> from previous topics to refresh your memory if needed).</p>
+
+<p>Cross browser issues commonly occur because:</p>
+
+<ul>
+ <li>sometimes browsers have bugs, or implement features differently. This situation is a lot less bad than it used to be; back when IE4 and Netscape 4 were competing to be the dominant browser in the 1990s, browser companies deliberately implemented things differently to each other to try to gain competitive advantage, which made life hell for developers. Browsers are much better at following standards these days, but differences and bugs still creep through sometimes.</li>
+ <li>some browsers may have different levels of support for technology features to others. This is inevitable when you are dealing with bleeding edge features that browsers are just getting round to implementing, or if you have to support really old browsers that are no longer being developed, which may have been frozen (i.e. no more new work done on them) a long time before a new feature was even invented. As an example, if you want to use cutting edge JavaScript features in your site, they might not work in older browsers. If you need to support older browsers, you might have to not use those, or convert your code to old fashioned syntax using some kind of cross-compiler where needed.</li>
+ <li>some devices may have constraints that cause a web site to run slowly, or display badly. For example, if a site has been designed to look nice on a desktop PC, it will probably look tiny and be hard to read on a mobile device. If your site includes a load of big animations, it might be ok on a high spec tablet, but might be sluggish or jerky on a low end device.</li>
+</ul>
+
+<p>and more reasons besides.</p>
+
+<p>In later articles, we'll explore common cross browser problems, and look at solutions to those.</p>
+
+<h2 id="Workflows_for_cross_browser_testing">Workflows for cross browser testing</h2>
+
+<p>All of this cross browser testing business may sound time consuming and scary, but it needn't be — you just need to plan carefully for it, and make sure you do enough testing in the right places to make sure you don't run into unexpected problems. If you are working on a large project, you should be testing it regularly, to make sure that new features work for your target audience, and that new additions to the code don't break old features that were previously working.</p>
+
+<p>If you leave all the testing to the end of a project, any bugs you uncover will be a lot more expensive and time consuming to fix than if you uncover them and fix them as you go along.</p>
+
+<p>The workflow for testing and bug fixes on a project can be broken down into roughly the following four phases (this is only very rough — different people may do things quite differently to this):</p>
+
+<p><strong>Initial planning &gt; Development &gt; Testing/discovery &gt; Fixes/iteration</strong></p>
+
+<p>Steps 2–4 will tend to be repeated as many times as necessary to get all of the implementation done. We will look at the different parts of the testing process in much greater detail in subsequent articles, but for now let's just summarize what may occur in each step.</p>
+
+<h3 id="Initial_planning">Initial planning</h3>
+
+<p>In the initial planning phase, you will probably have several planning meetings with the site owner/client (this might be your boss, or someone from an external company you are building a web site for), in which you determine exactly what the web site should be — what content and functionality should it have, what should it look like, etc. At this point you'll also want to know how much time you have to develop the site — what is their deadline, and how much are they going to pay you for your work? We won't go into much detail about this, but cross-browser issues can have a serious effect on such planning.</p>
+
+<p>Once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? The client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. If not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. You can also use a bit of intuition.</p>
+
+<p>So for example, you might be building an e-commerce site that serves customers in North America. the site should work entirely in the last few versions of the most popular desktop and mobile (iOS, Android, Windows phone) browsers — this should include Chrome (and Opera as it is based on the same rendering engine as Chrome), Firefox, IE/Edge, and Safari. It should also provide an acceptable experience on IE 8 and 9, and be accessible with WCAG AA compliance.</p>
+
+<p>Now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. For example, if the e-commerce site owner wants a WebGL-powered 3D tour of each product built into the product pages, they will need to accept that this just won't work in IE versions before 11. You'd have to agree to provide a version of the site without this feature to users of older IE versions.</p>
+
+<p>You should compile a list of the potential problem areas.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult <a href="http://caniuse.com/">caniuse.com</a>, for some further useful details.</p>
+</div>
+
+<p>Once you've agreed on these details, you can go ahead and start developing the site.</p>
+
+<h3 id="Development">Development</h3>
+
+<p>Now on to the development of the site. You should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. You might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc.</p>
+
+<p>There are multiple general strategies to cross browser development, for example:</p>
+
+<ul>
+ <li>Get all the functionality working as closely as possible in all target browsers. This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a {{glossary("Polyfill")}} to mimic any missing support using JavaScript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.</li>
+ <li>Accept that some things aren't going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don't support the full functionality. Sometimes this is inevitable due to device constraints — a cinema widescreen isn't going to give the same visual experience as a 4" mobile screen, regardless of how you program your site.</li>
+ <li>Accept that your site just isn't going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it.</li>
+</ul>
+
+<p>Normally your development will involve a combination of the above three approaches. The most important thing is that you test each small part before committing it — don't leave all the testing till the end!</p>
+
+<h3 id="Testingdiscovery">Testing/discovery</h3>
+
+<p>After each implementation phase, you will need to test the new functionality. To start with, you should make sure there are no general issues with your code that are stopping your feature from working:</p>
+
+<ol>
+ <li>Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or IE/Edge.</li>
+ <li>Do some low fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.</li>
+ <li>Test on a mobile platform, such as Android or iOS.</li>
+</ol>
+
+<p>At this point, fix any problems you find with your new code.</p>
+
+<p>Next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">determining your target browsers</a>). For example:</p>
+
+<ul>
+ <li>Try to test the latest change on all the modern desktop browsers you can — including Firefox, Chrome, Opera, IE, Edge, and Safari on desktop (Mac, Windows, and Linux, ideally).</li>
+ <li>Test it in common phone and tablet browsers (e.g. iOS Safari on iPhone/iPad, Chrome and Firefox on iPhone/iPad/Android),</li>
+ <li>Also do tests in any other browsers you have included inside your target list.</li>
+</ul>
+
+<p>The most low fi option is to just do all the testing you can by yourself (pulling in team mates to help out if you are working in a  team). You should try to test it on real physical devices where possible.</p>
+
+<p>If you haven't got the means to test all those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop computer) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop computer). This is a very popular choice, especially in some circumstances — for example, Windows doesn't let you have multiple versions of Windows installed simulataneously on the same machine, so using multiple virtual machines is often the only option here.</p>
+
+<p>Another option is user groups — using a group of people outside your development team to test your site. This could be a group of friends or family, a group of other employees, a class at a local university, or a professional user testing setup, where people are paid to test out your site and provide results.</p>
+
+<p>Finally, you can get smarter with your testing using auditing or automation tools; this is a sensible choice as your projects get bigger, as doing all this testing by hand can start to take a really long time. You can set up your own testing automation system (<a href="http://www.seleniumhq.org/">Selenium</a> being the popular app of choice) that could for example load your site in a number of different browsers, and:</p>
+
+<ul>
+ <li>see if a button click causes something to happen successfully (like for example, a map displaying), displaying the results once the tests are completed</li>
+ <li>take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.</li>
+</ul>
+
+<p>You can also go further than this, if wished. There are commercial tools available such as <a href="https://saucelabs.com/">Sauce Labs</a> and <a href="https://www.browserstack.com/">Browser Stack</a> that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. It is also possible to set up an environment that automatically runs tests for you, and then only lets you check in your changes to the central code repository if the tests still pass.</p>
+
+<h4 id="Testing_on_prerelease_browsers">Testing on prerelease browsers</h4>
+
+<p>It is often a good idea to test on prerelease versions of browsers; see the following links:</p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li>
+ <li><a href="https://insider.windows.com/">Edge Insider Preview</a></li>
+ <li><a href="https://developer.apple.com/safari/technology-preview/">Safari Technology Preview</a></li>
+ <li><a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary</a></li>
+ <li><a href="http://www.opera.com/computer/beta">Opera Developer</a></li>
+</ul>
+
+<p>This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's developers have fixed the bug in a newer version.</p>
+
+<h3 id="Fixesiteration">Fixes/iteration</h3>
+
+<p>Once you've discovered a bug, you need to try to fix it.</p>
+
+<p>The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform(s), device(s), browser version(s), etc. Try it on similar configurations (e.g. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform) to see how widely the bug persists.</p>
+
+<p>It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it. It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly (version 52), then they have fixed it. If it is not fixed, then you may want to file a bug (see {{anch("Reporting bugs")}}, below).</p>
+
+<p>If it is your fault, you need to fix it! Finding out the cause of the bug involves the same strategy as any web development bug (again, see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, and <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>). Once you've discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can't just change the problem code outright, as this may break the code in other browsers. The general approach is usually to fork the code in some way, for example use JavaScript feature detection code to detect situations in which a problem feature doesn't work, and run some different code in those cases that does work.</p>
+
+<p>Once a fix has been made, you'll want to repeat your testing process to make sure your fix is working OK, and hasn't caused the site to break in other places or in other browsers.</p>
+
+<h2 id="Reporting_bugs">Reporting bugs</h2>
+
+<p>Just to reiterate on what was said above, if you discover bugs in browsers, you should report them:</p>
+
+<ul>
+ <li><a href="https://bugzilla.mozilla.org/">Firefox Bugzilla</a></li>
+ <li><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/">EdgeHTML issue tracker</a></li>
+ <li><a href="https://bugs.webkit.org/">Safari</a></li>
+ <li><a href="https://bugs.chromium.org/p/chromium/issues/list">Chrome</a></li>
+ <li><a href="https://bugs.opera.com/wizard/desktop">Opera</a></li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing. Armed with this knowledge, you are now ready to move on and start learning about Cross browser testing strategies.</p>
+
+<p>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li>
+</ul>