Skip to content
This repository has been archived by the owner on Apr 21, 2023. It is now read-only.

Commit

Permalink
Merge pull request #1 from reactjs/master
Browse files Browse the repository at this point in the history
Sync with reactjs/tl.reactjs.org master
  • Loading branch information
warrenca committed Oct 15, 2020
2 parents 871337b + ebda858 commit bb67244
Show file tree
Hide file tree
Showing 9 changed files with 109 additions and 67 deletions.
11 changes: 6 additions & 5 deletions content/blog/2020-08-10-react-v17-rc.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ Most effects don't need to delay screen updates, so React runs them asynchronous

However, when a component is unmounting, effect *cleanup* functions used to run synchronously (similar to `componentWillUnmount` being synchronous in classes). We've found that this is not ideal for larger apps because it slows down large screen transitions (e.g. switching tabs).

**In React 17, the effect cleanup function will always runs asynchronously -- for example, if the component is unmounting, the cleanup will run _after_ the screen has been updated.**
**In React 17, the effect cleanup function always runs asynchronously -- for example, if the component is unmounting, the cleanup runs _after_ the screen has been updated.**

This mirrors how the effects themselves run more closely. In the rare cases where you might want to rely on the synchronous execution, you can switch to `useLayoutEffect` instead.

Expand Down Expand Up @@ -272,20 +272,20 @@ We encourage you to try React 17.0 Release Candidate soon and [raise any issues]
To install React 17 RC with npm, run:

```bash
npm install react@17.0.0-rc.2 react-dom@17.0.0-rc.2
npm install react@17.0.0-rc.3 react-dom@17.0.0-rc.3
```

To install React 17 RC with Yarn, run:

```bash
yarn add react@17.0.0-rc.2 react-dom@17.0.0-rc.2
yarn add react@17.0.0-rc.3 react-dom@17.0.0-rc.3
```

We also provide UMD builds of React via a CDN:

```html
<script crossorigin src="https://unpkg.com/react@17.0.0-rc.2/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.0-rc.2/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17.0.0-rc.3/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.0-rc.3/umd/react-dom.production.min.js"></script>
```

Refer to the documentation for [detailed installation instructions](/docs/installation.html).
Expand Down Expand Up @@ -356,6 +356,7 @@ Refer to the documentation for [detailed installation instructions](/docs/instal
* Remove `unstable_discreteUpdates` and `unstable_flushDiscreteUpdates`. ([@trueadm](https://github.com/trueadm) in [#18825](https://github.com/facebook/react/pull/18825))
* Remove the `timeoutMs` argument. ([@acdlite](https://github.com/acdlite) in [#19703](https://github.com/facebook/react/pull/19703))
* Disable `<div hidden />` prerendering in favor of a different future API. ([@acdlite](https://github.com/acdlite) in [#18917](https://github.com/facebook/react/pull/18917))
* Add `unstable_expectedLoadTime` to Suspense for CPU-bound trees. ([@acdlite](https://github.com/acdlite) in [#19936](https://github.com/facebook/react/pull/19936))
* Add an experimental `unstable_useOpaqueIdentifier` Hook. ([@lunaruan](https://github.com/lunaruan) in [#17322](https://github.com/facebook/react/pull/17322))
* Add an experimental `unstable_startTransition` API. ([@rickhanlonii](https://github.com/rickhanlonii) in [#19696](https://github.com/facebook/react/pull/19696))
* Using `act` in the test renderer no longer flushes Suspense fallbacks. ([@acdlite](https://github.com/acdlite) in [#18596](https://github.com/facebook/react/pull/18596))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function App() {
However, this is not perfect:

* Because JSX compiled into `React.createElement`, `React` needed to be in scope if you use JSX.
* Because JSX was compiled into `React.createElement`, `React` needed to be in scope if you used JSX.
* There are some [performance improvements and simplifications](https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation) that `React.createElement` does not allow.

To solve these issues, React 17 introduces two new entry points to the React package that are intended to only be used by compilers like Babel and TypeScript. Instead of transforming JSX to `React.createElement`, **the new JSX transform** automatically imports special functions from those new entry points in the React package and calls them.
Expand Down
2 changes: 1 addition & 1 deletion content/docs/design-principles.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ There is an internal joke in the team that React should have been called "Schedu

Providing a good developer experience is important to us.

For example, we maintain [React DevTools](https://github.com/facebook/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.
For example, we maintain [React DevTools](https://github.com/facebook/react/tree/master/packages/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.

We also try to go an extra mile to provide helpful developer warnings. For example, React warns you in development if you nest tags in a way that the browser doesn't understand, or if you make a common typo in the API. Developer warnings and the related checks are the main reason why the development version of React is slower than the production version.

Expand Down
35 changes: 16 additions & 19 deletions content/docs/hello-world.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
id: hello-world
title: Hello World
title: Kamusta Mundo
permalink: docs/hello-world.html
prev: cdn-links.html
next: introducing-jsx.html
---

The smallest React example looks like this:
Isang simpleng halimbawa ng React:

```js
ReactDOM.render(
Expand All @@ -15,36 +15,33 @@ ReactDOM.render(
);
```

It displays a heading saying "Hello, world!" on the page.
Sa pahinang ito ipinapakita ang isang heading na nagsasabing "Hello, world!"

[](codepen://hello-world)

Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one.
Pindutin ang link na nasa itaas para magbukas ng isang online editor. Huwag mag-atubiling gumawa ng ilang mga pagbabago at tignan kung papaano ito nakakaapekto sa resulta. Karamihan ng mga pahina sa gabay ay mayroong mga halimbawang pwedeng i-edit katulad nito.

## Papaano Basahin ang Gabay na ito {#how-to-read-this-guide}

## How to Read This Guide {#how-to-read-this-guide}

In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
Sa gabay na ito, pag-aaralan natin ang mga pundasyon ng mga React apps: elements at components. Kapag naging dalubhasa ka na sa mga ito, maaari ka nang gumawa ng mga komplikadong apps gamit ang mga maliliit na reusable na mga piraso.

>Tip
>
>This guide is designed for people who prefer **learning concepts step by step**. If you prefer to learn by doing, check out our [practical tutorial](/tutorial/tutorial.html). You might find this guide and the tutorial complementary to each other.
>Ang gabay na ito ay ginawa para sa mga taong mas gusto **pag-aralan ang mga konsepto isa-isa**. Kung mas gusto mong matuto sa pamamagitan ng paggawa, pwede mong tignan ang aming [praktikal na tutorial](/tutorial/tutorial.html). Iyong mapapansin na ang gabay na ito at ang tutorial ay komplementaryo sa isa't isa.
This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you're reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.
Ito ang unang kabanata patungkol sa pinakamahalagang mga konsepto ng React. Ang mga listahan ng mga kabanata ay makikita sa navigation sidebar. Kung ikaw ay nagbabasa nito gamit ang iyong mobile device, ma-aaccess mo ang navigation sa pamamagitan ng pagpindot sa pindutan sa kanang ibaba ng iyong screen.

Every chapter in this guide builds on the knowledge introduced in earlier chapters. **You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar.** For example, [“Introducing JSX”](/docs/introducing-jsx.html) is the next chapter after this one.
Ang bawat kabanata sa gabay na ito ay nagdadagdag ng kaalaman ukol sa mga naunang mga kabanata. **Madali mong matututunan ang React sa pamamagitan ng pagbasa sa mga kabanata ng "Main Concepts" ayon sa pagkakasunod-sunod nito sa sidebar.** Halimbawa, [“Introducing JSX”](/docs/introducing-jsx.html) ang kasunod na kabanata pagkatapos nito.

## Knowledge Level Assumptions {#knowledge-level-assumptions}
## Pagtukoy sa Antas ng Kaalaman {#knowledge-level-assumptions}

React is a JavaScript library, and so we'll assume you have a basic understanding of the JavaScript language. **If you don't feel very confident, we recommend [going through a JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level** and enable you to follow along this guide without getting lost. It might take you between 30 minutes and an hour, but as a result you won't have to feel like you're learning both React and JavaScript at the same time.
Ang React ay isang JavaScript library kung kaya't aming ina-assume na may sapat kang kaalaman sa JavaScript. **Kung may agam-agam at pagdududa, inirerekumenda naming [subukan mo munang magbasa ng isang JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) para masuri ang iyong kaalaman** at makasunod sa gabay na ito nang hindi naguguluhan. Maari kang abutin ng mula sa 30 minuto hanggang sa isang oras, ngunit bilang resulta hindi mo mararamdaman na nag-aaral ka ng React at JavaScript nang sabay.

>Note
>Paalala
>
>This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way.

## Let's Get Started! {#lets-get-started}

Keep scrolling down, and you'll find the link to the [next chapter of this guide](/docs/introducing-jsx.html) right before the website footer.
>Ang gabay na ito ay madalas gumagamit ng mga bagong JavaScript syntax sa mga halimbawa. Kung hindi ka na gumagamit ng JavaScript sa mga nakalipas na mga taon, [
ang tatlong puntong ito](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) ay makakatulong para makasunod ka sa mga susunod na aralin.

## Halina't Magsimula! {#lets-get-started}

Patuloy na mag-scroll pababa at iyong makikita ang link sa [susunod na kabanata](/docs/introducing-jsx.html) bago mismo ang footer ng website.
Loading

0 comments on commit bb67244

Please sign in to comment.