New React Docs #3308
Comments
|
What will the translation process be like? The current translation bot merges everything from the original repo's The easiest approach would be to create a new |
|
Always great news to here from the React Core Team. Excited to see the new website. |
|
I think the visual diagrams of how React works will be incredibly helpful. It will encourage the benefits of how React. I am the type of person that likes to know how and why just as much as what when learning something. There is a bit of a mirage when learning React and why it is a great solution to frontend development. Getting a visual example of when a component updates and its relative child components update will go a long way to people understanding the concept. |
|
Great! A good moment and place to put all experience gathered from explain complex concepts from Just JavaScript @gaearon AIR? |
|
As a suggestion for an awesome react hook tutorial form 'EpicReact.Dev' https://github.com/kentcdodds/react-hooks |
|
Just asking In future, is there any chance that Class Components becoming deprecated ? They are really cool to play around. |
|
Adding my two cents, please add a "Why use react" section. I still reference the first talk I've seen that explained why was react invented in the first place. People learn and teach the "how" not the "why", and I think this has two major results:
I'm sorry if this seems like a rant, and its not your fault, but people tend to forget, and as time passes by, it seems that more and more forget why we chose react in the first place. |
I like to use Class Components and I hope it will never be deprecated |
|
Thank you all for your feedback! Love reading your thoughts here! To answer a few concerns:
We're still figuring this out! As we start having more to share, we'll reach out to the translation community and adopt a plan that works for everyone. (Thanks for your suggestion, btw! Good idea!)
Class components are going to be around for years to come—for example, there are tens of thousands in production at Facebook already. However, we do recommend that new apps be built with function components and Hooks, which is why we want those docs front and center. The class component docs will remain available for folks working with those components, and class components themselves might one day be spun out into their own package—but if that did happen, we're provide migration scripts to automate that transition :) |
|
Hi @rachelnabors! As a core maintainer of the 🇭🇺 Hungarian docs translations, I welcome this update to the docs, as - while working through the docs myself - I too noticed a need for a refresh. Although, I am now wondering as since we haven't fully finished the translations, how much of the content is expected to change in the next version? Will we be able to transfer some of the translations, or should we start from scratch when the new docs come out? Our progress has slowed over time (reactjs/hu.react.dev#1) as life caught up and got busy with other stuff, but I am still motivated to contribute at my own pace! (There were periods when I was able to translate a dozen pages in a matter of days). Either way, an estimate of the change in % could give a picture of the forthcoming work to be done, not counting new content. If things could be transferred, do you think this can be done in some kind of an automated/semi-automated process? Thanks! |
|
I think there’s a high chance most of the content would be rewritten from scratch. |
|
Thanks @gaearon! I did not have high hopes anyway, but it is good to know, we will then probably not invest too much into translating new pages, only maintain the current ones by merging the weekly PRs, except if someone with a lot of free time would consider translating anyway. I used up all my energy on work in the last weeks/months. |
|
thanks @rachelnabors ! |
|
I would like to see more content on the CSS in React. I am aware that React is generally not opinionated when it comes to implementing CSS but it would still be great to see some guides on the subject.... and documentation of stuff like |
|
Can you tell us more about |
|
To introduce functional component first for new users This is the idea of @0xca0a on Twitter. I totally agree with him. Introducing React with class-based component makes new users push back away from learning React. |
|
Yes, this is exactly what the post is saying:
|
I think it would be helpful in general to have the TypeScript definitions mentioned or simply a link to the documentation of those and other definitions if possible. If the community using TypeScript with React is large enough, it would be nice to have documentation for people using React with TypeScript. It is not difficult to figure out but could be easier to figure out if there is documentation to read. |
|
@michaeldera Have you found any external resources on this topic particularly helpful? E.g. https://github.com/typescript-cheatsheets/react? Maybe we could integrate or link to them. |
|
Not sure if it falls under the issue, but I'd love to dive deeper into concepts like reconciliation. While there plenty of examples available, it would be nice to have official docs covering this as well. |
|
@iljadaderko Tell us more about what aspects you feel isn't adequately covered? |
|
Hi guys! |
|
Hi everyone, hope you're having a great day! |
|
This is an awesome change! I learned react back in 2020 with the old docs, and was really surprised when coworkers told me to use hooks, since I had just gone over the class based docs. I was unaware of hooks back then, but since getting to know them, feel that they are a 1000% improvement to react. I love that the docs are being updated to reflect these changes, so that now I can revisit the docs and deepen my react knowledge with up-to-date info! |
|
I thought of a little improvement that maybe could be considered for the future. The current quick start guide for the tic tac toe show a bunch of issues with the dependencies of the project. I think this is not very beginner friendly and maybe those deps could be updated so that less (or no) warnings appear upon running |
|
Hi, |
|
I'm struggling with the writing style in the new docs As a specific example... I read this over a few times and I just kept getting confused.
"Each component has fully isolated state. For example, if you render two Counter components, each will get their own independent score and hover states". Maybe it's just me, but I think this reads a lot nicer. The sentence I chose was cherry-picked but I think most the docs could use some similar updates. In general though I'm excited for the new docs! Thank you team! |
I have the same error reported by @Taschenbuch above.
I am following the tutorial using the online codesandbox but I tried to download the zip and run it locally. The I ignored the suggestion to run Ideas? |
I think the errors are popping up because the codesandbox is not handling all the installations well it creates a duplicated package file and public folder both in and out the src folder. To avoid that all what you can do is to create a react app from scratch with vite https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite or create react app https://create-react-app.dev/docs/getting-started and start coding |
|
@JJJ4032002 that was more a feedback for the docu to fix it. currently the tutorial tells you you can use that export but it is not working. |
|
Code blocks are not displayed in PDF export in React Doc Beta on Safari I have noticed an issue with the React Doc Beta documentation. When exporting the webpage to PDF format in Safari, the code blocks are not displayed in the output file. This makes it difficult to read the content and is especially problematic for those who prefer to print the documentation for offline use. To help the React team understand the issue, I have created some illustrations that demonstrate how the code examples appear blank in the PDF file. Many users, including myself, prefer to read documentation on paper rather than on a screen. This is because reading on a screen can cause eye strain and other negative effects, particularly with extended use. Additionally, reading on paper allows for greater flexibility in note-taking and annotating, which is important for many users who want to retain and review the information in the documentation. Therefore, it is important to ensure that the documentation can be easily printed and read in paper format, especially for those who rely on printed material for accessibility or preference reasons. I suggest that the React team consider addressing this issue to ensure that users can continue to access the documentation in a convenient and effective way. While this may not be a pressing issue, it is still an important issue to address. Thank you for your attention to this matter.
|
|
you need to https://reactjs.org/docs/react-dom-client.html#hydrateroot |
[source] If you really mean that the list of functions that are called on class components are meant to be pure, then state it explicitly. Right now it is unclear whether |
|
"on.." is not the event name. https://beta.reactjs.org/learn/responding-to-events#naming-event-handler-props https://beta.reactjs.org/reference/react-dom/components/common#event-handler "onClick" is not an event. the event is "click", the eventhandler is "onClick". |
|
Time to close this issue? Congrats to the whole team, and thank you for this amazing well written documentation. 🎉 |
|
YAY 🎉 I've been subscribed to this issue for so long. So happy to see this launch finally. Thanks to everyone who contributed! |
|
These new docs are incredible, well done 🍻 |
|
React new docs are awesome for beginners and I think it is to be best doc in any framework. Thanks for update. |
|
The recent update of the React documentation has been positively received for its user-friendly approach, particularly for beginners in the field. This revision appears to have been strategically designed to simplify the learning process and improve comprehension of the React core concepts. However, there seems to be an issue with the installation section in the documentation. This may pose a challenge for beginners attempting to learn React, as they may not be familiar with the inner workings of Next.js or Remix, which are currently highlighted. It would be beneficial to give more prominence to other viable options, such as Vite and Parcel, to provide users with a more comprehensive selection of installation methods. |
The matter at hand deserves careful and thoughtful consideration. |
|
The left sidebar on the new docs doesn't seem efficient, at least on desktop screens. At first, neither of the links fired a response, and then, about a minute later, they seemed to work but with extreme lag and jitter. Here's a possible cause and effect:
Furthermore, a UX issue that I've found was that clicking on the expanded menus didn't seem to close them. This is a common trend amongst collapsible menus to toggle between expanded and collapsed states from the same anchor. |
|
Feedback for Context section: "This is why context is often used in combination with state." If "often" is the case, I feel an example is called for. The "level" example using a simple number is great as a first example, but just hand-waving over "state is often used" doesn't make the article as helpful as it could be. |
|
文档错别字，从头开始写成了“葱头开始”，页面连接：https://react.bootcss.com/learn/start-a-new-react-project |
|
I'm going to close this issue since the whole repo is about the new docs now. If something's not addressed, please file a specific issue. |
and others
Updated September 29, 2022! We're close to completing the remaining pages, and there is now a link to the Beta site from the main site.
Updated October 22, 2021! We have released React Docs Beta. See more details in the announcement and leave feedback on this issue!
Updated June 10, 2021! Full details in this comment.
Over the next months, we're planning to rebuild our website with fresh content!
Since Hooks have become increasingly popular in the React community, we have heard from confused learners as well as industry trainers asking why the docs are still so class component-centric. Additionally, while more and more educational materials for React are being created every day, there are still things not being taught because we have failed to explain them well.
We want to make reactjs.org the best place to grok React. We want to be there with you from the moment you make your first component, to well into your career as your React knowledge deepens and advances.
The plan
The new docs will teach React Hooks-first, with a focus on “how to think in React” and deeply grok React over building an app in React. (There are many amazing frameworks with full stacks, tutorials, and learning paths we will point people to for a holistic kickstart.) We’ll have a section on React’s core concepts as well as an expanded and concise API reference.
Anyone can learn React
We want React to be accessible to learners of all backgrounds, so we’re going to expand our coverage to include:
Because so much of this is going to be new content with a different structure, most of the existing documentation will be archived rather than edited. (Don’t worry: you’ll still be able to access our “class”-ic docs for legacy and migration work and we’ll set up redirects where appropriate!)
To ensure consistent voice and narrative, Dan and Rachel will start by writing the core of the new content, but later on we will be accepting community contributions as usual when everything is in place.
We’re also surveying the community to learn how you use reactjs.org so we can see what’s working and what isn’t. If you have five minutes to spare, we’d love if you could take our 2020 community survey!
Translations
With the help of our wonderful translators, more people than ever before have access to React. We want to thank our translation community so much for their hard work and commitment to React's v1 docs. Their efforts have allowed people all over the world to learn, teach, and build with React, and we will need their help more than ever when v2 launches. We’ll reach out to start coordinating as soon as we have content ready to translate.
What to expect
We’re aiming to launch the new docs in early 2021. We've got the initial structure in place and are working on a new site we're wrangling design resources for. We've sharing early stage outlines with individual teachers and learners to gather feedback, and as we have more and more content prepared, we will start publishing previews to gather even more feedback. This is an iterative process, and we want to get this right! In the meantime, if you’re looking for the React docs with Hooks, check out this community-maintained version of the docs where all examples use Hooks.
Help us help you! Take the survey!
Want to help? We’re running a survey to help better understand and measure the React community, your needs, and where we can do better. If you have a moment, you’ll be helping us a lot! Please take our survey—and share it with your team, classmates, other people who use and learn React.
The text was updated successfully, but these errors were encountered: