Entendendo frameworks JavaScript do lado do cliente - Aprendendo desenvolvimento web

Entendendo frameworks JavaScript do lado do cliente
===================================================

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.

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.

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:

* Por que devo usar um framework? Que problemas eles resolvem para mim?
* Que perguntas devo fazer ao tentar escolher um framwork? Eu preciso mesmo usar um framework?
* Quais recursos os frameworks têm? Como funcionam em geral e como as implementações dos frameworks desses recursos diferem?
* Como se relacionam com JavaScript ou HTML "vanilla"?

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.

**Comece agora, com "Introdução às estruturas do lado do cliente" (en-US)**

Pré - requisitos
----------------

Você deve aprender o básico das principais linguagens para web(**HTML**, **CSS** e principalmente **Javascript**) 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.

Guias de introdução
-------------------

1.Introdução a frameworks para client-side (en-US)

Nós iniciamos nosso olhar sobre frameworks com uma visão geral da área, olhando para uma breve história do JavaScript e frameworks, por que frameworks existem e o que eles nos fornecem, como começar a pensar na escolha de um framework para aprender e quais alternativas de frameworks para o lado do cliente existem.

2.Principais recursos para frameworks (en-US)

Cada framework JavaScript principal tem uma abordagem diferente para atualizar o DOM, manipular eventos do navegador e fornecer uma experiência agradável de desenvolvimento. Este artigo explorará os principais recursos dos "quatro maiores" frameworks, observando como eles tendem a funcionar a partir de um nível superficial e as diferenças entre si.

Tutoriais de React
------------------

**Nota:** Tutoriais de React testados pela última vez em Maio de 2020, com React/ReactDOM 16.13.1 e create-react-app 3.4.1.

Se você precisar conferir seu código em relação à nossa versão, você pode encontrar a versão finalizada do código de exemplo da aplicação React em nosso repositório todo-react. Para uma versão executada ao vivo, veja https://mdn.github.io/todo-react-build/.

1. Começando com o React

Neste artigo nós vamos dar olá para o React. Descobriremos um pouco dos detalhes sobre seu histórico e casos de uso, configurar uma cadeia de ferramentas React básica em nosso computador local, e criar e brincar com um aplicativo inicial simples, aprendendo um pouco sobre como o React funciona no processo.

2. Começando com a nossa lista "to do" do React (en-US)

Digamos que recebemos a tarefa de criar uma prova de conceito em React - uma aplicação que permite aos usuários adicionar, editar e deletar tarefas nas quais desejam trabalhar e também marcar tarefas como concluídas sem excluí-las. Este artigo irá orientá-lo sobre como colocar a estrutura básica e estilizações do componente `App` no lugar, pronto para a definição e interatividade de componentes individuais, que adicionaremos mais tarde.

3. Componetizando o nosso app React (en-US)

Neste ponto, nossa aplicação é um monólito. Antes que possamos fazê-lo fazer as coisas, nós precisamos dividi-lo em componentes gerenciáveis e descritivos. React não tem regras rígidas para o que é ou não um componente – isso é com você! Neste artigo mostraremos a você uma forma sensível de dividir nossa aplicação em componentes.

4. Interatividade React : Eventos e estado (en-US)

Com nosso plano de componentes realizado, agora é hora de começar a atualizar nossa aplicação de uma interface de usuário completamente estática para uma que realmente nos permita interagir e alterar as coisas. Neste artigo faremos isso, investigando os eventos e estados ao longo do caminho.

5. Interatividade com o React : Editando, filltrando e renderizando (en-US)

À medida que nos aproximamos do final da nossa jornada React (pelo menos por enquanto), adicionaremos os toques finais para as principais áreas de funcionalidade da nossa aplicação de lista "to do". Isso inclui permitir que você edite tarefas existentes e filtre a lista de tarefas entre todas as tarefas, concluídas e incompletas. Veremos a renderização condicional da interface de usuário ao longo do caminho.

6. Acessibilidade com o React (en-US)

Em nosso artigo tutorial final, vamos focar (trocadilho intencional) na acessibilidade, incluindo o gerenciamento de foco no React, que pode melhorar a usabilidade e reduzir a confusão tanto para os usuários de teclado quanto usuários leitores de tela.

7. Recursos do React (en-US)

Nosso artigo final fornece uma lista de recursos do React que você pode usar para avançar no seu aprendizado.

Ember tutorials
---------------

**Nota:** Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.

If you need to check your code against our version, you can find a finished version of the sample Ember app code in the ember-todomvc-tutorial repository. For a running live version, see https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).

1. Getting started with Ember (en-US)

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.

2. Ember app structure and componentization (en-US)

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.

3. Ember interactivity: Events, classes and state (en-US)

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.

4. Ember Interactivity: Footer functionality, conditional rendering (en-US)

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.

5. Routing in Ember (en-US)

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".

6. Ember resources and troubleshooting (en-US)

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.

Vue tutorials
-------------

**Nota:** Vue tutorials last tested in May 2020, with Vue 2.6.11.

If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository. For a running live version, see https://mdn.github.io/todo-vue/dist/.

1. Getting started with Vue

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.

2. Creating our first Vue component (en-US)

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.

3. Rendering a list of Vue components (en-US)

At this point we've got a fully working component; we're now ready to add multiple `ToDoItem` components to our App. In this article we'll look at adding a set of todo item data to our `App.vue` component, which we'll then loop through and display inside `ToDoItem` components using the `v-for` directive.

4. Adding a new todo form: Vue events, methods, and models (en-US)

We now have sample data in place and a loop that takes each bit of data and renders it inside a `ToDoItem` 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 `<input>`, 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.

5. Styling Vue components with CSS (en-US)

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.

6. Using Vue computed properties (en-US)

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.

7. Vue conditional rendering: editing existing todos (en-US)

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 `v-if` and `v-else` — 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.

8. Focus management with Vue refs (en-US)

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.

9. Vue resources (en-US)

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.

Which frameworks did we choose?
-------------------------------

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:

* 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.
* 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.
* We don't have the resources to cover *all* modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.
* 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.

We want to say this upfront — we've **not** 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.

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 Matrix, or Discourse, or drop us a mail on the mdn-admins list.


Iniciando com Vue - Aprendendo desenvolvimento web

Iniciando com Vue
=================

* Anterior  (en-US)
* Menu: Client-side JavaScript frameworks
* Próxima  (en-US)

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.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento com as liguagens
 HTML,
 CSS, e
 JavaScript, conhecimento do
 terminal/command line (en-US).

 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.
  |
| Objetivo: |
 Para configurar um ambiente de desenvolvimento local do Vue, crie um
 aplicativo inicial e entenda o básico de como ele funciona.
  |

Um Vue mais claro
-----------------

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 JQuery.

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.

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.

 À medida que você trabalha neste tutorial, convém manter o guia do Vue e a documentação da API abertos em outras guias, para poder consultar um item se quiser obter mais informações sobre qualquer subtópico.
 Para uma boa comparação (mas potencialmente tendenciosa) entre o Vue e muitos outros frameworks, consulte Vue Docs: Comparação com outros frameworks.

Installation
------------

To use Vue in an existing site, you can drop one of the following `<script>` 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.

* Development Script (Unoptimized, but includes console warnings. Great for development

```markup
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

* 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.)

```markup
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```

However, this approach has some limitations. To build more complex apps, you'll want to use the Vue NPM package. 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 & the CLI you will need:

1. Node.js 8.11+ installed.
2. npm or yarn.

**Nota:** If you don't have the above installed, find out more about installing npm and Node.js (en-US) here.

To install the CLI, run the following command in your terminal:

```bash
npm install --global @vue/cli
```

Or if you'd prefer to use yarn:

```bash
yarn global add @vue/cli
```

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 `vue create <project-name>`. 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.

We'll look at using this below.

Initializing a new project
--------------------------

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:

1. In terminal, `cd` to where you'd like to create your sample app, then run `vue create moz-todo-vue`.
2. Use the arrow keys and
 `Enter`
 to select the "Manually select features" option.
3. 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
 `Enter`
 to proceed.
4. Next you'll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit
 `Enter`
 again. This will help us catch common errors, but not be overly opinionated.
5. 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
 `Enter`
 to continue.
6. 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 `package.json` file. Select "In dedicated config files" and push
 `Enter`
 .
7. 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
 `y`
 , otherwise type
 `n`
 .

The CLI will now begin scaffolding out your project, and installing all of your dependencies.

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 `--packageManager=<package-manager>`, when you run `vue create`. So if you wanted to create the `moz-todo-vue` project with npm and you'd previously chosen yarn, you'd run `vue create moz-todo-vue --packageManager=npm`.

**Nota:** We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.

Project structure
-----------------

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:

* `.eslintrc.js`: This is a config file for eslint. You can use this to manage your linting rules.
* `babel.config.js`: This is the config file for Babel, 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.
* `.browserslistrc`: This is a config for Browserslist. You can use this to control which browsers your tooling optimizes for.
* `public`: This directory contains static assets that are published, but not processed by Webpack during build (with one exception; `index.html` gets some processing).
    + `favicon.ico`: This is the favicon for your app. Currently, it's the Vue logo.
    + `index.html`: 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.

    **Nota:** 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.
* `src`: This directory contains the core of your Vue app.
    + `main.js`: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the `index.html` file your app should be attached to. This file is often where you register global components or additional Vue libraries.
    + `App.vue`: this is the top-level component in your Vue app. See below for more explanation of Vue components.
    + `components`: this directory is where you keep your components. Currently it just has one example component.
    + `assets`: 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 Sass/SCSS or Stylus.

**Nota:** 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 `views` directory).

.vue files (single file components)
-----------------------------------

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.

While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in `.vue`. 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.

As a bonus, projects created with the Vue CLI are configured to use `.vue` files with Webpack out of the box. In fact, if you look inside the `src` folder in the project we created with the CLI, you'll see your first `.vue` file: `App.vue`.

Let's explore this now.

### App.vue

Open your `App.vue` file — you'll see that it has three parts: `<template>`, `<script>`, and `<style>`, which contain the component's template, scripting, and styling information. All Single File Components share this same basic structure.

`<template>` 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.

**Nota:** By setting the `lang` attribute on the `<template>` tag, you can use Pug template syntax instead of standard HTML — `<template lang="pug">`. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.

`<script>` contains all of the non-display logic of your component. Most importantly, your `<script>` 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 `render()` function.

In the case of `App.vue`, our default export sets the name of the component to `app` and registers the `HelloWorld` component by adding it into the `components` 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.

```jsx
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    //You can register components locally here.
    HelloWorld,
  },
};
```

**Nota:** If you want to use TypeScript syntax, you need to set the `lang` attribute on the `<script>` tag to signify to the compiler that you're using TypeScript — `<script lang="ts">`.

`<style>` is where you write your CSS for the component. If you add a `scoped` attribute — `<style scoped>` — 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.

**Nota:** If you select a CSS pre-processor when creating the project via the CLI, you can add a `lang` attribute to the `<style>` tag so that the contents can be processed by Webpack at build time. For example, `<style lang="scss">` will allow you to use SCSS syntax in your styling information.

Running the app locally
-----------------------

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 `serve` command to the project's `package.json` file as an npm script, so you can easily run it.

In your terminal, try running `npm run serve` (or `yarn serve` if you prefer yarn). Your terminal should output something like the following:
```

INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 18121ms

  App running at:
  - Local:   <http://localhost:8080/>
  - Network: <http://192.168.1.9:8080/>

  Note that the development build is not optimized.
  To create a production build, run npm run build.
```

If you navigate to the "local" address in a new browser tab (this should be something like `http://localhost:8080` 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.

![default vue app render, with vue logo, welcome message, and some documentation links](/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started/vue-default-app.png)

Making a couple of changes
--------------------------

Let's make our first change to the app — we'll delete the Vue logo. Open the `App.vue` file, and delete the `<img>` element from the template section:

```markup
<img alt="Vue logo" src="./assets/logo.png" />
```

If your server is still running, you should see the logo removed from the rendered site almost instantly. Let's also remove the `HelloWorld` component from our template.

First of all delete this line:

```markup
<HelloWorld msg="Welcome to Your Vue.js App" />
```

If you save your `App.vue` 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 `<script>` element that import and register the component:

Delete these lines now:

```js
import HelloWorld from "./components/HelloWorld.vue";
```

```js
components: {
  HelloWorld;
}
```

Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside `<template>`.

Let's add a new `<h1>` inside `<div id="app">`. 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:

```markup
<template>
  <div id="app">
    <h1>To-Do List</h1>
  </div>
</template>
```

`App.vue` will now show our heading, as you'd expect.

Summary
-------

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.

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.

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.

* Anterior  (en-US)
* Menu: Client-side JavaScript frameworks
* Próxima  (en-US)


Começando com React - Aprendendo desenvolvimento web

Começando com React
===================

* Anterior  (en-US)
* Menu: Client-side JavaScript frameworks
* Próxima  (en-US)

Neste artigo mostraremos como dizer Olá para o React. Descobriremos um pouco sobre e os casos de usos, configurar uma React toolchain no computador localmente, e criar e usar um app simples como partida, aprendendo um pouco sobre como os processos do React funcionam.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Familiaridade com HTML,
 CSS, e linguagem
 JavaScript, conhecimento de
 terminal/linha de comandos. (en-US)

 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.
  |
| Objetivo: |
 Configurar um ambiente local de desenvolvimento React, criar o primeiro
 app e entender o básico de como as coisas funcionam.
  |

Olá, React
----------

Segundo seu slogan oficial, React é 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, React Native pode ser usado para construção de aplicativos móveis; React 360 pode ser usado para construir aplicações de realidade virtual; e muitas outras possibilidades.

Para construir para web, desenvolvedores usam React em conjunto com ReactDOM. 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.

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.

Casos de uso
------------

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.

Enquanto React pode ser utilizado por pequenos pedaços de interface 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.

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.

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óprio create-react-app do Facebook.

Como React usa JavaScript?
--------------------------

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 JSX. 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:

```js
const heading = <h1> Mozilla Developer Network</h1>;
```

A constante *heading* acima é conhecida como uma **expressão JSX.** React pode utilizá-la para renderizar a *tag* `<h1>` em nosso aplicativo.

Suponha que quiséssemos conter nosso cabeçalho em uma tag `<header>`, 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:

```js
const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);
```

**Nota:** 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:

```js
const header = (
  <header>
    <h1>Mozilla Developer Network</h1>
  </header>
);
```

Entretanto, isso é meio estranho, porquê a tag `<header>` que inicia a expressão não está alinhada na mesma posição que sua tag de fechamento correspondente.

Claro, seu navegador não é capaz de ler o JSX sem alguma ajuda. Quando compilado (utilizando uma ferramenta como Babel ou Parcel), nossa expressão de cabeçalho ficaria assim:

```js
const header = React.createElement(
  "header",
  null,
  React.createElement("h1", null, "Mozilla Developer Network"),
);
```

É *possível* pular o processo de compilação e utilizar `React.createElement()` 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.

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.

Para ler mais sobre o JSX, confira este artigo do time do React, JSX In Depth.

Configurando seu primeiro app React
-----------------------------------

Existem muitos jeitos de utilizar o React, mas nós iremos utilizar a ferramenta de interface de linha de comando (CLI), *create-react-app*, 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.

É possível adicionar React á um website sem create-react-app copiando alguns elementos `<script>` em um arquivo HTML, mas o a interface de linha de comando *create-react-app* é 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.

### Requisitos

Para começar a utilizar o *create-react-app,* você precisa ter o Node.js instalado. É recomendado que você utilize a versão com suporte de longa data (LTS). *Node* inclui o *npm* (o gerenciador de pacotes node), e o *npx* (o executador de pacotes do node).

Você também pode utilizar o gerenciador de pacotes *Yarn* como uma alternativa, mas nós iremos assumir que você está utilizando o *npm* para esta série de tutoriais. Veja Gerenciador de pacotes - básico (en-US) para mais informações sobre o *npm* ou o *Yarn*.

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. **Gitbash** (que vem junto como parte do pacote de ferramentas Git para o Windows) ou o subsistema Windows para Linux (**WSL**) ambos são adequados. Veja o Curso intensivo - Linha de comando (en-US)para mais informações sobre estes e sobre comandos de terminal no geral.

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 polyfills. É recomendado que você utilize um navegador moderno com o Firefox, Safari, Chrome ou Edge enquanto estiver trabalhando nestes tutoriais.

Veja também os seguintes artigos para mais informações:

* "O que é NPM" no NodeJS.org
* "Introdução ao NPX" no blog npm
* Documentação do create-react-app
### Inicializando seu app

O *create-react-app* leva apenas um argumento: o nome que você quer dar ao seu aplicativo. *create-react-app* 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 `cd` 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:

```bash
npx create-react-app moz-todo-react
```

Isto criará a pasta `moz-todo-react`, e também faz mais algumas coisas dentro desta:

* Instala alguns pacotes *npm* essenciais para a funcionalidade do app.
* Escreve scripts para iniciar e servir a aplicação.
* Cria a estrutura de arquivos e pastas que define a arquitetura básica do aplicativo.
* Inicializa o diretório como um *repositório git*, se você tem o *git* instalado em seu computador.

**Nota:** Se você tem o gerenciador de pacotes *Yarn* instalado, *create-react-app* vai utilizá-lo por padrão em vez de utilizar o *npm*. Se você tem ambos gerenciadores de pacotes instalados e explicitamente quer utilizar o NPM, você pode adicionar a opção `--use-npm` quando você executar o *create-react-app*:

```bash
npx create-react-app moz-todo-react --use-npm
```

*create-react-app* 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á.

Quando o processo finalizar, dê um `cd` para dentro da pasta `moz-todo-react` e execute o comando `npm start`. Os scripts instalados pelo *create-react-app* vão começar a serem servidos em um servidor local, no endereço *localhost:3000,* e abrirão o aplicativo em uma nova aba em seu navegador. Seu navegador vai mostrar algo como isto:

![Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application](/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started/default-create-react-app.png)

### Estrutura da aplicação

*create-react-app* dá para você tudo que você precisa para desenvolver uma aplicação React. A estrutura inicial do arquivo vai ficar assim:
```

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
```

A pasta `src` é onde nós iremos ficar a maior parte do nosso tempo, é onde o código fonte da nossa aplicação vive.

A pasta `public` contém arquivos que serão lidos pelo navegador enquanto você desenvolve o aplicativo; o mais importante de todos estes arquivos é o `index.html`. O React irá injetar seu código neste arquivo para que seu navegador possa executá-lo. Existem outras marcações que ajudam o *create-react-app* 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 `<title>` 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!

A pasta `public` também será publicada quando você construir e lançar uma versão de produção de seu aplicativo. Nós não cobriremos *lançamento* (deploy) de aplicações neste tutorial, entretanto você provavelmente conseguirá implementar uma solução similar para isso descrito em nosso tutorial Lançando nosso app (en-US).

O arquivo `package.json` contém informações sobre o nosso projeto, dentre as quais, o nome do projeto e os pacotes instalados. O Node.js/npm usa esse aquivo para manter tudo organizado. O arquivo `package.json` não é exclusivo para aplicações em React; o *create-react-app* simplesmente encarrega-se de criá-lo. Você não precisa entender este arquivo para completar este tutorial, entretanto, se você estiver interessado em aprender mais sobre este, você pode ler O que é o arquivo 'package.json'? no NodeJS.org; nós também falamos sobre ele no nosso tutorial Básico sobre gerenciamento de pacotes. (en-US)

Explorando seu primeiro componente React — `<App/>`
---------------------------------------------------

No React, um **componente** é 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.

Vamos o arquivo `src/App.js` dado que a mensagem exibida em nosso navegador está nos instigando a editá-lo. Esse arquivo contém nosso primeiro componente, `App`, e algumas outras linhas de código.

```jsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <p>
 Edit <code>src/App.js</code> and save to reload.
 </p>
 <a
 className="App-link"
 href="https://reactjs.org"
 target="\_blank"
 rel="noopener noreferrer">
 Learn React
 </a>
 </header>
 </div>
  );
}
export default App;
```

O arquivo `App.js` consiste de três partes principais: algumas declarações de `import` no topo, o componente `App` no meio, e uma declaração de `export` na parte de baixo. A maioria dos componentes React segue este padrão.

### Declarações de *import*

As declaração de `import` no topo de nosso arquivo `App.js` 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.

```jsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";
```

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 `React.createElement()`, todos componentes React devem importar o módulo `React`. Se você pular este passo, sua aplicação irá resultar em um erro.

A segunda declaração importa um logo de `.'/logo.svg`. Note que o `./` no começo do caminho e a extensão `.svg` no final — estes nos falam que o arquivo é local e que não é um arquivo de JavaScript. De fato, o arquivo `logo.svg` vive em nossa pasta base.

Nós não escrevemos um caminho ou extensão quando importando o módulo `React` — este não é um arquivo local; em vez disso, este é listado como uma dependência em nosso arquivo `package.json`. Tome cuidado com esta distinção enquanto você trabalha nesta lição!

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 `from`. Essa declaração de *import* em particular não é nativa à sintaxe de módulos do Javascript — esta vem do *Webpack*, a ferramenta que o aplicativo *create-react-app* utiliza para agrupar todos nosso arquivos de JavaScript e servi-los ao navegador.

### O componente `App`

Depois dos *imports,* nós temos uma função chamada `App`. Enquanto a maior parte da nossa comunidade JavaScript prefere nomes utilizando o padrão *camel-case* como `helloWorld`, os componentes React utilizam o padrão de formatação para variáveis em *pascal-case*, como `HelloWorld`, para ficar claro que um dado elemento JSX é um componente React e não apenas uma *tag* de HTML comum. Se você mudasse o nome da função `App` para `app`o seu navegador iria mostrar um erro.

Vamos dar uma olhada em `App` mais de perto.

```jsx
function App() {
  return (
    <div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <p>
 Edit <code>src/App.js</code> and save to reload.
 </p>
 <a
 className="App-link"
 href="https://reactjs.org"
 target="\_blank"
 rel="noopener noreferrer">
 Learn React
 </a>
 </header>
 </div>
  );
}
```

A função `App` retrona uma expressão JSX. Essa expressão define o que, no fim, o seu navegador irá renderizar para o DOM.

Alguns elementos na expressão têm atributos, que são escritos assim como no HTML, seguindo o seguinte padrão de `atributo="valor"`. Na linha 3, a tag `<div>` de abertaura tem o atributo *`className`*. Isso é o mesmo que o atributo `class`no HTML, porém por conta do JSX ser Javascript, nós não podemos utilizar a palavra `class` — 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.

Tome um momento para mudar a *tag* `<p>` 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 `http://localhost:3000` em seu navegador. Agora delete a *tag* `<a>` e salve; o link *"Learn React"* vai desaparecer.

Seu componente `App` deve estar assim agora:

```jsx
function App() {
  return (
    <div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <p>Hello, World!</p>
 </header>
 </div>
  );
}
```

### Declarações *export*

Bem no final do seu arquivo `App.js`, a declaração `export default App` faz com que seu componente `App` esteja disponível para outros módulos.

Interrogando o *index*
----------------------

Vamos abrir `src/index.js`, porque é onde nosso componente `App` está sendo utilizado. Esse arquivo é o ponto de entrada para nosso aplicativo, e inicialmente parece-se assim:

```jsx
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import \* as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, 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();
```

Assim como em `App.js`, o arquivo começa importando todos os módulos JS (JavaScript) e outros recursos que precisa executar. `src/index.css` contém os estilos globais (CSS) que são aplicados em todo nosso aplicativo. Nós podemos também ver nosso componente `App` importado aqui; este é disponibilizado para ser importado graças à declaração de `export` no final do nosso arquivo `App.js`.

A linha 7 invoca a função `ReactDOM.render()` com dois argumentos:

* O componente que queremos renderizar, `<App />` neste caso.
* O elemento do DOM que queremos que nosso componente seja renderizado dentro, neste caso é o elemento com o ID de `root`. Se você olhar dentro de `public/index.html`, você verá que existe um elemento `<div>` logo ali dentro do elemento `<body>`.

Tudo isso diz para o React que nós queremos renderizar nossa aplicação React como o componente `App` como a raíz do app, ou o primeiro componente.

**Nota:** No JSX, componentes React e elementos HTML precisam ter barras de fechamento. Escrever apenas `<App>` ou apenas `<img>` irá causar um erro.

Service Workers (en-US) são pedaços interessantes de código que ajudam na perfomance da aplicação e permitem a utilização de características de aplicações Web modernas, como o funcionamento *offline*, 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.

Seu arquivo `index.js` final deve estar assim:

```jsx
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
```

Variáveis e props
-----------------

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 *props*, que são por si uma forma de passar dados para um componente (que então podem ser acessadas utilizando-se de variáveis).

### Variáveis no JSX

De volta ao `App.js` vamos focar na linha 9:

```js
<img src={logo} className="App-logo" alt="logo" />
```

Aqui, na *tag*`<img />` o atributo `src` está entre chaves ( { } ). É assim que o JSX reconhece variáveis. React irá ver `{logo}` e saberá que você está se referindo ao *import* do logo, na linha 2 do nosso aplicativo, e então buscar o arquivo logo para renderizá-lo no navegador.

Vamos tentar fazer uma variável própria. Antes da declaração de *return* de `App` adicione `const subject = 'React';`. Seu componente `App` deve estar assim agora:

```jsx
function App() {
  const subject = "React";
  return (
    <div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <p>Hello, World!</p>
 </header>
 </div>
  );
}
```

Muda a linha 8 para usar a nossa variável `subject` em vez da palavra "world", desta forma:

```jsx
function App() {
  const subject = "React";
  return (
    <div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <p>Hello, {subject}!</p>
 </header>
 </div>
  );
}
```

Quando você salvar, seu navegador deverá mostrar "Hello, React!", em vez de mostrar "Hello, world!"

Variáveis são convenientes, mas esta que nós definimos não faz jus aos ótimos recursos do React. É aí que entram as *props*.

### *props* de Componentes

Uma **prop** é qualquer dado passado para um componente React. *Props* são escritos dentro de invocações de componentes e utilizam a mesma sintaxe que atributos de HTML — `prop="valor"`. Vamos abrir o `index.js` e dar à nossa invocação do `<App/>` nossa primeira *prop*.

Adicione a *prop* `subject` na invocação do componente `<App/>`, com o valor de `Clarice`. Quando você terminar, seu código deve estar assim:

```jsx
ReactDOM.render(<App subject="Clarice" />, document.getElementById("root"));
```

De volta ao `App.js`, vamos revisitar a própria função App, que é lida da seuginte forma (com a declaração de `return` encurtada, a fim de ser breve.)

```js
function App() {
  const subject = "React";
  return (
    // return statement
  );
}
```

Mude a definação da nossa função `App` para que aceite `props` como um parâmetro. Assim como qualquer outro parâmetro, você pode colocar `props` em um `console.log()` para ler o que este contém no console de seu navegador. Vá em frente e faça justamente isto depois da sua constante `subject` porém antes da sua declaração de `return`, da seguinte forma:

```js
function App(props) {
  const subject = "React";
  console.log(props);
  return (
    // return statement
  );
}
```

Salve seu arquivo e dê uma olhada no console do navegador. Você deve ver algo assim nos *logs*:

```js
Object { subject: "Clarice" }
```

A propriedade `subjet` deste objeto corresponde à *prop* `subject` que nós adicionamos à nossa chamada do componente `<App />`, e a *string* `Clarice` corresponde ao seu valor. *props* de coponentes no React são sempre coletadas em objetos neste mesmo estilo.

Agora que `subjet` é uma de nossas *props*, vamos utilizá-la em `App.js`. Mude a constante `subject` para que, em vez de ler a string que diz `React`, você está lendo o valor de `props.subject`. Você também pode deletar o `console.log()`, se você quiser.

```js
function App(props) {
  const subject = props.subject;
  return (
    // return statement
  );
}
```

Quando você salvar o arquivo, o aplicativo agora deve dizer "Hello, Clarice!". Se você retornar ao `index.js`, editar o valor de `subject` e salvar, seu texto irá mudar.

Sumário
-------

Isto nos traz ao fim da nossa primeira olhada no React, incluindo como instalá-lo localmente, criando um aplicativo inicial e como o básico funciona. No próximo artigo nós começaremos a construir nossa primeira aplicação de verdade — uma lista de tarefas. Antes de fazermos isso, entretanto, vamos relembrar algumas coisas que aprendemos.

No React

* Componentes podem importar módulos que eles precisam e devem exportar a si mesmo no final de seus respectivos arquivos.
* Componentes em forma de função são nomeados com `PascalCase`.
* Você pode ler variáveis de JSX ao colocá-las entre chaves, da seguinte forma `{assim}`.
* 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. `class` no HTML transforma-se em `className` no JSX. Note que atributos com múltiplas palavras são escritos no padrão de formatação *camel-case*.
* *Props* são escritas bem como atributos dentro das invocações de componentes e são passadas para dentro de componentes.
* Anterior  (en-US)
* Menu: Client-side JavaScript frameworks
* Próxima  (en-US)


Multimídia e Incorporação - Aprendendo desenvolvimento web

Multimídia e Incorporação
=========================

Nós vimos muito sobre texto até aqui nesse curso, mas a internet seria muito chata se usassemos apenas texto. Vamos começar a ver como fazer a internet criar vida, com conteúdo mais interessante! Esse módulo explora como usar HTML para incluir multimídia em sua pagina web,usando as diferentes formas de inclusão de imagens , e como adicionar video, audio, e até paginas da web inteiras.

Pré-requisitos
--------------

Antes de iniciar esse módulo, você deve ter um conhecimento razoável de HTML, como previamente abrangido em introdução a HTML. Se você não estudou esse módulo (ou algo similar), estude-o primeiro e depois retorne!

**Nota:** Se você está trabalhando em um computador/tablet/outro dispositivo onde você não tem a habilidade de criar seus próprios arquivos, você pode testar (maior parte) dos exemplos de códigos em um programa online para codar tais como JSBin ou Thimble.

Guias
-----

Esse módulo contém os seguintes artigos, que vão passar por todos os fundamentos para inserir multimídia em páginas da web.

Imagens em HTML

Existem outros tipos de multimídia para considerar, porém é lógico começar com o modesto elemento `<img>` , usado para inserir uma simples imagem em uma página da web. Nesse artigo vamos aprender a usar esse elemento com mais profundidade, incluindo os básicos, anotando com legendas usando `<figure>` e como se relaciona com imagens de fundo em CSS.

Conteúdo em áudio e video

Agora nós iremos aprender como usar os elementos HTML5 `<video>` e `<audio>` , para inserir video e audio em nossa página; incluindo o basico, fornecendo acesso a diferentes tipos de arquivo para navegadores diferentes, adicionando legenda , e como adicionar alternativas para navegadores mais antigos.

De <object> para <iframe> — outras tecnologias incorporadas

A essa altura, nós gostariamos de avançar alguns passos sobre um conjunto de elementos que permitem você incorporar uma ampla variedade de tipos de conteúdo na suas páginas web: os elementos `<iframe>`, `<embed>` e `<object>` (en-US). `<iframe>`s servem para incorporar outras páginas web, enquanto as outras duas permitem você incorporar PDFs, SVG, e até mesmo Flash — uma tecnologia cada vez menos presente, mas que ainda é possível você encontrar de forma quase regular.

Adicionando gráficos vetoriais à Web

Gráficos vetoriais podem ser muito úteis em determinadas situações. Diferente dos formatos comuns, como PNG/JPG, eles não sofrem distorção/pixelização quando o zoom é ampliado — podendo continuar com a mesma qualidade quando alterado em escala. Esse artigo irá introduzir a você o que são os gráficos vetoriais e como incluir o formato SVG nas páginas web.

Imagens responsivas

Com a atual variedade de tipos de dispositivos capazes de navegar na web - de celulares móveis à computadores pessoais - um conceito essencial para dominar o mundo web moderno é o design responsivo. Este se refere à criação de páginas web que podem automaticamente mudar seus atributos para se adaptar a diferentes resoluções e tamanhos de tela. Isso será explorado em mais detalhes em um módulo CSS posterior, mas, por enquanto, iremos verificar as ferramentas HTML disponíveis para criar imagens responsivas, incluindo o elemento `<picture>`.

Testes de Conhecimentos
-----------------------

Os testes de conhecimentos a seguir vão avaliar seu aprendizado nos assuntos abaixo:

Página Inicial do Mozilla (en-US)

Neste teste nós vamos avaliar seus conhecimentos quanto a algumas técnicas discutidas nos artigos desse módulo, devendo você adicionar imagens e videos numa divertida página inicial sobre o Mozilla!

Veja também
-----------

Adicionando um hitmap no topo de uma imagem (en-US)

Image maps consiste em um mecanismo que torna diferentes partes de uma imagem em uma forma de acesso para outros lugares ou coisas (pense em um mapa mundi que apresenta informações sobre o país em que você clicou em cima). Essa técnica pode ser útil as vezes.

Web literacy basics 2

An excellent Mozilla foundation course that explores and tests some of the skills talked about in the *Multimedia and embedding* module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open.


Tabelas em HTML - Aprendendo desenvolvimento web

Tabelas em HTML
===============

Uma tarefa muito comum em HTML é estruturar os dados tabulares, e há vários elementos e atributos próprios para essa finalidade. Em conjunto com a linguagem CSS para estilização, o HTML torna fácil a exibição de tabelas com informação na Web, tais como o seu plano de lições escolares, o horário na sua piscina local, ou estatísticas sobre os seus dinossauros favoritos ou seu time de futebol favorito. Este módulo te guia por tudo que você precisa saber sobre a estruturação de dados tabulares utilizando o HTML.

Pré-requisitos
--------------

Antes de iniciar este módulo, você deverá ter domínio dos básicos de HTML — consulte Introdução ao HTML.

**Nota:** se está utilizando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar os seus próprios arquivos, pode testar a maioria dos exemplos de código num programa de codificação on-line, tais como JSBin ou Thimble.

Guias
-----

Este módulo contém os seguintes artigos:

HTML - o básico sobre tabelas

Este artigo apresenta as tabelas HTML, cobrindo o essencial, tal como linhas e células, cabeçalhos, como extender células por múltiplas colunas e linhas, e como agrupar todas as células numa coluna para efeitos de estilo.

HTML - funcionalidades avançadas de tabelas e acessibilidade

No segundo artigo deste módulo, nós vamos ver algumas funcionalidades mais avançadas das tabelas HTML — tais como legendas/resumos e agrupar as suas filas no cabeçalho da tabela (head), seções de corpo (body) e rodapé (footer) — bem como, veremos sobre a acessibilidade das tabelas para os utilizadores deficientes visuais .

Exercícios
----------

Estruturar dados sobre planetas

Na nossa avaliação sobre tabelas em HTML, vamos fornecer alguns dados sobre os planetas do nosso sistema solar, para que possa estruturá-los numa tabela HTML.


Use HTML para resolver problemas comuns - Aprendendo desenvolvimento web

Use HTML para resolver problemas comuns
=======================================

Os links a seguir apontam para soluções de problemas comuns que você precisará resolver utilizando HTML.

### Estrutura Básica

A aplicação mais básica de HTML é na estrutura de um documento. Se você está começando no HTML, deve começar por aqui.

* Como criar um documento básico HTML
* Como separar uma página web em seções lógicas (en-US)
* Como configurar uma estrutura adequada de cabeçalhos e parágrafos
### Semântica básica em nível de texto

O HTML se especializou em fornecer informação semântica para um documento, portanto o HTML responde muitas questões que você talvez tenha sobre a melhor maneira de passar sua mensagem em um documento.

* Como criar uma lista de itens com HTML
* Como destacar ou enfatizar conteúdo
* Como indicar que um texto é importante
* Como mostrar código de computador com HTML
* Como adicionar anotações em imagens e figuras
* Como assinalar abreviaturas e torná-las inteligíveis
* Como adicionar citações em páginas web
* Como definir termos com HTML (en-US)
### Hiperlinks

Uma das principais atribuições do HTML é tornar a navegação mais fácil com hiperlinks (en-US), que podem ser usados de diferentes formas:

* Como criar um hiperlink
* Como criar um menu de navegação com HTML
### Imagens & multimídia

* Como adicionar imagens em uma página web
* Como adicionar conteúdo de vídeo em uma página web
* Como adicionar conteúdo de áudio em uma página web
### Scripts & estilos

O HTML só configura a estrutura do documento. Para resolver problemas de apresentação, use o CSS ou use scripts para tornar sua página interativa.

* Como usar CSS em uma página web
* Como usar JavaScript em uma página web (en-US)
### Conteúdo embutido

* Como embutir uma página web dentro de outra página web
* Como adicionar conteúdo em Flash dentro de uma página
Problemas incomuns ou avançados
-------------------------------

Além do básico, o HTML é muito rico e oferece recursos avançados para resolver problemas complexos. Estes artigos lhe ajudam a lidar com casos de uso menos comuns que você possa encontrar:

### Formulários

Formulários são uma estrutura complexa em HTML, criada para enviar dados de uma página web para um servidor web. Nós lhe encorajamos a conhecer nosso guia completo. Eis os tópicos onde você deve começar:

* Como criar um formulário Web simples (en-US)
* Como estruturar um formulário Web
### Informação tabular

Algumas informações, chamadas de dados tabulares, precisam ser organizadas em tabelas com colunas e linhas. Esta é uma das estruturas HTML mais complexas, e dominá-la não é fácil:

* Como criar uma planilha de dados
* Como tornar as tabelas HTML acessíveis
* Como otimizar a renderização de tabelas HTML
### Representação de dados

* Como representar valores numéricos em HTML
* Como usar atributos de dados
* Como associar conteúdo legível por humanos com estruturas arbitrárias de dados
### Interatividade

* Como criar conteúdo recolhível em HTML
* Como adicionar menus contextuais em uma página web
* Como criar caixas de diálogo em HTML
### Semântica avançada de texto

* Como controlar quebras de linha em HTML
* Como destacar mudanças (texto adicionado ou removido)
### Imagens & multimídia avançados

* Como adicionar imagens responsivas em uma página web
* Como adicionar imagens vetoriais em uma página web
* Como adicionar um mapa de links em uma imagem (en-US)
### Internacionalização

HTML não é unilíngue. A linguagem fornece ferramentas para lidar com problemas comuns de internacionalização.

* Como adicionar múltiplos idiomas em uma única página web
* Como lidar com caracteres ruby em japonês
* Como mostrar data e hora em HTML
### Performance

* Como criar páginas HTML que carregam rápido


Introdução ao HTML - Aprendendo desenvolvimento web

Introdução ao HTML
==================

Em sua essência, HTML é uma linguagem bastante simples composta de elementos, que podem ser aplicados a pedaços de texto para dar-lhes significado diferente em um documento (é um parágrafo? é uma lista de seleção? é parte de uma tabela?), estrutura um documento em seções lógicas (Possui um cabeçalho? Três colunas de conteúdo? Um menu de navegação?) e incorpora conteúdo como imagens e vídeos em uma página. Este módulo irá introduzir os dois primeiros e apresentar conceitos fundamentais e a sintaxe que você precisa saber para entender o HTML.

Pré-requisitos
--------------

Antes de iniciar este módulo, você não precisa de nenhum conhecimento prévio sobre HTML, mas deve ter pelo menos uma familiaridade básica em utilizar computadores e utilizar a web passivamente (por exemplo, apenas navegando e consumindo conteúdo). Você deve ter um ambiente de trabalho básico configurado (como detalhado em Instalando os programas básicos) e entender como criar e gerenciar arquivos (como detalhado em Lidando com arquivos). Ambos são partes do nosso módulo completo para iniciantes indrodução à web.

**Nota:** **Nota**: Se você estiver trabalhando em um computador/tablet/outro dispositivo que não permita a criação de seus próprios arquivos, você pode testar (a maior parte) dos exemplos de códigos em um programa de codificação online como JSBin ou Glitch.

Guias
-----

Este módulo contém os seguintes artigos, que te levarão por toda teoria básica do HTML e fornecerão muitas oportunidades para você testar algumas habilidades.

Iniciando com o HTML

Abrange todo o básico do HTML, para você iniciar - nós definimos elementos, atributos e outros termos importantes, e mostramos onde eles se encaixam na linguagem. Também mostramos como uma página HTML típica e um elemento HTML é estruturado, e explicamos outros recursos básicos importantes da linguagem. Ao longo do caminho, nós brincaremos com algum HTML, para fazer você se interessar!

O que está no cabeçalho? Metadados no HTML

O cabeçalho (en-US) de um documento HTML é a parte que **não é** mostrada no navegador web quando a página é carregada. Ele contém informações como o `<title>` da página, links para CSS (se você quiser estilizar seu conteúdo HTML com CSS), links para favicons personalizados e metadados (que são dados sobre o HTML, tais como quem o escreveu e palavras-chaves importantes que descrevem o documento).

Fundamentos do texto HTML

Uma das principais funções do HTML é dar significado ao texto (também conhecido como semântica), para que o navegador saiba como exibi-lo corretamente. Este artigo analisa como usar HTML para dividir um bloco de texto em uma estrutura de títulos e parágrafos, adicionar ênfase/importância nas palavras, criar listas e muito mais.

Criando hiperlinks

Os hiperlinks são realmente importantes — eles são o que faz da web o que ela é. Este artigo mostra a sintaxe necessária para criar um link e discute as melhores práticas para links.

Formatação de texto avançada

Existem muitos outros elementos em HTML para formatar o texto, que não apresentamos no artigo sobre os Fundamentos do texto em HTML. Os elementos aqui são menos conhecidos, mas ainda úteis para se conhecer. Neste artigo, você aprenderá sobre marcação de citações, listas de descrições, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contatos e muito mais.

Estrutura dos documentos e do site

Além de definir partes individuais de sua página (como "um parágrafo" ou "uma imagem"), o HTML também é usado para definir as áreas do seu site (como "o cabeçalho", "o menu de navegação" ou "a coluna de conteúdo principal"). Este artigo analisa como planejar uma estrutura básica de site e como escrever o HTML para representar esta estrutura.

Depuração HTML

Escrever HTML é tranquilo, mas e se algo der errado, e você não conseguir descobrir onde o erro está no código? Este artigo irá apresentar algumas ferramentas que podem ajudar.

Avaliações
----------

As avaliações a seguir testarão sua compreensão dos princípios básicos de HTML abordados nos guias acima.

Marcando uma carta

Todos aprendemos a escrever uma carta mais cedo ou mais tarde; também é um exemplo útil para testar habilidades de formatação de texto. Nesta avaliação, você receberá uma carta para marcar.

Estruturando a página de conteúdo

Essa avaliação testa sua capacidade de utilizar HTML para estruturar uma página simples de conteúdo, contendo um cabeçalho, um rodapé, um menu de navegação, o conteúdo principal e uma barra lateral.

Veja também
-----------

Noções básica sobre alfabetização na web 1 (em inglês)

Um excelente curso da Fundação Mozilla que explora e testa muitas das habilidades discutidas no Módulo *Introdução ao HTML.* Os estudantes se familiarizam com a leitura, a redação e a participação na web neste módulo de seis partes. Descubra as bases da web através da produção e da colaboração.


HTML table basics - Aprendendo desenvolvimento web

HTML table basics
=================

* Menu: Tabelas
* Próxima

Este artigo é uma introdução às tabelas HTML, cobrindo o básico, como linhas e células, cabeçalhos, fazendo as células ocuparem várias colunas e linhas e como agrupar todas as células em uma coluna para fins de estilo.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Noções básicas de HTML (consulte
 Introdução ao HTML
 ).
  |
| Objetivo: | Para obter familiaridade básica com tabelas HTML. |

O que é uma tabela?
-------------------

Uma tabela é um conjunto estruturado de dados composto de linhas e colunas (**dados tabulares**). Uma tabela permite consultar de forma rápida e fácil valores que indicam algum tipo de conexão entre diferentes tipos de dados, por exemplo, uma pessoa e sua idade, ou um dia da semana, ou os horários de uma piscina local.

![Uma tabela de amostra mostrando nomes e idades de algumas pessoas - Chris 38, Dennis 45, Sarah 29, Karen 47.](/pt-BR/docs/Learn/HTML/Tables/Basics/numbers-table.png)

![Um cronograma de natação mostrando uma tabela de dados de amostra](/pt-BR/docs/Learn/HTML/Tables/Basics/swimming-timetable.png)

As tabelas são muito comumente usadas na sociedade humana, e têm sido por muito tempo, como evidenciado por este documento do Censo dos EUA de 1800:

![Um documento de pergaminho muito antigo; os dados não são facilmente legíveis, mas mostram claramente uma tabela de dados sendo usada.](/pt-BR/docs/Learn/HTML/Tables/Basics/1800-census.jpg)

Portanto, não é de se admirar que os criadores do HTML tenham fornecido um meio de estruturar e apresentar dados tabulares na web.

### Como funciona uma tabela?

Tabelas possuem estrutura. As informações são facilmente interpretadas fazendo associações visuais entre os cabeçalhos de linha e coluna. Veja a tabela abaixo, por exemplo, e encontre um gigante gasoso Júpiter com 62 luas. Você pode encontrar a resposta associando os cabeçalhos de linha e coluna relevantes.

 Dados sobre os planetas do nosso sistema solar (fatos planetários retirados
 da
 Planilha Planetária da Nasa - Métrica
 .
 |  | Nome | Massa (10 24 kg) | Diâmetro (km) | Densidade (kg/m 3 ) | Gravidade (m/s2) | Duração do dia (hours) | Distancia do Sol (106km) | Temperatura Média (°C) | Fases da Lua | Anotações |
| Planetas Terrestres | Mercúrio | 0.330 | 4,879 | 5427 | 3.7 | 4222.6 | 57.9 | 167 | 0 | Proximidade do Sol |
| Venus | 4.87 | 12,104 | 5243 | 8.9 | 2802.0 | 108.2 | 464 | 0 |  |
| Terra | 5.97 | 12,756 | 5514 | 9.8 | 24.0 | 149.6 | 15 | 1 | Nosso Planeta |
| Marte | 0.642 | 6,792 | 3933 | 3.7 | 24.7 | 227.9 | -65 | 2 | O Planeta Vermelho |
| Planetas Jovianos | Gigantes Gasosos | Jupiter | 1898 | 142,984 | 1326 | 23.1 | 9.9 | 778.6 | -110 | 67 | O Maior Planeta |
| Saturno | 568 | 120,536 | 687 | 9.0 | 10.7 | 1433.5 | -140 | 62 |  |
| Gigante de gelo | Urano | 86.8 | 51,118 | 1271 | 8.7 | 17.2 | 2872.5 | -195 | 27 |  |
| Netuno | 102 | 49,528 | 1638 | 11.0 | 16.1 | 4495.1 | -200 | 14 |  |
| Planeta Anão | Plutão | 0.0146 | 2,370 | 2095 | 0.7 | 153.3 | 5906.4 | -225 | 5 |
 Desconsiderado como planeta desde 2006, mas isto
 permanece controverso.
  |

Quando criadas corretamente, até pessoas cegas podem interpretar dados tabulares em uma tabela HTML - uma tabela HTML bem sucedida deve melhorar a experiência tanto de usuários com deficiências visuais quanto daqueles capazes de ver.

### Estilizando tabelas

Você também pode dar uma olhada neste exemplo real no GitHub! Uma coisa que você perceberá é que essa tabela parece um pouco mais legível lá — isso ocorre porque a tabela que você vê acima nesta página tem o mínimo de estilização, enquanto a versão do GitHub tem um CSS expressivo aplicado.

Não se iluda; para que tabelas sejam de fato efetivas na web, você precisa fornecer algumas informações de estilo com CSS, bem como uma boa estrutura sólida com HTML. Neste módulo nos iremos focar na parte do HTML; Para saber mais sobre a parte do CSS você deve visitar nosso artigo Estilizando Tabelas (en-US) depois que você finalizar este.

Nós não focaremos em CSS neste módulo, mas nós forneceremos uma mínima folha de estilo CSS para você usar que fará suas tabelas mais legíveis que o padrão que teria sem nenhuma estilização. Você pode procurar a folha de estilo aqui, e você pode também procurar um template HTML que aplica a folha de estilo — juntos eles serão um bom ponto de partida para serem implementados com tabelas HTML.

### Quando NÃO utilizar tabelas HTML?

Tabelas HTML devem ser usadas para exibir dados tabulares - foram projetadas para isso. Infelizmente, muitas pessoas se acostumaram a usar tabelas HTML para diagramar páginas web, por exemplo, uma linha para conter o cabeçalho, outra linha para conter as colunas de conteúdo, uma linha para conter o rodapé, etc. Mais detalhes e um exemplo podem ser encontrados em Page Layouts de nosso Accessibility Learning Module. Isso era muito comum porque o suporte à CCS entre diferentes navegadores era muito ruim; tabelas sendo usadas para leiaute não são comuns nos dias de hoje mas ainda podem ser encontradas em alguns cantos da web.

Em resumo, usar tabelas para leiuate no lugar de usar técnicas de leiaute CSS é uma péssima ideia. Os principais motivos são os seguintes:

1. **Tabelas usadas para leiuate reduzem a accessibilidade para usuários com deficiência visual**: Leitores de tela (en-US), usados por pessoas cegas, interpretam as tags que existem na página HTML e leem em voz alta os conteúdos para os usuários. Como as tabelas não são adequadas para leiaute, e a marcação é mais complexa que aquela feita com técnicas de leiuate de CSS, a leitura em voz alta resultante dos leitores de tela será confusa para os usuários.
2. **Tabelas produzem uma sopa de tags**: Como foi dito acima, tabelas usadas para leiaute geralmente envolvem estruturas de marcação mais complexas que as técnicas apropriadas para leiaute. Isso pode resultar em código mais difícil de escrever, de manter e de depurar.
3. **Tabelas não são automaticamente responsivas**: Quando usamos contêineres apropriados para fazer o leiuate (como as `<header>`, `<section>`, `<article>`, ou `<div>`), a largura por padrão é 100% da largura do elemento pai. Tabelas, no entanto, são dimensionadas por padrão de acordo com o seu conteúdo, de modo que medidas extras são necessárias para que as tabelas usadas para leiaute de estilos funcionem efetivamente entre os diversos dispositivos.
Active learning: Criar sua primeira tabela
------------------------------------------

Falamos o suficiente sobre teoria de tabelas, então, vamos partir para um exemplo prático e construir uma tabela simples.

1. Antes de tudo, faça uma cópia local de blank-template.html e minimal-table.css dentro de um novo diretório na sua máquina local.
2. O conteúdo de cada tabela fica contido entre as duas tags : **`<table></table>`**. Acrescente-as dentro da seção body de seu HTML.
3. O menor contêiner dentro de uma tabela é uma célula da tabela, que é criada por um elemento **`<td>` (en-US)** ('td' significa 'dados da tabela'). Adicione as linhas seguintes dentro das tags da tabela:

```html
<td>Hi, I'm your first cell.</td>
```

4. Se quisermos uma linha da tabela com quatro células, precisamos copiar essas tags três vezes. Altere o conteúdo da sua tabela para ficar dessa maneira:

```html
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
```

Como podemos ver, as células não são posicionadas uma abaixo da outra, em vez disso elas são automaticamente alinhadas umas com as outras na mesma linha. Cada elemento `<td>` cria uma única célula que juntas formam a primeira linha. Cada célula adicionada faz a linha crescer e se tornar mais longa.

Para evitar que a linha cresça e começar a posicionar células em uma segunda linha, precisamos usar o elemento **`<tr>` (en-US)** ('tr' significa 'linha da tabela'). Vamos investigar isso agora.

1. Coloque as quatro células recém criadas dentro das tags `<tr>` tags, dessa maneira:

```html
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
```

2. Agora que uma linha foi criada, vamos tentar criar mais uma ou duas linhas — cada linha precisa estar cercada por um elemento `<tr>`, com cada célula contida dentro de um elemento `<td>`.

Isso deve resultar em uma tabela que vai parecer com algo assim:

| Hi, I'm your first cell. | I'm your second cell. | I'm your third cell. | I'm your fourth cell. |
| --- | --- | --- | --- |
| Second row, first cell. | Cell 2. | Cell 3. | Cell 4. |

**Nota:** Você também pode encontrar esse código no GitHub em simple-table.html (veja ao vivo também).

Adicionar cabeçalhos com o elemento <th>
----------------------------------------

Agora vamos voltar nossa atenção para os cabeçalhos das tabelas — células especiais que aparecem no início de uma linha ou coluna e definem o tipo de dado que a linha ou coluna contém (como exemplo, veja as células de "Person" e "Age" no primeiro exemplo mostrado nesse artigo). Para ilustrar como os cabeçalhos são úteis, dê uma olhada na seguinte tabela de exemplo. Primeiro o código fonte:

```html
<table>
  <tr>
    <td> </td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>
```

Agora veja como a tabela é exibida:

|  | Knocky | Flor | Ella | Juan |
| --- | --- | --- | --- | --- |
| Breed | Jack Russell | Poodle | Streetdog | Cocker Spaniel |
| Age | 16 | 9 | 10 | 5 |
| Owner | Mother-in-law | Me | Me | Sister-in-law |
| Eating Habits | Eats everyone's leftovers | Nibbles at food | Hearty eater | Will eat till he explodes |

Aqui, o problema é que mesmo que possamos entender o que está acontecendo, não é tão fácil fazer uma referência cruzada dos dados, como poderia ser. Se os cabeçalhos das colunas e linhas se destacassem de alguma maneira, seria bem melhor.

### Aprendizado Ativo

Vamos tentar melhorar essa tabela.

1. Primeiro, faça uma cópia local dos arquivos dogs-table.html e minimal-table.css dentro de um novo diretório da sua máquina local. O HTML contém o mesmo exemplo de Dogs visto acima.
2. Para reconhecer os cabeçalhos de uma tabela como cabeçalhos, tanto visualmente como semanticamente, podemos usar o elemento **`<th>`** ('th' significa 'cabeçalho da tabela'). Ele funciona da mesma maneira que um `<td>`, exceto que denota um cabeçalho, e não uma célula normal. Abra o arquivo HTML, e mude todos os elementos `<td>` que envolvem os cabeçalhos das tabelas para o elemento `<th>`.
3. Salve o HTML e abra em um navegador, e veja que os cabeçalhos agora se parecem mais com cabeçalhos.

**Nota:** Encontre esse exemplo pronto em dogs-table-fixed.html no GitHub (veja ao vivo também).

### Por que os cabeçalhos são úteis?

Já respondemos parcialmente essa pergunta - fica mais fácil encontrar os dados que estamos procurando quando o cabeçalho se destaca claramente, e o design simplesmente aparece mais bonito.

**Nota:** Cabeçalhos de tabelas têm alguns estilos padronizados — eles são fortes e centralizados mesmo que você não use nenhum estilo para a tabela, para ajudar a destacá-los.

Cabeçalhos de tabelas também têm um benefício extra - juntamente com o atributo `scope` (que vamos aprender no próximo artigo), eles permitem tornar as tabelas mais acessíveis associando cada cabeçalho com todos os dados em uma mesma linha ou coluna. Leitores de tela podem então ler em voz alta uma coluna ou linha inteira de dados de uma vez só, o que é muito mais útil.

Permitir que células se estendam por múltiplas linhas ou colunas
----------------------------------------------------------------

Algumas vezes, queremos que as células se estendam para múltiplas linhas ou colunas. Veja esse simples exemplo a seguir, que mostra os nomes de animais comuns. Em alguns casos, queremos mostrar os nomes dos machos e fêmeas perto do nome do animal. Em outros não queremos isso, e nesse caso queremos que o nome do animal se extenda para a tabela inteira.

A marcação inicial se parece assim:

```html
<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>
```

Mas o resultado final não é aquilo que queremos:

| Animals |  |
| --- | --- |
| Hippopotamus |  |
| Horse | Mare |
| Stallion |  |
| Crocodile |  |
| Chicken | Hen |
| Rooster |  |

Queremos uma maneira de fazer "Animals", "Hippopotamus", e "Crocodile" se estenderem por duas colunas, e "Horse" e "Chicken" se estenderem para baixo por duas linhas. Por sorte, os cabeçalhos das tabelas e células têm os atributos `colspan` e `rowspan`, que nos permite fazer esses ajustes. Ambos aceitam um valor de número sem unidade, que iguala o número de linhas e colunas que deseja estender. Por exemplo, `colspan="2"` faz com que uma célula se estender por duas colunas.

Vamos usar `colspan` e `rowspan` para melhorar essa tabela.

1. Primeiro, faça uma cópia local dos arquivos animals-table.html and minimal-table.css e salve dentro de um novo diretório na sua máquina local. O arquivo HTML contém o mesmo exemplo de animais visto acima.
2. Em seguida, use `colspan` para fazer "Animals", "Hippopotamus", e "Crocodile" se estender por duas colunas.
3. Por fim, use `rowspan` para fazer "Horse" e "Chicken" se estender por duas linhas.
4. Salve e abra o código em um navegador para ver a melhoria.

**Nota:** Encontre o exemplo pronto em animals-table-fixed.html no GitHub (veja ao vivo também).

Provendo estilos comuns para colunas
------------------------------------

Existe uma última característica da qual vamos falar nesse artigo, antes de prosseguir. HTML tem um método de definir informação de estilo para uma coluna inteira de dados de uma só vez — o elemento **`<col>` (en-US)** e **`<colgroup>` (en-US)**. Eles existem por que pode ser um pouco entediante e ineficiente ter de especificar o estilo de colunas - temos de especificar as informações de estilo para *cada* `<td>` ou `<th>` da coluna, ou usar um seletor complexo como o `:nth-child()` (en-US).

**Nota:** Estilizar colunas dessa maneira está limitada para umas poucas propriedades: `border` (en-US), `background`, `width`, e `visibility`. Para ajustar outras propriedades devemos aplicar o estilo para cada `<td>` ou `<th>` da coluna, ou usar um seletor complexo como um `:nth-child()` (en-US).

Veja o simples exemplo a seguir:

```html
<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>
```

Que exibe o seguinte resultado:

| Data 1 | Data 2 |
| --- | --- |
| Calcutta | Orange |
| Robots | Jazz |

Não é o ideal, uma vez que temos de repetir os dados de estilo em todas as três células da coluna (provavelmente teríamos uma `class` configurada para as três células em um projeto de verdade e especificaríamos o estilo em uma folha de estilo separada). Em vez disso, podemos especificar a informação uma única vez, no elemento `<col>`. Os elementos `<col>` são especificados dentro de um contêiner `<colgroup>` abaixo da tag de abertura `<table>`. Podemos criar o mesmo efeito que vimos acima espeficando a tabela da seguinte maneira:

```html
<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>
```

De modo efetivo, estamos definindo duas "colunas de estilo", cada uma espeficando a informação de estilo para cada coluna. Não estamos estilizando a primeira coluna, mas ainda assim temos de incluir um elemento `<col>` vazio - do contrário, o estilo simplesmente seria aplicado para a primeira coluna.

Para aplicar as informações de estilo para as duas colunas, podemos incluir apenas um elemento `<col>` contendo um atributo span, dessa maneira:

```html
<colgroup>
  <col style="background-color: yellow" span="2" />
</colgroup>
```

Como `colspan` e `rowspan`, `span` aceita um valor de número sem unidade que especifica o número de colunas sobre as quais desejamos aplicar o estilo.

### Aprendizado ativo: colgroup e col

Agora é hora de tentar sozinho.

Abaixo encontram-se os horários de uma professora de línguas. Na sexta-feira ela tem uma nova aula ensinando holandês o dia todo, mas ela também ensina alemão alguns poucos períodos das terças-feiras e quintas-feiras. Ela quer destacar as colunas contendo os dias que têm aula.

Recrie a tabela seguindo os passos abaixo.

1. Primeiro, faça uma cópia local do arquivo timetable.html dentro de um novo diretório na sua máquina local. O HTML contém a mesma tabela que viu acima, porém sem os dados de estilo.
2. Acrescente um elemento `<colgroup>` na parte superior da tabela, bem abaixo da tag `<table>`, dentro da qual você pode adicionar os elementos `<col>` (veja os passos que faltam abaixo).
3. As duas primeiras colunas devem ser deixadas sem nenhum estilo.
4. Adicione uma cor de fundo para a terceira coluna. O valor do atributo `style` é `background-color:#97DB9A;`
5. Ajuste uma largura diferente para a quarta coluna. O valor do atributo `style` é `width: 42px;`
6. Adicione uma cor de fundo para a quinta coluna. O valor do atributo `style` é `background-color: #97DB9A;`
7. Adicione uma cor de fundo diferente e uma borda para a sexta coluna, para indicar que este é um dia especial e ela está dando uma nova aula. Os valores dos atributos `style` são `background-color:#DCC48E; border:4px solid #C1437A;`
8. Os dois últimos dias são dias livres, então apenas ajuste para nenhuma cor de fundo, mas defina uma largura; o valor do atributo `style` é `width: 42px;`

Veja se consegue seguir o exemplo. Se você tiver dúvidas ou quiser verificar seu trabalho, pode encontrar nossa versão no GitHub como schedule-fixed.html ( veja ao vivo também ).

Resumo
------

Isso envolve o básico das tabelas HTML. No próximo artigo, veremos alguns recursos de mesa um pouco mais avançados e começaremos a pensar como eles são acessíveis para pessoas com deficiência visual.

* Menu: Tabelas
* Próxima
Neste módulo
------------

* Noções básicas de tabela HTML
* Recursos avançados e acessibilidade da tabela HTML (en-US)
* Estruturação de dados do planeta (en-US)