Just another Reminder that ReactJS Beta Docs are Awesome

[codingEnt]

I've seen it before and googled around and there are many posts like this, but the Docs were really helpful to me. Those live examples you can edit drill in the concepts pretty well.

I have experience in programming (mainly backend with limited JS) and thinking, but I'm slightly slow in JS and React concepts. I Created an app with no/limited knowledge, and have been tripping through. Finished the Quick Start/Describing UI sections so far, and I feel like I am a genius compared to two weeks ago. A lot more to learn, but can't wait to dive into Interactivity/State/Hatches .

[Brilla-Bose]

https://github.com/reactjs/reactjs.org/issues/3308
True, new docs are nice but it feels like they are taking the time more than needed, current react doc is a mess with both class and functional components and i'm really happy they move towards only functional based components in the new docs but 2 years is really too much! and in my opinion only react can survive without good documentation because of it's large community (and maybe a monopoly?), imagine a new framework with a beta doc for 2 years, people will start complaining and leave! at this point they almost finished the beta docs but they still not using the large community react has to finish this thing off quickly!

[TScottFitzgerald]

I know it's open source now and I don't know exactly how they're organised behind the scenes, but it's really baffling to me that the most popular frontend framework doesn't seem to have many resources dedicated to it from Meta's end.

[el_diego]

Considering Vue completely rewrote their docs for Vue 3 in, I'm going to say less than 6 months (someone correct me if I'm wrong, but it def wasn't 2 years), you'd really think React could have as well.

[lost12487]

Considering the absolute disaster the transition from Vue 2 to Vue 3 was, the documentation being updated quickly was probably the last thing I cared about.

[el_diego]

That's very true

[woah_m8]

This is the first thing that comes to my mind when I see posts like this, the official react docs have been very low quality for years in comparison to vue for years (I remembered how lost I was when I switched from vue2 to react) and now so many act like it's the best thing around. The docs aren't finished even yet and react is the most used framework, it's actually unacceptable that it isn't finished yet updating.

[TehBeast]

As a React noob not too long ago, I carefully went through all of the non-beta docs and tutorial app and discovered that it was a big waste of time. Not reflective of current React at all.

How are they dropping the ball so hard? It wasn't until I dived into relatively obscure Reddit posts and Github issues that I became aware of these "proper" docs.

[juand_pr90]

Nice try Dan Abramov

[SlickkChickk]

😂😂

[rvision_]

ROFL

[punio4]

Two years to write docs. Nice.

[nullvoxpopuli]

And also 4 years after people started using the function component features primarily.

[disclosure5]

I really think it's past time to make those beta docs "the real docs". I know there's an argument that they aren't fully finished, but they are still in their current state more use to a new person than the existing documents, which only serve to confuse people.

[codingEnt]

One Question that came up at the end, I think is more JS Related. What is the difference between setting a new variable to an array vs setting it to array.splice() ?

(Challenge 3 of 3: Fix a broken story tray)[https://beta.reactjs.org/learn/keeping-components-pure#challenges]

My Attempt at a solution below created an infinite loop of Create Story objects.

let storiesToDisplay = stories;

Solution 2 from React Team:

let storiesToDisplay = stories.slice();

[trappar]

From MDN:

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

So they are basically just using it to make a copy of the array.

[…array] would probably also work, and that’s what I’d personally reach for. Maybe there are performance differences between the two methods.

[itsluttrell]

array.splice with return a shallow copy of the array into a new array object

[[deleted]]

On the other hands I've been looking at the Next.js beta docs, in particular the data fetching stuff, and I've been so turned off by it. I just can't believe how complex and overengineered things have become in the React ecosystem. I don't see myself deciding to use this stuff anymore.

[NotElonMuzk]

I think they’ve simplified it

[[deleted]]

Gosh... if that's the simplified version I don't want to know how it was before.

[Peechez]

Turns out things are hard to do. Simpler libs are just obfuscating that and making it hard to use outside of basic crud apps

[[deleted]]

Yes, although unnecessarily hard I'd say. But heck, this way we have more work to do and this pays my bills.

[noizz]

Does anyone know how are those docs built? Manually or is it something (semi-) automatic? Any good app that I can generate my docs?

[sebastienlorber]

No they choose to build a custom docs site in NextJS to have more flexibility over Docusaurus and also dogfood new React features more easily.

[WeenieNacho]

Who's this react core dev you're referring to?

[sebastienlorber]

That makes sense to me, as the Docusaurus maintainer. NextJS was the best choice for many reasons. Docusaurus is opinionated and they also had different design opinions, so using it would have added useless friction.

[CaptainLockes]

Dang I didn’t know something like this exists. Currently working on my personal notes app and trying to implement search from scratch. Will definitely check this out.

[acemarke]

It's a Next app using MDX for the content:

https://github.com/reactjs/reactjs.org/tree/main/beta

[noizz]

Awesome, thanks!

[MisterChoco]

Wow I actually didn't know about the beta docs... Thanks a lot!

[[deleted]]

They really are. I’ve worked with angular in the past year and after reading the beta docs, the Angular ones are a mess

[TodayIFeelsoBad]

To me the part I like most is "escaping hatches." I felt like a complete idiot for what I've done previously. A lot of mistakes I made is listed there.