* Update "Refs and the DOM" documentation
As function components can now have state through hooks, remove the part that mentions converting a function component to a class component to be able to use state.
* Update refs-and-the-dom.md
Co-authored-by: Sophie Alpert <git@sophiebits.com>
We might want to open an RFC for fragment refs which could solve the one
remaining use case in a better way but at least let us get the deprecation
in.
Correct a typo in the render method comments for the "CustomTextInput" component of the "Adding a Ref to a DOM Element" example. The first line of the comments reads "tell React that we want the associate the <input> ref". The word "the" should be "to" resulting in the comment "tell React that we want to associate the <input> ref".
Adds a new docs website, built with Gatsby JS, to replace the old Jekyll site. Source code for the new site lives in /www (although markdown and YML data still comes from the legacy /docs folder).
Changes to either markdown or website source code can be previewed on Netlify. The react-js bot should automatically add comments to each PR with preview links. (This preview is generated by running the newly-added yarn build:docs command in the root package.json.)
The majority of the changes in this PR are contained within the new /www directory. However some minor modifications have been made to existing content in the /docs directory:
* Modified frontmatter author block to always be an array
* Small markdown formatting tweaks
After realizing this was the second time I've visited this exact page within a year and second guessing myself that the `textInput` ref isn't actually the `<input />` element. I decided to attempt to make this a little more explicit; you are actually accessing the method on the child class and not the `focus` method on the dom input element. Having them named the same caused some confusion.
* Add note about refs on stateless components
* Move info about refs in the stateless components to the main section
* Simplification of the part about refs and functional components
* Tweaks
* Move sections around
* Oops
* Rearrange more sections
* Explain arbitrariness of ref name in callback
The sample code was confusing because it's not clear that "textInput" in this.textInput is an arbitrary name for the ref.
* Tweak wording
* Update refs-and-the-dom.md
I want to propose some changes to the Refs and the DOM documentation page.
- Make it clear that string refs are legacy. It seems that this information got lost during the transition to new docs and only some part stayed the same, which was confusing when first reading the docs.
- Clarify and explain that during render, if the ref callback is provided, it will get called twice, first with `null` and then with the rendered DOM element. Discussed in https://github.com/facebook/react/issues/4533 and first proposed docs change in PR #8333.
I've also planned on adding an example for passing the refs up the component chain based on something I've needed to solve myself (e.g. you want to connect two dynamic components by line in React, so you need to both use refs and propagate them up the chain), and while it would be great to read up on this in the docs, it may be too specific for this section; I'd be happy to hear any recommendations.
* Adds more specific information about the callback
* Moved the ref callback description to the Caveats section
* Fixed suggested nits
* Replace 'each render pass' with 'updates'
* Tweak the wording
Myron Yeung
numb86
Evrim Persembe
Nat Alison
Sebastian Markbåge
Dan Abramov
Dmitry Minkovsky
Marc Bouchard
Alex Krolick
Brian Vaughn
Alex Krolick
Alex
Dominic Gannaway
Kenneth Powers
Anuja Ware
Brian Emil Hartz
Max Donchenko
Frankie Bagnardi
Sunny Ripert
KB
Omid Hezaveh
Vladimir Tikunov
Tomáš Hromada
Arni Fannar
Kevin Lacker