React DevTools v4 blog post #2199
Conversation
|
Deploy preview for reactjs ready! Built with commit c34f1c6 |
|
For folks who haven't been following along, what do you mean by "A lot has changed!" (since...?) |
|
"the extension should update " can you link to the extension for folks who haven't installed it yet? |
|
The header above says that we're announcing a new release, so I think "a lot has changed [in the new release]" is implied, but I could add "in version 4" if you think that's better? |
| @@ -0,0 +1,63 @@ | |||
| --- | |||
| title: "Introducing the new React DevTools" | |||
There was a problem hiding this comment.
Nit: capitalize "New"? We don't always do that but mostly do for announcement posts
There was a problem hiding this comment.
That's what threw me off. I couldn't tell if these were new or a new version (hence my comment about "a lot has changed since..." above!)
| title: "Introducing the new React DevTools" | ||
| author: [bvaughn] | ||
| --- | ||
| We are excited to announce a new release of the React developer tools, available today in supported browsers! |
There was a problem hiding this comment.
Nit: capitalize Developer Tools?
There was a problem hiding this comment.
Re: "supported browsers", can we be more specific? It doesn't tell you much since obviously it's unavailable in unsupported browsers — and if you don't know e.g. that FF is supported, this doesn't tell you either. Or we could remove the qualifier altogether if you don't want to go into detail.
There was a problem hiding this comment.
Sure. I had listed Chrome, Firefox, and Chromium Edge at first but then thought maybe it was too wordy and deleted it. I can re-add.
| ## What's changed? | ||
|
|
||
| A lot has changed! | ||
| [Check out the changelog](https://github.com/bvaughn/react-devtools-experimental/blob/master/CHANGELOG.md) for a complete list. |
There was a problem hiding this comment.
People generally expect changelogs to be boring and might not look. But yours is actually pretty beautiful, even with gifs. I'd maybe copy and paste these gifs here, people like to see pretty pictures. Maybe not all of them if you would rather keep it short.
Alternatively you could make a bullet point summary for major changes that make it feel worth it ("a lot has changed" is actually a bit scary), and then conclude "To see the demos and learn about the changes in more detail, see the changelog".
There was a problem hiding this comment.
I like the last one, bullets with a link.... and a gif?
| **`react-dom`** | ||
|
|
||
| * `0`-`14.x`: Not supported | ||
| * `15.x`: Partial (component filters not supported) |
There was a problem hiding this comment.
This looks like a downgrade. But component filters are a new feature. Maybe there's another way to phrase it to make it look additive rather than diminishing.
|
|
||
| ```shell | ||
| npm install -g react-devtools@^4 | ||
| ``` |
There was a problem hiding this comment.
Maybe link to the standalone instructions here.
| npm install -g react-devtools@^4 | ||
| ``` | ||
|
|
||
| ## Where did all of the DOM elements go? |
| npm install --dev react-devtools@^3 | ||
| ``` | ||
|
|
||
| For older versions of React DOM (v14 or earlier) you will need to build the extension from source: |
| yarn build:extension | ||
|
|
||
| # Follow the on-screen instructions for installation | ||
| ``` |
There was a problem hiding this comment.
This leaves no opportunity to voice feedback. Maybe add "Thanks" where you say you're thankful to people who tried it early, and note that we're happy to hear feedback on twitter or in the repository. (This doesn't mean we'll act on every single piece of feedback, but we need a space for people to complain and report issues to).
There was a problem hiding this comment.
Hm, fair. I guess I assumed people would not hesitate to tweet at us or file GH issues as they usually do. I'll add an explicit thanks section though with feedback instructions.
bvaughn
force-pushed
the
new-react-devtools
branch
from
19a3bc3 to
3ebf44e
Compare
bvaughn
force-pushed
the
new-react-devtools
branch
from
3ebf44e to
d2b38d3
Compare
| ## What's changed? | ||
|
|
||
| A lot has changed in version 4! | ||
| At a high level, this new version should offer significant performance gains and an improved navigation experience. |
There was a problem hiding this comment.
I still feel like there should be at least one flagship feature here. Maybe add "This release also offers full support for React Hooks, including inspecting nested objects."
| React DevTools is available as an extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/). | ||
| If you have already installed the extension, it should update automatically within the next couple of hours. | ||
|
|
||
| Standalone users (e.g. React Native or Safari) can install the new version [from NPM](https://www.npmjs.com/package/react-devtools): |
There was a problem hiding this comment.
Maybe "If you use the standalone shell (e.g. in React Native or Safari), you can [...]"
"Standalone users" is odd
|
|
||
| ## Where did all of the DOM elements go? | ||
|
|
||
| The new DevTools provides a way to filter components from the tree to make it easier to navigate large applications. |
There was a problem hiding this comment.
This sounds like we're biased towards larger apps. Maybe:
The new DevTools provides a way to filter components from the tree to make it easier to navigate deeply nested hierarchies.
There was a problem hiding this comment.
I thought "larger apps" might be more meaningful to beginners or non-native speakers than "deeply nested hierarchies". I don't feel strongly about this though.
| Your feedback helped improve this initial release significantly. | ||
|
|
||
| We still have many exciting features planned and feedback is always welcome! | ||
| Please feel free to open a [GitHub issue](https://github.com/bvaughn/react-devtools-experimental/issues/new) or tag [@brian\_d\_vaughn on Twitter](https://twitter.com/brian_d_vaughn). |
There was a problem hiding this comment.
Oof, you're brave. Can put just reactjs account there.
Re: issues, probably want to update the link?
|
|
||
| A lot has changed in version 4! | ||
| At a high level, this new version should offer significant performance gains and an improved navigation experience. | ||
|
|
There was a problem hiding this comment.
Just one screenshot or a gif here, pretty please? I need to see what I'm gonna be using.
First pass at v4 release blog post. I decided to keep this pretty high level (with the details being in the changelog) so that it could hopefully answer all of the most important questions at a glance.
Release date and React Native version is arbitrary. I just needed something to fill in.
View the formatted blog post