Giter Site home page Giter Site logo

reactjs / pt-br.react.dev Goto Github PK

View Code? Open in Web Editor NEW
464.0 31.0 294.0 148.68 MB

🇧🇷 React documentation website in Portuguese (Brazil)

Home Page: https://pt-br.react.dev

License: Creative Commons Attribution 4.0 International

JavaScript 32.56% CSS 7.39% HTML 0.28% Shell 0.01% TypeScript 59.77%
react brasil portugues

pt-br.react.dev's Introduction

pt-br.react.dev

This repo contains the source code and documentation powering pt-br.react.dev.

Getting started

Prerequisites

  1. Git
  2. Node: any 12.x version starting with v12.0.0 or greater
  3. Yarn: See Yarn website for installation instructions
  4. A fork of the repo (for any contributions)
  5. A clone of the pt-br.react.dev repo on your local machine

Installation

  1. cd pt-br.react.dev to go into the project root
  2. yarn to install the website's npm dependencies

Running locally

  1. yarn dev to start the development server (powered by Next.js)
  2. open http://localhost:3000 to open the site in your favorite browser

Contributing

Guidelines

The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the contributing guidelines for the appropriate sections.

Create a branch

  1. git checkout main from any folder in your local pt-br.react.dev repository
  2. git pull origin main to ensure you have the latest main code
  3. git checkout -b the-name-of-my-branch (replacing the-name-of-my-branch with a suitable name) to create a branch

Make the change

  1. Follow the "Running locally" instructions
  2. Save the files and check in the browser
  3. Changes to React components in src will hot-reload
  4. Changes to markdown files in content will hot-reload
  5. If working with plugins, you may need to remove the .cache directory and restart the server

Test the change

  1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
  2. Run yarn check-all. (This will run Prettier, ESLint and validate types.)

Push it

  1. git add -A && git commit -m "My message" (replacing My message with a commit message, such as Fix header logo on Android) to stage and commit your changes
  2. git push my-fork-name the-name-of-my-branch
  3. Go to the pt-br.react.dev repo and you should see recently pushed branches.
  4. Follow GitHub's instructions.
  5. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.

Translation

If you are interested in translating pt-br.react.dev, please see the current translation efforts here.

License

Content submitted to pt-br.react.dev is CC-BY-4.0 licensed, as found in the LICENSE-DOCS.md file.

pt-br.react.dev's People

Contributors

acdlite avatar alexkrolick avatar bvaughn avatar cezaraugusto avatar chenglou avatar danilowoz avatar dependabot[bot] avatar gaearon avatar jcserracampos avatar jhonmike avatar jimfb avatar koba04 avatar kohei-takata avatar lex111 avatar marocchino avatar mcsheffrey avatar petehunt avatar react-translations-bot avatar reactjs-translation-bot avatar rickhanlonii avatar robhrt7 avatar sebmarkbage avatar smikitky avatar sophiebits avatar tesseralis avatar tibuurcio avatar vjeux avatar yangshun avatar zpao avatar zqran avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pt-br.react.dev's Issues

Brazilian Portuguese Translation Final Tasks!

Congratulations!

You all are almost done translating the React docs into Portuguese! There are couple more errands to do before we can mark the project as "completed"

  • Replace "reactjs.org" to "pt-br.reactjs.org" in the following places:
    • package.json
    • site-constants.js
    • gatsby-config.js
    • MarkdownPage (the link href in "Edit this page")
  • Change html.js to have the attribute lang="pt-BR"
  • Go over each section in the site to:
    • Make sure there are no formatting errors (dangling markdown/html tags) or untranslated English
    • Make sure the sections and style are consistent.
  • Change the DocSearch API key. One of the maintainers needs to sign up for DocSearch (#132)

We're almost there everyone!

GitHub suggestion bug

Galera, só pra compartilhar com vocês:

Pessoal que está revisando, perceberam que o suggestion do GitHub as vezes não está fazendo o highlight correto das diffs?

Estou revisando esse PR: https://github.com/reactjs/pt-BR.reactjs.org/pull/72/files

E se vc olharem, algumas linhas não aparecem a diff na sugestão. Veja a linha 64, por exemplo: https://github.com/reactjs/pt-BR.reactjs.org/pull/72/files#r255440979

Isso tá acontecendo com vocês também?

Sabem se tem algum lugar que podemos reportar o bug? Eu não achei nada de muito diferente nessas linhas que pudesse estar causando isso, o único padrão que parece emergir é que todas são relativamente longas (ficam com mais de 6 linhas na interface).

Progresso da tradução das páginas principais

Olá pessoal!

Como sugerido pela tesseralis no grupo do slack, podemos estar publicando a documentação em pt-BR em breve. Pra isso precisamos finalizar as páginas que estão faltando do core da documentação. Tomei a iniciativa de abrir essa issue com objetivo de marcar as pessoas que se propuseram a contribuir pra saber se elas ainda tem disponibilidade de traduzir as páginas que solicitaram. Sabemos que a vida de todo dev é bem corrida! Caso a pessoa responsável não tenha mais disponibilidade, a gente pode dar a oportunidade a outros contribuidores 😄

Estou listando abaixo as páginas pendentes de PR e marcando as pessoas que se propuseram a contribuir com a tradução. Se você é um desses contribuidores, por favor informa aqui que ainda tem interesse em continuar responsável pela página!

Também é possível dividir a carga de trabalho atribuindo páginas muito grandes pra mais de uma pessoa, como foi o caso da tradução do tutorial. Se esse for o caso comenta aqui pra ver se mais alguém pode ajudar.

@reactjs/reactjs-org-portuguese-brazil-translation

Progresso de tradução do Blog

Blog

Priorizar ordem cronológica descendente - Vamos tentar não deixar gaps de um documento para o outro

Pessoal os posts antes de 2016, não vou listar para traduzirmos, mas caso alguém encontre um post que ache importante traduzir pode comentar aqui ou apenas abrir um PR com a tradução

[New] Tradução Concurrent Mode e Release Channels

Novas páginas que foram adicionadas na sincronização #351:

Comente abaixo qual doc gostaria de traduzir que irei reserva-la.

Tradução: Componente LayoutHeader

Olá pessoal,
Resolvi trazer alguns pontos pois acredito que sejam importantes a serem discutidos antes de prosseguir com a tradução do componente LayoutHeader.

  1. Existem 4 links principais no Header: Docs, Tutorial, Community e Blog. O problema é que dependendo o termo que for utilizado na tradução, pode prejudicar a exibição, por exemplo, traduzir Docs para Documentação (acréscimo de 8 caracteres).
  2. Seguindo este mesmo ponto, o placeholder da busca possui o termo "Search docs", como isso poderia ser traduzido de uma forma enxuta?

Para exemplificar estes pontos, seguem abaixo algumas imagens (simulando o tamanho de
tela dos iPhones 6/7/8).

Original:

header-original
header-original-search

Traduzido:

header-translated

Note que existe uma barra de rolagem embaixo dos links. Será que os usuários reparariam nela e conseguiriam navegar de forma apropriada? Alguma sugestão?

por via de regra, palavras nao traduzidas deveriam ser postas em italico?

no PR #72 houve um impasse em relacao a traducao do termo "hooks". Em geral pedimos para colocar em italico as palavras em ingles. Entretanto, palavras como "hooks", "state", "props" e outras sao do vocabulario do React, e em muitas revisoes feitas por mim eu ignorei o italico nelas.

nao tenho uma opiniao sobre se deveriamos colocar todas as palavras em lingua inglesa/nao traduzidas em italico ou se deveria se basear em alguma regra. contando que isso seja documentado no glossario.

cc @reactjs/reactjs-org-portuguese-brazil-translation

reactjs - Hi Please help me to add row dynamically when the user clicks add row.

Hi Please help me to add row dynamically when the user clicks add row.

Here is the code.

import React from 'react';
import { Table, Menu, Icon, Button } from 'semantic-ui-react';
import { get } from 'axios';
import times from 'lodash.times';
import { Helmet } from 'react-helmet';
import Page from '../Shared/Page';
import Popup from '../Shared/popup';
import '../../assets/css/custom.css';

const TOTAL_PER_PAGE = 10;
class Module extends React.Component {
constructor(props) {
super(props);
this.state = { showPopup: false};
this.state = {
users: [],
page: 0,
totalPages: 0,
user:{},
userMake : "",
userModel : "",
userPrice : ""
};
this.incrementPage = this.incrementPage.bind(this);
this.decrementPage = this.decrementPage.bind(this);
this.setPage = this.setPage.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.handleClick = this.handleClick.bind(this);

}
componentDidMount() {
this.getUsers();
}
componentWillReceiveProps({ location = {} }) {
if (location.pathname === '/users' && location.pathname !== this.props.location.pathname) {
this.getUsers();
}
}
getUsers() {
get('https://api.myjson.com/bins/15psn9')
.then(({ data }) => {
let users = data;
for(let index = 0; index < users.length; index++)
{
users[index].id = index + 1;
}
const totalPages = Math.ceil(users.length / TOTAL_PER_PAGE);
this.setState({
users: data,
page: 0,
totalPages
});
});
}
setPage(page) {
return () => {
this.setState({ page });
};
}
handleClick(item) {
this.state.user = item
this.setState({
user : item,
showPopup: !this.state.showPopup
});
}
decrementPage() {
const { page } = this.state;
this.setState({ page: page - 1 });
}
incrementPage() {
const { page } = this.state;
this.setState({ page: page + 1 });
}
handleDelete(userId) {
const { users } = this.state;
this.setState({
});
}
render() {
const { users, page, totalPages, user } = this.state;
const startIndex = page * TOTAL_PER_PAGE;
return (

<title>CMS | Users</title>

<Table.Header >
<Table.Row >
<Table.HeaderCell >Name</Table.HeaderCell>
<Table.HeaderCell>Email</Table.HeaderCell>
<Table.HeaderCell>Phone</Table.HeaderCell>
<Table.HeaderCell>Action</Table.HeaderCell>
{/* <Table.HeaderCell>Address</Table.HeaderCell>
<Table.HeaderCell>City</Table.HeaderCell>
<Table.HeaderCell>Zip Code</Table.HeaderCell> /}
</Table.Row>
</Table.Header>
<Table.Body>
{users.slice(startIndex, startIndex + TOTAL_PER_PAGE).map(user =>
(<Table.Row key = {user.id }>
<Table.Cell>{user.make}</Table.Cell>
<Table.Cell>{user.model}</Table.Cell>
<Table.Cell>{user.price}</Table.Cell>
<Table.Cell><button onClick={this.handleClick.bind(this, user)}>Edit

</Table.Cell>
{/ <Table.Cell>{user.address}</Table.Cell>
<Table.Cell>{user.city}</Table.Cell>
<Table.Cell>{user.zip}</Table.Cell> */}
</Table.Row>),
)}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan={8}>


{page !== 0 && <Menu.Item as="a" icon onClick={this.decrementPage}>

</Menu.Item>}
{times(totalPages, n =>
(<Menu.Item as="a" key={n} active={n === page} onClick={this.setPage(n)}>
{n + 1}
</Menu.Item>),
)}
{page !== (totalPages - 1) && <Menu.Item as="a" icon onClick={this.incrementPage}>

</Menu.Item>}

</Table.HeaderCell>
</Table.Row>
</Table.Footer>

New User

{ this.state.showPopup ?

: null}

);

Tradução da documentação para a v16.9.0

Arquivos que precisam de alterações:

Novas páginas:

A ideia é ir editando a issue e relacionando as Issues.

cc: @reactjs/reactjs-org-portuguese-brazil-translation

Portuguese (Brazil) Translation Progress

Maintainer List

For New Translators

To translate a page:

  1. Check that no one else has claimed your page in the checklist and comments below.
  2. Comment below with the name of the page you would like to translate. Take only one page at a time.
  3. Clone this repo, translate your page, and submit a pull request!

Before contributing, read the glossary to understand how to translate various technical and React-specific terms.

Please be prompt with your translations! If you find find that you can't commit any more, let the maintainers know so they can assign the page to someone else.

Discord room

https://discord.gg/Zn4bXAz

For maintainers

When someone volunteers, edit this issue with the username of the volunteer, and with the PR. Ex:

When PRs are merged, make sure to mark that page as completed!

Core Pages

To do before releasing as an "official" translation. Please translate these pages first.

Basics ✅ Completed

API Reference ✅ Completed

Navigation ✅ Completed

These are the navigation links that appears in the sidebar. Possibly wait until
the corresponding sections are translated to do these.

Next Steps

These are the next most important translations, ordered by importance:

Installation ✅ Completed

Hooks ✅ Completed

Everyone is hooked on hooks! People are really excited for these and it would be great for them to be translated.

Warnings ✅ Completed

These are the pages that you get when you click the links in the console (e.g. https://reactjs.org/warnings/dont-call-proptypes.html). People tend to search these, so please don't translate the error message itself.

Advanced Guides ✅ Completed

FAQ ✅ Completed

  • APIs and AJAX (@lazaroalvarenga) (#9)
  • Babel, JSX, and Build Steps (@GleidsonDaniel) (#12)
  • Passing Functions to Components (@negreirosleo) (#16)
  • Component State (@vhfmag) (#129)
  • Styling and CSS (@rhiroyuki) (#36)
  • File Structure (@RodolfoSilva) (#37)
  • Versioning Policy (@elainemattos) (#148)
  • Virtual DOM and Internals (@WeslleyNasRocha) (#159)

Contributing ✅ Completed

Priority: Low

  • How to Contribute (@lhcgoncalves) (#138)
  • Codebase Overview (@lamecksilva) (#43)
  • Implementation Notes (@Luanf) (#146)
  • Design Principles (@moiseshilario) (#60)

Components ✅ Completed

Components in src/components that have some text in them.

Additional Translations

These are not the primary translation targets.

Problema ao clonar no Windows

Aparentemente um dos pacotes depende da libpng-dev, que não está disponível no Win10.

Alguma sugestão de como contornar o problema sem trocar de OS?

Glossary and Style Guide

Style Guide

  • Leave code blocks untranslated. (It is usually OK to translate comments inside them. edit by @cezaraugusto: also strings inside HTML/JSX can also pass but use your best judgement)
  • Links to references (MDN, Wikipedia) should go to the Portuguese version.
  • When referring to React itself, use o React.

Common Translations

Suggestion on words and terms:

Original word/term Suggestion
bug erro
class classe
context contexto
controlled component componente controlado
debugging depuração
functional component componente funcional
key chave
library biblioteca
lowercase minúscula(s)
package pacote
React element Elemento React
React fragment Fragmento React
render renderizar (verb), renderizado (noun)
uncontrolled component componente não controlado

Content that doesn't need translation

  • array
  • arrow function
  • bind
  • bundle
  • bundler
  • camelCase
  • callback
  • DOM
  • framework
  • hook
  • mock
  • portal
  • props
  • ref
  • state
  • string
  • template literal
  • UI
  • log

Revert internal link translations

Some PRs got accepted including internal link translations which we later decided not to translate.

By internal links, we are referring to these:
e.g.

Overview (#overview)

That should be translated to

Visão Geral (#overview)

External links (MDN, Wikipedia, etc.) should link to the Portuguese version, if available.

The task here is to go through this list and check what links have been translated and undo that.

Either a PR for each document or a PR bundle with all reverts are valid and up to the author what to choose

Hooks - Padronizando a introdução

Pessoal, bom dia!

Percebi que a introdução dos arquivos que falam sobre Hook é o mesmo texto em todos os arquivos:

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class

Sendo assim, acho importante padronizarmos para evitar traduções diferentes em cada um dos arquivos.

Já vi algumas diferentes, então sugiro padronizarmos para a seguinte:

Hooks são uma nova adição ao React 16.8. Eles permitem que você use o state e outros recursos do React sem escrever uma classe.

Se você traduziu ou ainda vai traduzir algum arquivo de Hooks, por favor atente-se sobre essa questão.


Listo abaixo os colaboradores que devem se atentar sobre isso:

Obrigado.

Community / Community Resources

Percebi que as seguintes páginas: "Suporte/Cursos/Exemplos/Meetups/Conferencias/Artigos/Podcasts/Vídeos/Recursos Externos" filhas de Comunidade ainda não estão traduzidas, o autor da issue #106 fez parte da tradução mas foi apenas em Tools. No entanto, posso ficar responsável por elas?

Propor melhorias nas paginas já traduzidas

A duvida seria se já podemos ir abrindo PRs propondo melhorias nas paginas já traduzidas até o momento ou se devemos esperar a conclusão da issue: #123

Conversando no canal do slack, @halian-vilela sugeriu a criação de uma issue para discutirmos sobre o tema e também sugeriu a criação de uma label "ajuste"

Inclusão de Novos Membros - React Community: Owner Blog Page

cc: @reactjs/reactjs-org-portuguese-brazil-translation

Meninos, a página do blog, precisará de pessoas que estejam sempre traduzindo elas.
Nesse caso, 2 pessoas se mostraram super dispostas em manter essa página traduzida

Será que poderíamos incluir eles, como membros do React Community do pt-br?

O que vocês acham?

  • Blog [NEEDS OWNER (SEVERAL) - LOWEST PRIORITY - NO PULL-REQUEST YET]

Discussions in Portuguese

Am I the only one that find it weird to be speaking English with people that speaks Portuguese?

I propose that we discuss things in issues and PRs in Portuguese. That will makes things more easy to everyone to contribute.

English-speakers-only are welcome to have discussions in English in this repo, although I think that would be a rare case, maybe when the React team reaches out to us.

Do not capitalize name of months

PT: Como vocês podem ver em content/community/conferences.md, todos os nomes de mês estão capitalizados. Isto não é correto em Português.

EN: As you can see in content/community/conferences.md, all month names are capitalized. This is not correct in Portuguese.

Suggestion: start versioning Glossary

I fear that #4 will eventually grow out of control and decisions/directions will be very hard to be tracked down in the long term.

We have been versioning these terms in cezaraugusto/You-Dont-Know-JS and IMO it has been a good thing since people can open issues/PRs proposing additions and the discussion is centralised on each particular change.

Thoughts?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.