Skip to content

Sync with reactjs.org @ 022c1b2f #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Feb 20, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion content/blog/2015-08-11-relay-technical-preview.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ While React simplified the process of developing complex user-interfaces, it lef

Declarative data-fetching means that Relay applications specify *what* data they need, not *how* to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.

Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This colocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This collocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.

Relay is in use at Facebook in production apps, and we're using it more and more because *Relay lets developers focus on their products and move fast*. It's working for us and we'd like to share it with the community.

Expand Down
5 changes: 5 additions & 0 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
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

[Website](https://www.reactathon.com/) - [Twitter](https://twitter.com/reactathon)

### App.js Conf 2019 {#appjs-conf-2019}
April 4-5, 2019 in Kraków, Poland

Expand Down
2 changes: 1 addition & 1 deletion content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ Pass a mocked component module to this method to augment it with useful methods

> Note:
>
> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/test-utils.html#shallow-rendering) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/shallow-renderer.html) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.

* * *

Expand Down
2 changes: 1 addition & 1 deletion content/docs/higher-order-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).

In this document, we'll discuss why higher-order components are useful, and how to write your own.

Expand Down
4 changes: 1 addition & 3 deletions content/docs/hooks-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,7 @@ We know that React developers are focused on shipping products and don't have ti

We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art.

**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** We are sharing this experimental API to get early feedback from those in the community who are interested in shaping the future of React — and we will iterate on Hooks in the open.

Finally, there is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** There is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.

We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.

Expand Down
12 changes: 10 additions & 2 deletions content/docs/static-type-checking.md
Original file line number Diff line number Diff line change
Expand Up @@ -216,10 +216,18 @@ Congrats! You've installed the latest version of TypeScript into your project. I
```

### Configuring the TypeScript Compiler {#configuring-the-typescript-compiler}
The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file run:
The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file:

If you use [Yarn](https://yarnpkg.com/), run:

```bash
yarn run tsc --init
```

If you use [npm](https://www.npmjs.com/), run:

```bash
tsc --init
npx tsc --init
```

Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
Expand Down
7 changes: 0 additions & 7 deletions src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -310,13 +310,6 @@ Home.propTypes = {
}).isRequired,
};

function renderExamplePlaceholder(containerId) {
ReactDOM.render(
<h4>Loading code example...</h4>,
document.getElementById(containerId),
);
}

const CtaItem = ({children, primary = false}) => (
<div
css={{
Expand Down