diff --git a/content/blog/2014-09-24-testing-flux-applications.md b/content/blog/2014-09-24-testing-flux-applications.md index 0986c7653..5721e3b42 100644 --- a/content/blog/2014-09-24-testing-flux-applications.md +++ b/content/blog/2014-09-24-testing-flux-applications.md @@ -17,7 +17,7 @@ The first steps toward working with Jest are as follows: 1. Get the module dependencies for the application installed by running `npm install`. 2. Create a directory `__tests__/` with a test file, in this case TodoStore-test.js -3. Run `npm install jest-cli —save-dev` +3. Run `npm install jest-cli --save-dev` 4. Add the following to your package.json ```javascript diff --git a/content/blog/2018-10-01-create-react-app-v2.md b/content/blog/2018-10-01-create-react-app-v2.md index 31a7e16b9..c35e90106 100644 --- a/content/blog/2018-10-01-create-react-app-v2.md +++ b/content/blog/2018-10-01-create-react-app-v2.md @@ -25,7 +25,7 @@ Here's a short summary of what's new in this release: * 🃏 We updated to [Jest 23](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html), which includes an [interactive mode](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode) for reviewing snapshots. * 💄 We added [PostCSS](https://preset-env.cssdb.org/features#stage-3) so you can use new CSS features in old browsers. * 💎 You can use [Apollo](https://github.com/leoasis/graphql-tag.macro#usage), [Relay Modern](https://github.com/facebook/relay/pull/2171#issuecomment-411459604), [MDX](https://github.com/facebook/create-react-app/issues/5149#issuecomment-425396995), and other third-party [Babel Macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros) transforms. -* 🌠 You can now [import an SVG as a React component](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-svgs), and use it in JSX. +* 🌠 You can now [import an SVG as a React component](https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs), and use it in JSX. * 🐈 You can try the experimental [Yarn Plug'n'Play mode](https://github.com/yarnpkg/rfcs/pull/101) that removes `node_modules`. * 🕸 You can now [plug your own proxy implementation](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually) in development to match your backend API. * 🚀 You can now use [packages written for latest Node versions](https://github.com/sindresorhus/ama/issues/446#issuecomment-281014491) without breaking the build. diff --git a/content/blog/2019-02-06-react-v16.8.0.md b/content/blog/2019-02-06-react-v16.8.0.md index 3af12da7d..ef7641fb2 100644 --- a/content/blog/2019-02-06-react-v16.8.0.md +++ b/content/blog/2019-02-06-react-v16.8.0.md @@ -140,10 +140,10 @@ Assuming you already have ESLint installed, run: ```sh # npm -npm install eslint-plugin-react-hooks@next --save-dev +npm install eslint-plugin-react-hooks --save-dev # yarn -yarn add eslint-plugin-react-hooks@next --dev +yarn add eslint-plugin-react-hooks --dev ``` Then add it to your ESLint configuration: diff --git a/content/community/articles.md b/content/community/articles.md index 7ac99209e..53586fe30 100644 --- a/content/community/articles.md +++ b/content/community/articles.md @@ -10,7 +10,7 @@ permalink: community/articles.html - [9 things every React.js beginner should know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know) - Cam Jackson's guide for beginners. - [React "Aha" Moments](https://tylermcginnis.com/react-aha-moments/) - Tyler McGinnis' article on his collection of "Aha" moments with React. - [You're missing the point of React](https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a) - Dan Abramov's article about the best parts of React. -- [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's reccommended timeline for learning React and the React ecosystem. +- [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's recommended timeline for learning React and the React ecosystem. - [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - Joshua Comeau's guide to showcase how easy it can be to start modern React development. - [React FAQ](https://reactfaq.site/) - An external site with articles that try to answer frequently asked questions about React. - [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state. diff --git a/content/community/conferences.md b/content/community/conferences.md index 356600394..c3ffbfdbb 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -12,7 +12,12 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {#upcoming-conferences} -### ReactJS Girls Conference +### React Finland 2019 {#react-finland-2019} +April 24-26 in Helsinki, Finland + +[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) + +### ReactJS Girls Conference {#reactjs-girls-conference} May 3, 2019 in London, UK [Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls) @@ -42,12 +47,12 @@ June 21, 2019 Chicago, Illinois USA [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) -### Chain React 2019 +### Chain React 2019 {#chain-react-2019} July 11-12, 2019. Portland, OR, USA. [Website](https://infinite.red/ChainReactConf) -### React Rally 2019 +### React Rally 2019 {#react-rally-2019} August 22-23, 2019. Salt Lake City, USA. [Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/) @@ -67,6 +72,11 @@ September 13th, 2019. New York, USA [Website](https://reactnewyork.com/) - [Twitter](https://twitter.com/reactnewyork) +### React Boston 2019 {#react-boston-2019} +September 21-22, 2019 in Boston, Massachusetts USA + +[Website](https://www.reactboston.com/) - [Twitter](https://twitter.com/reactboston) + ### React India 2019 {#react-india-2019} September 26-28, 2019 in Goa, India @@ -374,4 +384,4 @@ April 4-5, 2019 in Kraków, Poland ### React Amsterdam 2019 {#react-amsterdam-2019} April 12, 2019 in Amsterdam, The Netherlands -[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) \ No newline at end of file +[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index a97b44d45..b103cfae4 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -149,7 +149,7 @@ return ( These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries. -You can play with JSX using [this online converter](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). +You can play with JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3). ### Quickly Try JSX {#quickly-try-jsx} diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index e1985e72f..92799e808 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -53,7 +53,7 @@ npm start Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them. -When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents). +When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app--) and the [User Guide](https://facebook.github.io/create-react-app/). ### Next.js {#nextjs} @@ -69,7 +69,7 @@ Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [ga ### More Flexible Toolchains {#more-flexible-toolchains} -The following toolchains offer more flexiblity and choice. We recommend them to more experienced users: +The following toolchains offer more flexibility and choice. We recommend them to more experienced users: - **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/). diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index 37972e83e..a6384d3f5 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -99,7 +99,7 @@ Sometimes people find third-party books and video courses more helpful than the ### Advanced Concepts {#advanced-concepts} -Once you're comfortable with the [main concepts](#main-concepts) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html). +Once you're comfortable with the [main concepts](/docs/hello-world.html) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html). ### API Reference {#api-reference} @@ -115,7 +115,7 @@ The [React blog](/blog/) is the official source for the updates from the React t You can also follow the [@reactjs account](https://twitter.com/reactjs) on Twitter, but you won't miss anything essential if you only read the blog. -Not every React release deserves its own blog post, but you can find a detailed changelog for every release [in the `CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react) page. +Not every React release deserves its own blog post, but you can find a detailed changelog for every release [in the `CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react/releases) page. ## Versioned Documentation {#versioned-documentation} diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 7d2953293..ce6bce3d8 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -209,7 +209,7 @@ There are a few more heuristics, and they might change over time as we fine-tune * `componentDidCatch` and `getDerivedStateFromError`: There are no Hook equivalents for these methods yet, but they will be added soon. -### How can I do data fetching with Hooks? +### How can I do data fetching with Hooks? {#how-can-i-do-data-fetching-with-hooks} Here is a [small demo](https://codesandbox.io/s/jvvkoo8pq3) to get you started. To learn more, check out [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) about data fetching with Hooks. @@ -654,7 +654,7 @@ function ProductDetails({ fetchProduct }) Note that in the above example we **need** to keep the function in the dependencies list. This ensures that a change in the `productId` prop of `ProductPage` automatically triggers a refetch in the `ProductDetails` component. -### What can I do if my effect dependencies change too often? +### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often} Sometimes, your effect may be using reading state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs: @@ -809,13 +809,10 @@ function Image(props) { // ✅ IntersectionObserver is created lazily once function getObserver() { - let observer = ref.current; - if (observer !== null) { - return observer; + if (ref.current === null) { + ref.current = new IntersectionObserver(onIntersect); } - let newObserver = new IntersectionObserver(onIntersect); - ref.current = newObserver; - return newObserver; + return ref.current; } // When you need it, call getObserver() diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index dbac9cffd..625d1e4d5 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -28,7 +28,7 @@ By following this rule, you ensure that all stateful logic in a component is cle We released an ESLint plugin called [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) that enforces these two rules. You can add this plugin to your project if you'd like to try it: ```bash -npm install eslint-plugin-react-hooks +npm install eslint-plugin-react-hooks --save-dev ``` ```js diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 052aecb33..0b4d15b65 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -8,7 +8,7 @@ prev: hooks-overview.html *Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. -The [previous page](/docs/hooks-intro.html) introduced Hooks with this example: +The [introduction page](/docs/hooks-intro.html) used this example to get familiar with Hooks: ```js{4-5} import React, { useState } from 'react'; diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md index a24db5c15..3e2a2a918 100644 --- a/content/docs/reference-react.md +++ b/content/docs/reference-react.md @@ -198,7 +198,7 @@ React.cloneElement( React.createFactory(type) ``` -یک تابع برمیگرداند که المنتهای ریاکت با نوع داده شده را تولید میکند. مثل [`()React.createElement`](#createElement)، آرگومان نوع داده شده میتواند رشتهی نام یک تگ (مثل `'div'` یا `'span'`)، یک نوع [کامپوننت ریاکت](/docs/components-and-props.html) (کلاس یا تابع)، یا یک نوع [فرگمنت ریاکت](#reactfragment) باشد. +یک تابع برمیگرداند که المنتهای ریاکت با نوع داده شده را تولید میکند. مثل [`()React.createElement`](#createelement)، آرگومان نوع داده شده میتواند رشتهی نام یک تگ (مثل `'div'` یا `'span'`)، یک نوع [کامپوننت ریاکت](/docs/components-and-props.html) (کلاس یا تابع)، یا یک نوع [فرگمنت ریاکت](#reactfragment) باشد. این helper یک نوع قدیمی(legacy) محسوب میشود و ما شما را تشویق میکنیم که به صورت مستقیم از `React.createElement()` یا JSX استفاده کنید. diff --git a/content/languages.yml b/content/languages.yml index a7fe36f1f..3919bb503 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -23,6 +23,10 @@ translated_name: বাংলা code: bn status: 0 +- name: Catalan + translated_name: Català + code: ca + status: 0 - name: German translated_name: Deutsch code: de @@ -30,7 +34,7 @@ - name: Greek translated_name: Ελληνικά code: el - status: 0 + status: 1 - name: Spanish translated_name: Español code: es @@ -99,6 +103,10 @@ translated_name: മലയാളം code: ml status: 0 +- name: Mongolian + translated_name: Монгол хэл + code: mn + status: 0 - name: Nepali translated_name: नेपाली code: ne @@ -110,7 +118,7 @@ - name: Polish translated_name: Polski code: pl - status: 1 + status: 2 - name: Portuguese (Brazil) translated_name: Português do Brasil code: pt-br @@ -154,7 +162,7 @@ - name: Ukrainian translated_name: Українська code: uk - status: 1 + status: 2 - name: Urdu translated_name: اردو code: ur diff --git a/gatsby-config.js b/gatsby-config.js index 456396f92..957c39145 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -55,6 +55,7 @@ module.exports = { maxWidth: 840, }, }, + 'gatsby-remark-external-links', 'gatsby-remark-header-custom-ids', { resolve: 'gatsby-remark-code-repls', diff --git a/package.json b/package.json index 3e255133b..ba61ccc95 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "gatsby-remark-code-repls": "^2.0.0", "gatsby-remark-copy-linked-files": "^2.0.0", "gatsby-remark-embed-snippet": "^3.0.0", + "gatsby-remark-external-links": "^0.0.4", "gatsby-remark-images": "^2.0.0", "gatsby-remark-prismjs": "^3.0.2", "gatsby-remark-responsive-iframe": "^2.0.0", diff --git a/src/pages/index.js b/src/pages/index.js index e5fb22c2e..07a26575b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -62,7 +62,7 @@ class Home extends Component {