diff --git a/README.md b/README.md index c66322a03..3044c0d66 100644 --- a/README.md +++ b/README.md @@ -57,9 +57,10 @@ The documentation is divided into several sections with a different tone and pur ## Translation -If you are interesting in translating `reactjs.org`, please join the Crowdin. +If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/). -* [Crowdin - React](https://crowdin.com/project/react) + +If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg). ## Troubleshooting diff --git a/content/authors.yml b/content/authors.yml index da8efd3a7..5848c65e8 100644 --- a/content/authors.yml +++ b/content/authors.yml @@ -73,6 +73,9 @@ sophiebits: steveluscher: name: Steven Luscher url: https://twitter.com/steveluscher +tesseralis: + name: Nat Alison + url: https://twitter.com/tesseralis timer: name: Joe Haddad url: https://twitter.com/timer150 diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md index ae2dc4979..ec30f30f3 100644 --- a/content/blog/2015-03-30-community-roundup-26.md +++ b/content/blog/2015-03-30-community-roundup-26.md @@ -29,7 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :) - + ## Hacker News {#hacker-news} diff --git a/content/blog/2015-08-11-relay-technical-preview.md b/content/blog/2015-08-11-relay-technical-preview.md index c574ccce2..65b1ac5fb 100644 --- a/content/blog/2015-08-11-relay-technical-preview.md +++ b/content/blog/2015-08-11-relay-technical-preview.md @@ -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. diff --git a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md index 7709054b8..6949be3ec 100644 --- a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md +++ b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md @@ -213,7 +213,7 @@ To recap, when designing a component, it is important to decide whether its data Instead of trying to **"mirror" a prop value in state**, make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than a child accepting a "committed" `props.value` and tracking a "draft" `state.value`, have the parent manage both `state.draftValue` and `state.committedValue` and control the child's value directly. This makes the data flow more explicit and predictable. For **uncontrolled** components, if you're trying to reset state when a particular prop (usually an ID) changes, you have a few options: -* **Recomendation: To reset _all internal state_, use the `key` attribute.** +* **Recommendation: To reset _all internal state_, use the `key` attribute.** * Alternative 1: To reset _only certain state fields_, watch for changes in a special property (e.g. `props.userID`). * Alternative 2: You can also consider fall back to an imperative instance method using refs. diff --git a/content/blog/2018-09-10-introducing-the-react-profiler.md b/content/blog/2018-09-10-introducing-the-react-profiler.md index 725a22076..7cb439e1f 100644 --- a/content/blog/2018-09-10-introducing-the-react-profiler.md +++ b/content/blog/2018-09-10-introducing-the-react-profiler.md @@ -140,7 +140,7 @@ It also shows that each time it rendered, it was the most "expensive" component To view this chart, either double-click on a component _or_ select a component and click on the blue bar chart icon in the right detail pane. You can return to the previous chart by clicking the "x" button in the right detail pane. -You can aso double click on a particular bar to view more information about that commit. +You can also double click on a particular bar to view more information about that commit. ![How to view all renders for a specific component](../images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif) diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md new file mode 100644 index 000000000..3ac56a5a4 --- /dev/null +++ b/content/blog/2019-02-23-is-react-translated-yet.md @@ -0,0 +1,76 @@ +--- +title: "Is React Translated Yet? ¡Sí! Sim! はい！" +author: [tesseralis] +--- + +We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into *over 30* languages! You can find them on the new [Languages](/languages) page. + +In addition, the following three languages have completed translating most of the React Docs! 🎉 + +* **Spanish: [es.reactjs.org](https://es.reactjs.org)** +* **Japanese: [ja.reactjs.org](https://ja.reactjs.org)** +* **Brazilian Portuguese: [pt-br.reactjs.org](https://pt-br.reactjs.org)** + +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} + +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} + +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} + +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. + +Our original approach for translations was to use a SaaS platform that allows users to submit translations. There was already a [pull request](https://github.com/reactjs/reactjs.org/pull/873) to integrate it and my original responsibility was to finish that integration. However, we had concerns about the feasibility of that integration and the current quality of translations on the platform. Our primary concern was ensuring that translations kept up to date with the main repo and didn't become "stale". + +[Dan](https://twitter.com/dan_abramov) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change. + +This approach appealed to us for several reasons: + +* It was less code integration to get off the ground. +* It encouraged active maintainers for each repo to ensure quality. +* Contributors already understand GitHub as a platform and are motivated to contribute directly to the React organization. + +We started of with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages. + +After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone! + +Because of the automation, the rest of the maintenance 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 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). + +In the end, we decided that instead of cherry picking each commit, it made more sense to merge all new commits and create a pull request around once a day. Conflicts are merged as-is and listed in the [pull request](https://github.com/reactjs/pt-BR.reactjs.org/pull/114), leaving a checklist for maintainers to fix. + +Creating the [sync script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/sync.js) was easy enough: it downloads the translated repo, adds the original as a remote, pulls from it, merges the conflicts, and creates a pull request. + +The problem was finding a place for the bot to run. I'm a frontend developer for a reason -- Heroku and its ilk are alien to me and *endlessly* frustrating. In fact, until this past Tuesday, I was running the script by hand on my local machine! + +The biggest challenge was space. Each fork of the repo is around 100MB -- which takes minutes to clone on my local machine. We have *32* forks, and the free tiers or most deployment platforms I checked limited you to 512MB of storage. + +After lots of notepad calculations, I found a solution: delete each repo once we've finished the script and limit the concurrency of `sync` scripts that run at once to be within the storage requirements. Luckily, Heroku dynos have a much faster Internet connection and are able to clone even the React repo quickly. + +There were other smaller issues that I ran into. I tried using the [Heroku Scheduler](https://elements.heroku.com/addons/scheduler) add-on so I didn't have to write any actual `watch` code, but it end up running too inconsistently, and I [had an existential meltdown on Twitter](https://twitter.com/tesseralis/status/1097387938088796160) when I couldn't figure out how to send commits from the Heroku dyno. But in the end, this frontend engineer was able to get the bot working! + +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} + +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/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. + + And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way. diff --git a/content/community/conferences.md b/content/community/conferences.md index 78f868d7f..789a00e75 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -12,9 +12,10 @@ 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 + +[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 @@ -26,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 @@ -36,6 +42,16 @@ June 12, 2019. Larvik, Norway [Website](https://reactnorway.com) - [Twitter](https://twitter.com/ReactNorway) +### React Loop 2019 {#react-loop-2019} +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) @@ -323,3 +339,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/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 11b99d37a..a97b44d45 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -110,7 +110,7 @@ Commonly, you might want to display React components in multiple places on the H ### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. +Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: @@ -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](http://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/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=). ### Quickly Try JSX {#quickly-try-jsx} @@ -197,6 +197,6 @@ Don't wait for it to finish -- this command starts an automated watcher for JSX. If you now create a file called `src/like_button.js` with this **[JSX starter code](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, the watcher will create a preprocessed `like_button.js` with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically. -As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](http://babeljs.io/docs/en/babel-cli/). +As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](https://babeljs.io/docs/en/babel-cli/). If you notice that you're getting comfortable with build tools and want them to do more for you, [the next section](/docs/create-a-new-react-app.html) describes some of the most popular and approachable toolchains. If not -- those script tags will do just fine! diff --git a/content/docs/addons-perf.md b/content/docs/addons-perf.md index f50dee96f..a07b1d05a 100644 --- a/content/docs/addons-perf.md +++ b/content/docs/addons-perf.md @@ -27,8 +27,8 @@ In addition to giving you an overview of your app's overall performance, `Perf` See these articles for an introduction to React performance tooling: - ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c) - - ["Performance Engineering with React"](http://benchling.engineering/performance-engineering-with-react/) - - ["A Deep Dive into React Perf Debugging"](http://benchling.engineering/deep-dive-react-perf-debugging/) + - ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react/) + - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/) ### Development vs. Production Builds {#development-vs-production-builds} diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md index 3fcbbb25b..7b7f29f3c 100644 --- a/content/docs/addons-shallow-renderer.md +++ b/content/docs/addons-shallow-renderer.md @@ -51,7 +51,7 @@ Shallow testing currently has some limitations, namely not supporting refs. > Note: > -> We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality. +> We also recommend checking out Enzyme's [Shallow Rendering API](https://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality. ## Reference {#reference} diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md index bbbf5755c..6cf2af081 100644 --- a/content/docs/addons-test-utils.md +++ b/content/docs/addons-test-utils.md @@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm ## Overview {#overview} -`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content). +`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react). > Note: > > We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do. > -> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output. +> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output. - [`act()`](#act) - [`mockComponent()`](#mockcomponent) @@ -53,7 +53,7 @@ To prepare a component for assertions, wrap the code rendering it and performing For example, let's say we have this `Counter` component: ```js -class App extends React.Component { +class Counter extends React.Component { constructor(props) { super(props); this.state = {count: 0}; @@ -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. * * * diff --git a/content/docs/addons-update.md b/content/docs/addons-update.md index 0aa20a482..0e0241074 100644 --- a/content/docs/addons-update.md +++ b/content/docs/addons-update.md @@ -21,7 +21,7 @@ var update = require('react-addons-update'); // ES5 with npm React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app. -Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js. +Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js. ### The Main Idea {#the-main-idea} @@ -67,7 +67,7 @@ const newData = update(myData, { }); ``` -While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version. +While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version. The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*. diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 5b8d40063..64440168d 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -1,20 +1,16 @@ --- id: code-splitting -title: Code-Splitting +title: Kod Parçalanması permalink: docs/code-splitting.html --- -## Bundling {#bundling} +## Paketləmə {#bundling} -Most React apps will have their files "bundled" using tools like -[Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). -Bundling is the process of following imported files and merging them into a -single file: a "bundle". This bundle can then be included on a webpage to load -an entire app at once. +Bir çox React applikasiyalarında, faylları [Webpack](https://webpack.js.org/) və ya [Browserify](http://browserify.org/) kimi alətlər ilə paketləriylər. Paketləmə (bundling) import olunan faylların izlənməsi və "bundle" adlanan bir fayla birləşdirilməsidir. Bu fayl bütün applikasiyanı saytda bir dəfəyə yükləmək üçün istifadə edilə bilər. -#### Example {#example} +#### Nümunə {#example} -**App:** +**Applikasiya:** ```js // app.js @@ -30,7 +26,7 @@ export function add(a, b) { } ``` -**Bundle:** +**Paket:** ```js function add(a, b) { @@ -40,44 +36,28 @@ function add(a, b) { console.log(add(16, 26)); // 42 ``` -> Note: +> Qeyd: > -> Your bundles will end up looking a lot different than this. +> Sizin paketləriniz yuxarıdankından çox fərqli olacaq. -If you're using [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/), or a similar tool, you will have a Webpack setup out of the box to bundle your -app. +Əgər siz [Create React App](https://github.com/facebookincubator/create-react-app), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) və ya oxşar bir alət işlədirsinizsə, applikasiyanı paketləmək üçün Webpack sizdə hazır qoşulmuş olacaq. -If you aren't, you'll need to setup bundling yourself. For example, see the -[Installation](https://webpack.js.org/guides/installation/) and -[Getting Started](https://webpack.js.org/guides/getting-started/) guides on the -Webpack docs. +Əgər siz belə alətlərdən istifadə etmirsinizsə, siz paketləməni özünüz qoşmalısınız. Misal üçün, Webpack sənədlərində [İnstalyasiya](https://webpack.js.org/guides/installation/) və +[Başlamaq](https://webpack.js.org/guides/getting-started/) təlimatlarına baxın. -## Code Splitting {#code-splitting} +## Kod Parçalanması {#code-splitting} -Bundling is great, but as your app grows, your bundle will grow too. Especially -if you are including large third-party libraries. You need to keep an eye on -the code you are including in your bundle so that you don't accidentally make -it so large that your app takes a long time to load. +Paketləmə əladır amma sizin applikasiyanız böyüdükcə paket də böyüyəcək, xüsusəndə böyük ölçülü üçüncü tərəf kitabxanalardan istifadə edildikdə. Təsadüfən paketin ölçüsünü böyüdüb applikasiyanın yüklənməsi zamanını artırmamaq üçün paketə import etdiyiniz kodlara fikir verin. -To avoid winding up with a large bundle, it's good to get ahead of the problem -and start "splitting" your bundle. - [Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature -supported by bundlers like Webpack and Browserify (via -[factor-bundle](https://github.com/browserify/factor-bundle)) which can create -multiple bundles that can be dynamically loaded at runtime. +Böyük paket ilə qalmamaq üçün öncədən problemin üstünə düşub paketi "parçalamağa" başlaya bilərsiniz. Webpack və Browserify ([factor-bundle](https://github.com/browserify/factor-bundle) ilə) kimi paketləmə alətlərində bir çox paketləri yaradıb dinamik formada icra müddətində yüklənməsi xüsusiyyəti [Kod Parçalanması](https://webpack.js.org/guides/code-splitting/) adlanır. -Code-splitting your app can help you "lazy-load" just the things that are -currently needed by the user, which can dramatically improve the performance of -your app. While you haven't reduced the overall amount of code in your app, -you've avoided loading code that the user may never need, and reduced the amount -of code needed during the initial load. +Kod Parçalanması sizin applikasiyanızda istifadəçiyə hal-hazırda lazım olanları "lazy-load" etməyə kömək edir. Bu sizin applikasiyanızın performansını dramatik şəkildə təkminləşdirir. Siz applikasiyada bütün kodun həcmini azalatmasanız da, istifadəçinin işlətməyəcəyi hissələrin yüklənmənməsini qabağını alır bə ilk yüklənən kodun həcmini azaltmış olursunuz. ## `import()` {#import} -The best way to introduce code-splitting into your app is through the dynamic -`import()` syntax. +Kod Parçalanmasını applikasiyanıza əlavə etməyin ən yaxşı yolu dinamik `import()` sintaksisindən istifadə etməkdir. -**Before:** +**Əvvəl:** ```js import { add } from './math'; @@ -85,7 +65,7 @@ import { add } from './math'; console.log(add(16, 26)); ``` -**After:** +**Sonra:** ```js import("./math").then(math => { @@ -93,33 +73,27 @@ import("./math").then(math => { }); ``` -> Note: +> Qeyd: > -> The dynamic `import()` syntax is a ECMAScript (JavaScript) -> [proposal](https://github.com/tc39/proposal-dynamic-import) not currently -> part of the language standard. It is expected to be accepted in the -> near future. +> Dinamik `import()` sintaksisi ECMAScript (JavaScript) +> [təklifi fazasındadır](https://github.com/tc39/proposal-dynamic-import) və hələki dil standartının +> bir hissəsi deyil. Bu təklif yaxın gələcəkdə standarta qəbul ediləcək. -When Webpack comes across this syntax, it automatically starts code-splitting -your app. If you're using Create React App, this is already configured for you -and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported -out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import). +Webpack bu sintaksisi görən kimi, sizin applikasiyanızın kodunu avtomatik parçalayacaq. Əgər siz Create React App işlədirsinizsə, bu xüsusiyyət artiq sizin üçün konfiqurasiya olunub və siz dərhal bunu [işlədə bilərsiniz](https://facebook.github.io/create-react-app/docs/code-splitting). Bu xusiyyəti həmçinin [Next.js](https://github.com/zeit/next.js/#dynamic-import) də dəstəkləyir. -If you're setting up Webpack yourself, you'll probably want to read Webpack's -[guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269). +Əgər Webpack-i özünüz quraşdırırsınızsa, Webpack-in [kod parçalaması haqqında təlimatını](https://webpack.js.org/guides/code-splitting/) oxumaq sizə lazım olacaq. Sizin Webpack konfiqurasiyanız təxminən [belə bir formada](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269) görünəcək. -When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can -parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import). +[Babel](https://babeljs.io/) işlədərkən Babel-ın dinamik import sintaksisini təhlil edə bilməsi amma transformasiya edə bilməməsi lazımdır. Bunun üçün siz [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import)-dan istifadə edə bilərsiniz. ## `React.lazy` {#reactlazy} -> Note: +> Qeyd: > -> `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). +> `React.lazy` və Suspense serverdə render etmək üçün hazır deyil. Əgər sizə kod parçalanması server-də render olunan applikasiya üçün lazımdırsa, biz [Loadable Components](https://github.com/smooth-code/loadable-components) işlətməyi tövsiyyə edirik. Bunun [server rendering üçün yaxşı təlimatı var](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). -The `React.lazy` function lets you render a dynamic import as a regular component. +`React.lazy` funskiyası dinamik import olunmuş komponenti adi komponent kimi render etməyə imkan yaradır. -**Before:** +**Əvvəl:** ```js import OtherComponent from './OtherComponent'; @@ -133,7 +107,7 @@ function MyComponent() { } ``` -**After:** +**Sonra:** ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -147,13 +121,13 @@ function MyComponent() { } ``` -This will automatically load the bundle containing the `OtherComponent` when this component gets rendered. +Bu avtomatik olara `OtherComponent` render olduğu zaman, komponent olan paketi yükləyəcək. -`React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component. +`React.lazy` funskiyası mütləq olaraq dinamik `import()` funskiyasını çağırmalıdır. Bu mütləq `default` eksportunda React komponenti olan modulu "resolve" edən `Promise`-ə qaytarmalıdır. ### Suspense {#suspense} -If the module containing the `OtherComponent` is not yet loaded by the time `MyComponent` renders, we must show some fallback content while we're waiting for it to load - such as a loading indicator. This is done using the `Suspense` component. +Əgər `MyComponent` render olunduğu zaman `OtherComponent` olan modul hələ yükənməyibsə, biz modul yüklənənə kimi "fallback" kontenti (məsələn Yükləmə indikatoru) göstərməliyik. Bu `Suspense` komponenti ilə həyata keçirilir. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -161,7 +135,7 @@ const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return (
- Loading...
}> + Yüklənir...}> @@ -169,7 +143,7 @@ function MyComponent() { } ``` -The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component. +`fallback` propu komponent yüklənənə kimi render etmək istədiyiniz React elementini qəbul edir. Siz `Suspense` komponentini lazy komponentin üstündə istənilən yerdə yerləşdirə bilərsiniz. Siz hətta bir neçə lazy komponentləri bir Suspense komponenti ilə əhatə edə bilərsiniz. ```js const OtherComponent = React.lazy(() => import('./OtherComponent')); @@ -178,7 +152,7 @@ const AnotherComponent = React.lazy(() => import('./AnotherComponent')); function MyComponent() { return (
- Loading...
}> + Yüklənir...}>
@@ -189,9 +163,9 @@ function MyComponent() { } ``` -### Error boundaries {#error-boundaries} +### Xəta sərhədləri {#error-boundaries} -If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error. +Əgər modulun yüklənməsi uğursuz keçirsə (məsələn, şəbəkə problemlərinə görə), xəta göstəriləcək. Siz yaxşı İstifadəçi Təcrübəsi üçün bu xətaları tutmaq və bu xətaları bərpa etmək üçün [Xəta Sərhədlərindən](/docs/error-boundaries.html) istifadə edə bilərsiniz. Xəta Sərhədini yaratdıqdan sonra, siz şəbəkə xətası göstərmək üçün bu xəta sərhədini lazy komponentin yuxarısında istənilən yerdə istifadə edə bilərsiniz. ```js import MyErrorBoundary from './MyErrorBoundary'; @@ -201,7 +175,7 @@ const AnotherComponent = React.lazy(() => import('./AnotherComponent')); const MyComponent = () => (
- Loading...
}> + Yüklənir...}>
@@ -212,19 +186,13 @@ const MyComponent = () => ( ); ``` -## Route-based code splitting {#route-based-code-splitting} +## Route əsasında kod parçalaması {#route-based-code-splitting} -Deciding where in your app to introduce code splitting can be a bit tricky. You -want to make sure you choose places that will split bundles evenly, but won't -disrupt the user experience. +Applikasiyanızda harada kod parçalaması etmək biraz çaşdırıcı ola bilər. Siz həmişə İstifadəçi Təcrübəsini pozmamaq və paketləri bərabər ayırlmaq üçün düzgün yerdən applikasiyanı bölməlisiniz. -A good place to start is with routes. Most people on the web are used to -page transitions taking some amount of time to load. You also tend to be -re-rendering the entire page at once so your users are unlikely to be -interacting with other elements on the page at the same time. +Yaxşı başlanğıc nöqtəsi route-lardan bölməni aparmaqdır. Bir çox insan vebdə səhifə keçidlərinin yüklənməsinin zaman aldığına vərdiş ediblər. Bu zaman siz həmçinin bütün səhifəni dərhal yenidən render edirsiniz deyə istifadəçilər eyni zamanda səhifədəki başqa elementlərə qarşılıqlı təsir etmirlər. -Here's an example of how to setup route-based code splitting into your app using -libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`. +Aşağıdakı nümunədə [React Router](https://reacttraining.com/react-router/) və `React.lazy`-dən istifadə edərək applikasiya kodunu route əsasında parçalanması göstərilib. ```js import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; @@ -235,7 +203,7 @@ const About = lazy(() => import('./routes/About')); const App = () => ( - Loading...}> + Yüklənir...}> @@ -245,9 +213,9 @@ const App = () => ( ); ``` -## Named Exports {#named-exports} +## Adlı Eksportlar {#named-exports} -`React.lazy` currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that treeshaking keeps working and that you don't pull in unused components. +`React.lazy` yalnız `default` eksportları dəstəkləyir. Əgər sizin import etmək istədiyiniz modul, adlı eksportlar edirsə, siz bu adlı eksportları yenidən `default` eksport edən ara modulu yarada bilərsiniz. Bu treeshaking-in işlədiyini və lazım olmayan komponentlərin yüklənmədiyini təmin edir. ```js // ManyComponents.js diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md index 257e54e02..95de1b6b5 100644 --- a/content/docs/codebase-overview.md +++ b/content/docs/codebase-overview.md @@ -155,7 +155,7 @@ There are multiple injection points in the codebase. In the future, we intend to ### Multiple Packages {#multiple-packages} -React is a [monorepo](http://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place. +React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place. ### React Core {#react-core} @@ -171,7 +171,7 @@ The code for React core is located in [`packages/react`](https://github.com/face ### Renderers {#renderers} -React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](http://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals. +React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](https://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals. **Renderers manage how a React tree turns into the underlying platform calls.** @@ -211,7 +211,7 @@ Its main goals are: * Ability to return multiple elements from `render()`. * Better support for error boundaries. -You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/index.php/2018/11/29/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet. +You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e). While it has shipped with React 16, the async features are not enabled by default yet. Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler). diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md index 47daaedf9..4b3bbb6e6 100644 --- a/content/docs/components-and-props.md +++ b/content/docs/components-and-props.md @@ -89,7 +89,7 @@ Let's recap what happens in this example: > >React treats components starting with lowercase letters as DOM tags. For example, `
` represents an HTML div tag, but `` represents a component and requires `Welcome` to be in scope. > ->You can read more about the reasoning behind this convention [here.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) +>To learn more about the reasoning behind this convention, please read [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized). ## Composing Components {#composing-components} diff --git a/content/docs/context.md b/content/docs/context.md index 8e41a465f..e7bb925c7 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -54,7 +54,7 @@ For example, consider a `Page` component that passes a `user` and `avatarSize` p It might feel redundant to pass down the `user` and `avatarSize` props through many levels if in the end only the `Avatar` component really needs it. It's also annoying that whenever the `Avatar` component needs more props from the top, you have to add them at all the intermediate levels too. -One way to solve this issue **without context** is to [pass down the `Avatar` component itself](/docs/composition-vs-inheritance.html#containment) so that the intermediate components don't need to know about the `user` prop: +One way to solve this issue **without context** is to [pass down the `Avatar` component itself](/docs/composition-vs-inheritance.html#containment) so that the intermediate components don't need to know about the `user` or `avatarSize` props: ```js function Page(props) { @@ -68,7 +68,7 @@ function Page(props) { } // Now, we have: - + // ... which renders ... // ... which renders ... diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index d3e9357e5..e1985e72f 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -37,7 +37,7 @@ The React team primarily recommends these solutions: ### Create React App {#create-react-app} -[Create React App](http://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React. +[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run: @@ -51,7 +51,7 @@ npm start > >`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). -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](http://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them. +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). @@ -87,7 +87,7 @@ A JavaScript build toolchain typically consists of: * A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time. -* A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers. +* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers. If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md index 555045f4a..9e10f39d5 100644 --- a/content/docs/design-principles.md +++ b/content/docs/design-principles.md @@ -24,7 +24,7 @@ For example, it should be possible to introduce some local state into a componen There is nothing "bad" about using state or lifecycle methods in components. Like any powerful feature, they should be used in moderation, but we have no intention to remove them. On the contrary, we think they are integral parts of what makes React useful. We might enable [more functional patterns](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) in the future, but both local state and lifecycle methods will be a part of that model. -Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](http://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form. +Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](https://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form. ### Common Abstraction {#common-abstraction} @@ -126,7 +126,7 @@ We do, however, provide some global configuration on the build level. For exampl ### Beyond the DOM {#beyond-the-dom} -We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](http://facebook.github.io/react-native/) is just as important both to Facebook and the community. +We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](https://facebook.github.io/react-native/) is just as important both to Facebook and the community. Being renderer-agnostic is an important design constraint of React. It adds some overhead in the internal representations. On the other hand, any improvements to the core translate across platforms. @@ -148,7 +148,7 @@ Optimizing for search is also important because of our reliance on [codemods](ht [JSX](/docs/introducing-jsx.html) plays a similar role. While it is not required with React, we use it extensively at Facebook both for aesthetic and pragmatic reasons. -In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](http://babeljs.io/docs/plugins/transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings. +In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings. ### Dogfooding {#dogfooding} diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md index 102e1c07e..dc2f344ae 100644 --- a/content/docs/faq-ajax.md +++ b/content/docs/faq-ajax.md @@ -1,30 +1,30 @@ --- id: faq-ajax -title: AJAX and APIs +title: AJAX və API-lar permalink: docs/faq-ajax.html layout: docs category: FAQ --- -### How can I make an AJAX call? {#how-can-i-make-an-ajax-call} +### AJAX çağırış nə cür edə bilərəm? {#how-can-i-make-an-ajax-call} -You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). +React ilə istədiyiniz Ajax kitabxanasını işlədə bilərsiniz. Populyar kitabxanalar: [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), və brauzerə qurulmuş [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). -### Where in the component lifecycle should I make an AJAX call? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call} +### Komponent yaşama tsiklinin harasında Ajax çağırışları etməliyəm? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call} -You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved. +Ajax çağırışdan gələn bütün məlumatları [`componentDidMount`](/docs/react-component.html#mounting) yaşama tsikli funskiyasından tətbiq etməlisiniz. Bunun səbəbi, məlumat alındıqda `setState` ilə komponenti yeniləməkdən imkanının olmasıdır. -### Example: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state} +### Nümunə: AJAX nəticələrinin lokal veziyyətə yazılması {#example-using-ajax-results-to-set-local-state} -The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state. +Aşağıdakı komponent `componentDidMount`dan Ajax çağırış edib lokal komponent vəziyyətinin doldurulmasını göstərir. -The example API returns a JSON object like this: +Nümunə API belə bir JSON obyekt göndərir: ``` { "items": [ - { "id": 1, "name": "Apples", "price": "$2" }, - { "id": 2, "name": "Peaches", "price": "$5" } + { "id": 1, "name": "Almalar", "price": "2 AZN" }, + { "id": 2, "name": "Şəftəlilər", "price": "5 AZN" } ] } ``` @@ -50,9 +50,9 @@ class MyComponent extends React.Component { items: result.items }); }, - // Note: it's important to handle errors here - // instead of a catch() block so that we don't swallow - // exceptions from actual bugs in components. + // Qeyd: komponentlərdə olan aktual xətaları udmamaq üçün + // AJAX xetəlarını `catch()` blokunda tutmaq əvəzinə burda + // tutmaq daha vacibdir. (error) => { this.setState({ isLoaded: true, @@ -65,9 +65,9 @@ class MyComponent extends React.Component { render() { const { error, isLoaded, items } = this.state; if (error) { - return
Error: {error.message}
; + return
Xəta: {error.message}
; } else if (!isLoaded) { - return
Loading...
; + return
Yüklənir...
; } else { return (
    diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index 62067d39c..75143c43f 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -108,7 +108,7 @@ Binding methods helps ensure that the second snippet works the same way as the f With React, typically you only need to bind the methods you *pass* to other components. For example, `