*NEW* React Docs (Beta)

Michelle McGee
3 min readNov 28, 2021

--

The Meta team have done a fantastic job updating the React docs and have created a beta version for users to try: https://beta.reactjs.org/

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. Whilst React was originally written by Jordan Walke. It’s maintained by Meta (formerly Facebook) team and a community of over a thousand open source contributors. Meta is updating the React documentation and have released a beta website that is given out to a group of users to try under real conditions. Meta will gather user feedback to update the documentation. The React Beta website will eventually be switched to the main React website and the old React website will be archived at a subdomain so it will still be accessible.

Meta have decided to update the React docs as React Hooks have become increasingly popular, and the current documentation are focused on class components. Initially Rachel Nabors and Dan Abramov (and Sylwia Vargas creating example code) will be creating the new content to ensure a consistent voice throughout the documentation however later they will accept community contributions as usual.

The developers at Meta 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” and want React to be accessible to all types of learners.

What will the new documentation will expand on?

  1. All explanations are written using Hooks rather than classes.

2. Explanations of more complex programming concepts for beginners

3. Support of different learning styles:

— Visual (spatial): for learners that prefer using picture, images and spatial understanding by adding visual diagrams and explanations

An example of diagrams from the beta React docs for visual learners

— Physical (kinesthetic or tactile): for learners that prefer carrying out physical activities by adding interactive code examples.

An example of interactive code snippets from the beta React docs for kinesthetic learners

4. Preparing learners for real world debugging by integrating the use of React DevTools and lint rules early.

5. Guides include challenges (with solutions) to check the users understanding.

How to Give Feedback

As it’s a beta website and still in progress there will be missing content, bugs, and performance issues. For more information on how to provide feedback please see this link: https://beta.reactjs.org/#how-can-i-provide-feedback

Also there is a feedback button in the bottom left corner of the screen which opens a pop up box to provide a rating and then the option to provide written feedback.

The feedback button on the beta React docs

Day and Night/Light and Dark Mode

The React docs have a great feature that gives the user the option to switch between the day and night mode by clicking a button at the top left on the website.

React beta docs day and night mode

Whilst dark text on light background is more widely used for better readability and focus during the day. Light text on a dark background can be useful to programmers as the more time spent concentrating on reading or writing in front of a screen, the more straining it is on our eyes.

--

--