diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md index 2b3d4c7f1..78bc49b6e 100644 --- a/content/blog/2019-02-23-is-react-translated-yet.md +++ b/content/blog/2019-02-23-is-react-translated-yet.md @@ -13,19 +13,19 @@ In addition, the following three languages have completed translating most of th Special congratulations to [Alejandro Ñáñez Ortiz](https://github.com/alejandronanez), [Rainer Martínez Fraga](https://github.com/carburo), [David Morales](https://github.com/dmorales), [Miguel Alejandro Bolivar Portilla](https://github.com/Darking360), and all the contributors to the Spanish translation for being the first to *completely* translate the core pages of the docs! -## Why Localization Matters +## Why Localization Matters {#why-localization-matters} React already has many meetups and conferences around the world, but many programmers don't use English as their primary language. We’d love to support local communities who use React by making our documentation available in most popular languages. In the past, React community members have created unofficial translations for [Chinese](https://github.com/discountry/react), [Arabic](https://wiki.hsoub.com/React), and [Korean](https://github.com/reactjs/ko.reactjs.org/issues/4); by making an official channel for these translated docs we're hoping to make them easier to find and help make sure that non-English-speaking users of React aren't left behind. -## Contributing +## Contributing {#contributing} If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language. Can't find your language? If you'd like to maintain your langauge's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)! -## Backstory +## Backstory {#backstory} Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [polyhedra lady](https://www.youtube.com/watch?v=Ew-UzGC8RqQ). For the past few weeks, I've been helping the React team coordinate their translation effort. Here's how I did it. @@ -45,7 +45,7 @@ After the trial period, we were ready to accept more languages. I created [a scr Because of the automation, the rest of the maintance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working! -## The Bot +## The Bot {#the-bot} The most challenging part was getting the bot to sync changes from the English version of the site. Initially we were using the [che-tsumi](https://github.com/vuejs-jp/che-tsumi) bot created by the Japanese Vue translation team, but we soon decided to build our own bot to suit our needs. In particular, the che-tsumi bot works by [cherry picking](https://git-scm.com/docs/git-cherry-pick) new commits. This ended up causing a cavalade of new issues that were interconnected, especially when [Hooks were released](/blog/2019/02/06/react-v16.8.0.html). @@ -63,13 +63,13 @@ There were other smaller issues that I ran into. I tried using the [Heroku Sched There are, as always, improvements I want to make to the bot. Right now it doesn't check whether there is an outstanding pull request before pushing another one. It's still hard to tell the exact change that happened in the original source, and it's possible to miss out on a needed translation change. But I trust the maintainers we've chosen to work through these issues, and the bot is [open source](https://github.com/reactjs/reactjs.org-translation) if anyone wants to help me make these improvements! -## Thanks +## Thanks {#thanks} Finally, I would like to extend my gratitude to the following people and groups: * All the translation maintainers and contributors who are helping translate React to more than thirty languages. * The [Vue.js Japan User Group](https://github.com/vuejs-jp) for initiating the idea of having bot-managed translations, and especially [Hanatani Takuma](https://github.com/potato4d) for helping us understand their approach and helping maintain the Japanese translation. - * [Soichiro Miki](https://github.com/smikitki) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation. + * [Soichiro Miki](https://github.com/smikitky) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation. * [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process. * [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains. diff --git a/content/community/conferences.md b/content/community/conferences.md index 62ac39b40..89ed871d0 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -12,10 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {#upcoming-conferences} -### React Iran 2019 {#react-iran-2019} -January 31, 2019 in Tehran, Iran -[Website](http://reactiran.com) - [Instagram](https://www.instagram.com/reactiran/) - ### Reactathon 2019 {#reactathon-2019} March 30-31, 2019 in San Francisco, USA @@ -31,6 +27,11 @@ April 12, 2019 in Amsterdam, The Netherlands [Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) +### ReactJS Girls Conference +May 3, 2019 in London, UK + +[Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls) + ### ReactEurope 2019 {#reacteurope-2019} May 23-24, 2019 in Paris, France @@ -51,6 +52,11 @@ June 21, 2019 Chicago, Illinois USA [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) +### React Week '19 {#RWNY19} +July 15-21, 2019. New York City, USA + +[Website](https://reactweek.nyc) - [Twitter](https://twitter.com/ReactWeek) + ### ComponentsConf 2019 {#componentsconf-2019} September 6, 2019 in Melbourne, Australia [Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf) @@ -338,3 +344,8 @@ November 4 in Tel Aviv, Israel November 30, Berlin, Germany [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/channel/UC1EYHmQYBUJjkmL6OtK4rlw) + +### React Iran 2019 {#react-iran-2019} +January 31, 2019 in Tehran, Iran + +[Website](http://reactiran.com) - [Instagram](https://www.instagram.com/reactiran/) diff --git a/content/community/examples.md b/content/community/examples.md index 09606a27d..9df2be352 100644 --- a/content/community/examples.md +++ b/content/community/examples.md @@ -11,10 +11,10 @@ There are many example projects created by the React community. Feel free to add * **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React * **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji -* **[Github Battle App](https://github.com/ReactTraining/react-fundamentals/tree/hosting)** Battle two Github users and see the most popular Github projects for any language. +* **[Github Battle App](https://tm.dev/react-course-project/)** Battle two Github users and see the most popular Github projects for any language. * **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & react-router-powered implementation of Hacker News using its Firebase API. * **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search -* **[Shopping Cart](https://github.com/jeffersonRibeiro/react-shopping-cart)** Simple ecommerce cart application built using React +* **[Shopping Cart](https://github.com/jeffersonRibeiro/react-shopping-cart)** Simple ecommerce cart application built using React * **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies. * **[Product Comparison Page](https://github.com/Rhymond/product-compare-react)** Simple Product Compare page built in React * **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL. diff --git a/content/docs/context.md b/content/docs/context.md index 85cef035a..060799c97 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -54,7 +54,7 @@ Considere por exemplo o componente `Page` que passa as props `user` e `avatarSiz Pode parecer redundante passar para baixo as props `user` e `avatarSize` através de vários níveis se no final apenas o componente `Avatar` realmente precisa usa-las. Além disso, é incômodo sempre que o componente `Avatar` precisar de mais props do topo, você também precisar adicionar todas elas por todos os níveis intermediários. -A única maneira de resolver este problema **sem contexto** é [atribuir o próprio componente Avatar a uma prop do componente Page](/docs/composition-vs-inheritance.html#containment), assim os componentes intermediários não precisam saber sobre a prop `user`. +Uma forma de resolver este problema **sem contexto** é [atribuir o próprio componente Avatar a uma prop do componente Page](/docs/composition-vs-inheritance.html#containment), assim os componentes intermediários não precisam saber sobre a prop `user` ou o `avatarSize`: ```js function Page(props) { @@ -68,7 +68,7 @@ function Page(props) { } // Agora temos: - + // ... que renderiza ... // ... que renderiza ... diff --git a/content/docs/legacy-context.md b/content/docs/legacy-context.md index 1c62e6650..a17137fd8 100644 --- a/content/docs/legacy-context.md +++ b/content/docs/legacy-context.md @@ -152,11 +152,11 @@ If `contextTypes` is defined within a component, the following [lifecycle method > > As of React 16, `componentDidUpdate` no longer receives `prevContext`. -### Referencing Context in Stateless Function Components {#referencing-context-in-stateless-function-components} +### Referencing Context in Function Components {#referencing-context-in-stateless-function-components} > This section documents a legacy API. See the [new API](/docs/context.html). -Stateless function components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows a `Button` component written as a stateless function component. +Function components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows a `Button` component written as a function component. ```javascript import PropTypes from 'prop-types'; diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 16b7b3975..8d6e40c53 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -3,9 +3,9 @@ - id: getting-started title: Getting Started - id: add-react-to-a-website - title: Add React to a Website + title: Adicione o React a um site - id: create-a-new-react-app - title: Create a New React App + title: Crie um novo React App - id: cdn-links title: CDN Links - title: Main Concepts @@ -14,31 +14,31 @@ - id: hello-world title: Hello World - id: introducing-jsx - title: Introducing JSX + title: Introduzindo JSX - id: rendering-elements - title: Rendering Elements + title: Renderizando Elementos - id: components-and-props - title: Components and Props + title: Componentes e Props - id: state-and-lifecycle - title: State and Lifecycle + title: State e Ciclo de Vida - id: handling-events - title: Handling Events + title: Manipulando eventos - id: conditional-rendering - title: Conditional Rendering + title: Renderização condicional - id: lists-and-keys title: Listas e Chaves - id: forms title: Forms - id: lifting-state-up - title: Lifting State Up + title: Elevando o State - id: composition-vs-inheritance title: Composition vs Inheritance - id: thinking-in-react - title: Thinking In React + title: Pensando do jeito React - title: Advanced Guides items: - id: accessibility - title: Accessibility + title: Acessibilidade - id: code-splitting title: Code-Splitting - id: context @@ -46,11 +46,11 @@ - id: error-boundaries title: Error Boundaries - id: forwarding-refs - title: Forwarding Refs + title: Encaminhamento de Refs - id: fragments - title: Fragments + title: Fragmentos - id: higher-order-components - title: Higher-Order Components + title: Componentes de Alta-ordem - id: integrating-with-other-libraries title: Integrando com outras Bibliotecas - id: jsx-in-depth @@ -62,23 +62,23 @@ - id: react-without-es6 title: React Without ES6 - id: react-without-jsx - title: React Without JSX + title: React sem JSX - id: reconciliation - title: Reconciliation + title: Reconciliação (Reconciliation) - id: refs-and-the-dom - title: Refs and the DOM + title: Refs e o DOM - id: render-props title: Render Props - id: static-type-checking title: Static Type Checking - id: strict-mode - title: Strict Mode + title: Modo Estrito (Strict Mode) - id: typechecking-with-proptypes - title: Typechecking With PropTypes + title: Checagem de tipos (Typechecking) com PropTypes - id: uncontrolled-components - title: Uncontrolled Components + title: Componentes não controlados - id: web-components - title: Web Components + title: Componentes Web - title: API Reference items: - id: react-api @@ -91,19 +91,19 @@ - id: react-dom-server title: ReactDOMServer - id: dom-elements - title: DOM Elements + title: Elementos do DOM - id: events title: SyntheticEvent - id: test-utils - title: Test Utilities + title: Utilitários de Teste - id: shallow-renderer - title: Shallow Renderer + title: Renderização superficial (Shallow Renderer) - id: test-renderer title: Test Renderer - id: javascript-environment-requirements - title: JS Environment Requirements + title: Requisitos de Ambiente JavaScript - id: glossary - title: Glossary + title: Glossário - title: Hooks (New) isOrdered: true items: @@ -116,11 +116,11 @@ - id: hooks-effect title: Using the Effect Hook - id: hooks-rules - title: Rules of Hooks + title: Regras dos Hooks - id: hooks-custom title: Criando seus próprios Hooks - id: hooks-reference - title: Hooks API Reference + title: Referência da API dos Hooks - id: hooks-faq title: Hooks FAQ - title: Contributing @@ -132,21 +132,21 @@ - id: implementation-notes title: Implementation Notes - id: design-principles - title: Design Principles + title: Princípios de Design - title: FAQ items: - id: faq-ajax title: AJAX and APIs - id: faq-build - title: Babel, JSX, and Build Steps + title: Babel, JSX e Etapas de Build - id: faq-functions - title: Passing Functions to Components + title: Passando Funções para Componentes - id: faq-state title: State dos Componentes - id: faq-styling title: Estilização e CSS - id: faq-structure - title: File Structure + title: Estrutura de arquivos - id: faq-versioning title: Versioning Policy - id: faq-internals diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 8b54d0981..5f3a48bad 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -1,10 +1,10 @@ --- id: react-without-es6 -title: React Without ES6 +title: React sem ES6 permalink: docs/react-without-es6.html --- -Normally you would define a React component as a plain JavaScript class: +Normalmente você definiria um componente React como uma simples classe Javascript: ```javascript class Greeting extends React.Component { @@ -14,7 +14,7 @@ class Greeting extends React.Component { } ``` -If you don't use ES6 yet, you may use the `create-react-class` module instead: +Se você ainda não usa ES6, você pode usar o módulo `create-react-class`: ```javascript @@ -26,11 +26,11 @@ var Greeting = createReactClass({ }); ``` -The API of ES6 classes is similar to `createReactClass()` with a few exceptions. +A API de classes do ES6 é similar a `createReactClass()` com algumas exceções. -## Declaring Default Props {#declaring-default-props} +## Declarando Props padrão {#declaring-default-props} -With functions and ES6 classes `defaultProps` is defined as a property on the component itself: +Com funções e classes ES6, `defaultProps` é definido como uma propriedade do próprio componente: ```javascript class Greeting extends React.Component { @@ -42,7 +42,7 @@ Greeting.defaultProps = { }; ``` -With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object: +Com `createReactClass()`, você precisa definir `getDefaultProps()` como uma função no objeto que é passado como parâmetro: ```javascript var Greeting = createReactClass({ @@ -57,9 +57,9 @@ var Greeting = createReactClass({ }); ``` -## Setting the Initial State {#setting-the-initial-state} +## Configurando o State Inicial {#setting-the-initial-state} -In ES6 classes, you can define the initial state by assigning `this.state` in the constructor: +Em classes ES6, você pode definir o state inicial ao definir `this.state` no construtor: ```javascript class Counter extends React.Component { @@ -71,7 +71,7 @@ class Counter extends React.Component { } ``` -With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state: +Com `createReactClass()`, você deve passar um método `getInitialState` que retorna o state inicial: ```javascript var Counter = createReactClass({ @@ -84,14 +84,14 @@ var Counter = createReactClass({ ## Autobinding {#autobinding} -In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor: +Em componentes React declarados como classes ES6, métodos seguem a mesma semântica que classes ES6 regulares. Isso significa que elas não fazem bind do `this` da instância. Você terá que explicitamente usar `.bind(this)` no construtor: ```javascript class SayHello extends React.Component { constructor(props) { super(props); this.state = {message: 'Hello!'}; - // This line is important! + // Esta linha é importante! this.handleClick = this.handleClick.bind(this); } @@ -100,7 +100,7 @@ class SayHello extends React.Component { } render() { - // Because `this.handleClick` is bound, we can use it as an event handler. + // Devido `this.handleClick` ter sido amarrado, podemos usá-lo como um controlador de evento. return (