New React Docs - Githubissues

Hi! I noticed that the new documentation lacks explanation on how some form HTML elements like work in React? It would be nice to have the information available at <a href="https://reactjs.org/docs/forms.html#the-select-tag">this page</a> in the new docs!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Re: <a href="https://github.com/reactjs/reactjs.org/issues/3308#issuecomment-1249376097">https://github.com/reactjs/reactjs.org/issues/3308#issuecomment-1249376097</a></p> <p>Yeah that will be added.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Re: <a href="https://github.com/reactjs/reactjs.org/issues/3308#issuecomment-1243907408">https://github.com/reactjs/reactjs.org/issues/3308#issuecomment-1243907408</a></p> <p>Agree, I'll simplify it.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/iShibi"><img src="https://avatars.githubusercontent.com/u/51517103?v=4" />iShibi</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Currently, the search bar in the sidebar vanishes on scrolling down. Keeping it always in view would be nice for UX.</p> <p>Similar to TailwindCSS docs: <a href="https://tailwindcss.com/docs/installation">https://tailwindcss.com/docs/installation</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/JJJ4032002"><img src="https://avatars.githubusercontent.com/u/68580684?v=4" />JJJ4032002</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>In the lesson Lifecycle of Reactive effects of escape Hatches, <a href="https://beta.reactjs.org/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means">What an Effect with empty dependencies means</a> section's code sandbox has a small mistake. The roomId props is still being passed in the ChatRoom component even though it is not being used there. <img src="https://user-images.githubusercontent.com/68580684/190867134-e96c1733-6af9-4d23-b12e-cbcfe3c76947.png" alt="chatroom" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Re: <a href="https://github.com/reactjs/reactjs.org/issues/3308#issuecomment-1250101477">https://github.com/reactjs/reactjs.org/issues/3308#issuecomment-1250101477</a></p> <p>Thanks, fixed in <a href="https://github.com/reactjs/reactjs.org/commit/a6c164d66a25821fa56928de303f657d3cffcc1b">https://github.com/reactjs/reactjs.org/commit/a6c164d66a25821fa56928de303f657d3cffcc1b</a>.</p> <p>Re: <a href="https://github.com/reactjs/reactjs.org/issues/3308#issuecomment-1249932907">https://github.com/reactjs/reactjs.org/issues/3308#issuecomment-1249932907</a></p> <p>Is this reproducible on built-in Android browser, or Kiwi browser specifically? I'm not sure what engine/version Kiwi is.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/smoooty"><img src="https://avatars.githubusercontent.com/u/10714296?v=4" />smoooty</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Something I see people try to do is define a component as a closure inside another component (usually in order to use some value in the parent scope). I think this is not usually a good pattern and can lead to bugs.</p> <pre><code class="language-jsx">const ParentComponent = (props) => { const ChildComponent = () => { return (<span>hello, {props.name}</span>); } return (<div><ChildComponent /></div>); }</code></pre> <p>Is my understanding correct that this should be avoided? Would it be worthwhile to include a note about it somewhere in maybe "/learn/your-first-component" or "/learn/keeping-components-pure"?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/olliequ"><img src="https://avatars.githubusercontent.com/u/60557827?v=4" />olliequ</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>As someone who wants to learn React and has stumbled across the 'original' docs, and this new beta docs, which one is it recommended for me to go through? I'm hesitating on beta because it's not yet fully finished (~95%, right?) and based on this Issues page lacks a few things. Not sure if they're minor things, though. I'm having trouble evaluating this trade-off.</p> <p>Also, is there an estimate as to when the original docs will have a banner saying to move to the new beta docs (i.e. the official 'move-to-the-new-docs' date?)? Thanks :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/markerikson"><img src="https://avatars.githubusercontent.com/u/1128784?v=4" />markerikson</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@olliequ absolutely 100% go with the new beta docs. The API ref isn't 100% done, but it is <em>absolutely</em> the right place to start learning:</p> <ul> <li><a href="https://beta.reactjs.org">https://beta.reactjs.org</a></li> </ul> <p>(per earlier in the thread, I've been begging for the beta docs to be at least visibly linked from the new ones for <em>months</em> now, but the concern was that they were too incomplete and people might get confused. 🤷‍♂️ seems like the primary tutorial content is done and the API ref is being filled out now, so hopefully soon-ish?)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Hear, hear. After <a href="https://github.com/reactjs/reactjs.org/pull/5103">https://github.com/reactjs/reactjs.org/pull/5103</a> is finished and merged, we will link to the beta site prominently from the main one. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lhendriks1"><img src="https://avatars.githubusercontent.com/u/51144422?v=4" />lhendriks1</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>One thing I'm trying to wrap my head around in the <a href="https://beta.reactjs.org/learn/queueing-a-series-of-state-updates">Queuing a Series of State Updates</a> lesson is...early in the lesson it says </p> <p>"The UI won’t be updated until after your event handler, and any code in it, completes. This behavior, also known as batching..."</p> <p>but in the first challenge ("Fix a request counter") if you click the "Buy" button 1x, you can see the Pending count switch from 0 to 1 to -1. Based on the earlier statement about batching I thought that those updates would be batched, meaning it would go straight from 0 to -1? Not sure if this is something obvious that I'm not understanding, or maybe it's worth explaining this behavior in the solution to the challenge?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/michal-markiewicz"><img src="https://avatars.githubusercontent.com/u/69077012?v=4" />michal-markiewicz</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@lhendriks1 </p> <p>I did that lesson today actually and had same problem of wrapping my head around it lol. I believe it's because you have await before second setter function, so second setter function is waiting for this await to finish. But as you said the way docs explained it, it should probably wait for await to finish, second setter function to run and then and only then rerender. But it rerenders after first setter function. I guess, but idk why.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Oh yeah that's a good catch. Batching, indeed, won't work across the <code>await</code> calls. I'll add to a TODO list of edits.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Siilwyn"><img src="https://avatars.githubusercontent.com/u/5701149?v=4" />Siilwyn</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Noticed there is no mention of the jsx file extension (.jsx) in the <a href="https://beta.reactjs.org/learn/importing-and-exporting-components#exporting-and-importing-a-component-exporting-and-importing-a-component">Exporting and importing a component</a> section. Curious why, as I recently joined a project where <code>.js</code> is used which causes my editor to not highlight the JSX inside. Using the jsx extension seems more appropriate, right?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/smikitky"><img src="https://avatars.githubusercontent.com/u/7779406?v=4" />smikitky</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@Siilwyn No. <code>*.jsx</code> has long been considered legacy. See <a href="https://github.com/airbnb/javascript/pull/985#issuecomment-239145468">this</a> and <a href="https://github.com/facebook/create-react-app/issues/87">this</a>. You should configure your editor so that it understands JSX in <code>*.js</code> files. (On the other hand, <code>*.tsx</code> is still widely used because it <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-6.html#new-tsx-file-extension-and-as-operator">tells the TypeScript compiler to parse code differently</a>.)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Siilwyn"><img src="https://avatars.githubusercontent.com/u/5701149?v=4" />Siilwyn</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>@smikitky ah thanks for your reply. I have to say I find that very backwards as a file extension should indicate what syntax a file contains, that's me being a purist, but good to know jsx is still supported.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>It's kind of tricky. Early on there were a lot of competing syntaxes. So <code>.jsx</code> wouldn't give you the full idea anyway — it could've had Flow syntax, or some experimental <code>stage-0</code> proposal, or something else. It's weird if you're using non-standard syntax like Flow in a <code>.js</code> file but then JSX is out of question. Now that JS extensions have mostly settled, and TypeScript chose <code>.ts</code> / <code>.tsx</code> distinction, maybe there's an argument that we should follow. In practice, in my opinion, the mental burden of renaming the files there and back whenever you need to add a bit of JSX makes it too annoying.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>The banner is up.</p> <p><a href="https://github.com/reactjs/reactjs.org/pull/5134">https://github.com/reactjs/reactjs.org/pull/5134</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/vwkd"><img src="https://avatars.githubusercontent.com/u/33468089?v=4" />vwkd</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Great to see new docs with the most modern practices!</p> <p>However, why are we still using the <code>className</code> attribute everywhere if <code>class</code> is supported for a while now?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/smikitky"><img src="https://avatars.githubusercontent.com/u/7779406?v=4" />smikitky</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>If I understand correctly, <code>.tsx</code> was introduced many years ago not because it had a practical merit, nor because it was "ethically" correct, but simply because it was impossible to extend <code>.ts</code> without breaking compatibility. Technically, <code>.tsx</code> is not a superset of <code>.ts</code>. For example, <code>const a = <Foo>b;</code> is a valid type-cast syntax in <code>.ts</code> but is an error in <code>.tsx</code>. <code>.js(x)</code> has had no such problem. Besides, one of the big recent changes is that people have started to use file extensions to distinguish module types (<code>.mjs</code> and <code>.cjs</code>). Although we need to keep using <code>.tsx</code> for historical reasons, I think it's best to forget <code>x</code> everywhere else. There is no good reason to revive <code>.jsx</code> today and also introduce <code>.cjsx</code>, <code>.mjsx</code>, <code>.mtsx</code> and <code>.ctsx</code>.</p> <p>In any case, it would be desirable to discuss file extension on a FAQ page or in a deep-dive section.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gmoniava"><img src="https://avatars.githubusercontent.com/u/77232558?v=4" />gmoniava</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p><a href="https://beta.reactjs.org/apis/react/useRef#avoiding-recreating-the-ref-contents">Docs</a> say I can do this in render(although in many cases not recommended):</p> <pre><code>function Video() { const playerRef = useRef(null); if (playerRef.current === null) { playerRef.current = new VideoPlayer(); } ...</code></pre> <p>Can I also do this?</p> <pre><code>function MyComp() { const flag = useRef(false); if (flag.current === false) { flag.current = true; SomeExternalObj.sideeffect(); // I want this to run once } ...</code></pre> <p>I want the <code>sideeffect</code> to run once. Motivation could be like <a href="https://stackoverflow.com/questions/68679889/how-do-i-give-axios-interceptors-access-to-my-react-apps-state">this</a>, registering interceptor instead of calling <code>sideeffect</code>.</p> <p>its not clear from new docs if I can do this, @gaearon can you clarify?</p> <p>Ps. Using effect for this won't work as effects of child components may run first. Pps. In strict mode even this version will run twice, but apart from that, is it ok?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/michal-markiewicz"><img src="https://avatars.githubusercontent.com/u/69077012?v=4" />michal-markiewicz</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>Hey in lesson "Importing and Exporting Components" challenge 1 of 1, when I write code I run into this error everytime: </p> <p><code>Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of App. at App</code></p> <p>It shows even though the code is the same as in solution and it only goes away when you remove everything and copy and paste same code. I think it's something worth checking or at least giving a note about it, people can spend significant amount of time trying to get this error go away, even though their solution is perfect.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jmacqueen"><img src="https://avatars.githubusercontent.com/u/5197963?v=4" />jmacqueen</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>On the <code>/learn</code> page, in the final code sample, I think it would be clearer for the new user if, the first time you show passing in props to a component function, you don't dereference and instead use <code>props</code> (or something similar) as a parameter e.g.</p> <pre><code class="language-jsx">function MyButton(props) { return ( <button onClick={props.onClick}> Clicked {props.count} times </button> ); }</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/clarkgunn"><img src="https://avatars.githubusercontent.com/u/7844500?v=4" />clarkgunn</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p><a href="https://beta.reactjs.org/learn/sharing-state-between-components#step-3-add-state-to-the-common-parent">https://beta.reactjs.org/learn/sharing-state-between-components#step-3-add-state-to-the-common-parent</a> presents the terms "Controlled and uncontrolled components" to indicate components with local state vs state-less, whereas the original docs use these terms to mean form components which either rely either on react state or the DOM as the "source of truth".</p> <p>I would think overloading these terms in this way might cause confusion.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/garicluka"><img src="https://avatars.githubusercontent.com/u/94909435?v=4" />garicluka</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>In a "Keeping Components Pure" in Describing the UI, in 3rd challange (Fix a broken story tray), once I solve the challange, the screen is still showing all previous "Create Story" and console is having 100 warnings about keys of previous elements in stories array. </p> <p>I tried copying solution right after I reset the challange few times but its still doing the same thing.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bobrocha"><img src="https://avatars.githubusercontent.com/u/4595326?v=4" />bobrocha</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Can formal or proper terminology be provided as well where appropriate? For example the section "Describing the UI " starts off by mentioning JSX and doesn't actually define it until you get to "Writing Markup with JSX"</p> <p>Other than that great docs, love all the examples.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bobrocha"><img src="https://avatars.githubusercontent.com/u/4595326?v=4" />bobrocha</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>On the <code>/learn</code> page, in the final code sample, I think it would be clearer for the new user if, the first time you show passing in props to a component function, you don't dereference and instead use <code>props</code> (or something similar) as a parameter e.g.</p> <pre><code class="language-js">function MyButton(props) { return ( <button onClick={props.onClick}> Clicked {props.count} times </button> ); }</code></pre> </blockquote> <p>Agree with this, most of the code online uses props, new devs might be confused as to what is going on.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lizzthabet"><img src="https://avatars.githubusercontent.com/u/23283986?v=4" />lizzthabet</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>one of my minor complaints with the existing docs is that the search functionality isn't accessible directly by url, like <code>/docs/search?q=usestate</code>. </p> <p>i use a tool called alfred to define custom shortcuts to search documentation i use often, so i can search, for example, the redux docs in one step with <code>https://redux.js.org/search?q=reducer</code>. </p> <p>without being able to search by url, it takes me an extra step to open the react docs and then search them. not a huge deal, but it's a little time saver. 🙂 i'd love it if the new docs supported search queries. (i think i've seen algolia offer this out-of-the-box with its "see all results" functionality.)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/noah-weingarden"><img src="https://avatars.githubusercontent.com/u/33741795?v=4" />noah-weingarden</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>The new docs seem biased in favor of using a boolean flag to avoid race conditions with data fetching in <code>useEffect</code>, as opposed to using <code>AbortController</code>.</p> <p>Examples:</p> <ol> <li><a href="https://beta.reactjs.org/learn/synchronizing-with-effects#fetching-data">https://beta.reactjs.org/learn/synchronizing-with-effects#fetching-data</a></li> <li><a href="https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks">https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks</a></li> <li><a href="https://beta.reactjs.org/learn/you-might-not-need-an-effect#fetching-data">https://beta.reactjs.org/learn/you-might-not-need-an-effect#fetching-data</a></li> </ol> <p>Is there any particular reason why these pages don't prioritize and give examples of <code>AbortController</code> instead? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/AyushKoul00"><img src="https://avatars.githubusercontent.com/u/46340004?v=4" />AyushKoul00</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I am new to learning react. How is the beta react docs created? What technologies/frameworks were used?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@lizzthabet that's a cool idea, would you be interested in exploring a PR to implement this?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Is there any particular reason why these pages don't prioritize and give examples of AbortController instead?</p> </blockquote> <p>AbortController wouldn't be sufficient unless you use it very, very carefully. Remember that there could be a few async steps between the fetch and setting the state, but aborting would only cancel the initial fetch callback. If aborting happens after, it's on you to make sure the code doesn't do anything. So effectively you have to write logic that's very similar to a flag anyway.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gmoniava"><img src="https://avatars.githubusercontent.com/u/77232558?v=4" />gmoniava</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Would be nice to have links for "Deep Dive" sections. Sometimes I want to refer someone to it, but can't get a direct link to it. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/noah-weingarden"><img src="https://avatars.githubusercontent.com/u/33741795?v=4" />noah-weingarden</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>AbortController wouldn't be sufficient unless you use it very, very carefully. Remember that there could be a few async steps between the fetch and setting the state, but aborting would only cancel the initial fetch callback. If aborting happens after, it's on you to make sure the code doesn't do anything. So effectively you have to write logic that's very similar to a flag anyway.</p> </blockquote> <p>Thanks for the explanation! It might be worth adding a note with a similar point where <code>AbortController</code> is mentioned on the "Synchronizing With Effects" page to make it clear that <code>AbortController</code> isn't a simple substitution for a boolean flag.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/melissapthai"><img src="https://avatars.githubusercontent.com/u/3220734?v=4" />melissapthai</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Hello! New contributor here. I noticed some typos in the new beta docs that lead to the "Not Found" page and would like to open a PR to fix them. I followed the instructions per the <a href="https://github.com/reactjs/reactjs.org#getting-started">Getting Started</a> section and am able to open the reactjs.org site locally. However, I'm not sure how to access the beta docs on the browser locally, as the only link to it goes to the production <a href="https://beta.reactjs.org">beta.reactjs.org</a> site.</p> <p>To clarify, I can make the code changes to the beta docs locally, but I'm unsure how to test them. Any guidance would be greatly appreciated!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/noah-weingarden"><img src="https://avatars.githubusercontent.com/u/33741795?v=4" />noah-weingarden</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@melissapthai Are you CDed into <code>beta</code>? The instructions are <a href="https://github.com/reactjs/reactjs.org/tree/main/beta#getting-started">slightly different</a> for running the beta docs server.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/melissapthai"><img src="https://avatars.githubusercontent.com/u/3220734?v=4" />melissapthai</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Ah ok I didn't realize there is another readme in the beta folder, wasn't clear from the root folder. Thanks, it works now :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/faisalamin001"><img src="https://avatars.githubusercontent.com/u/58821374?v=4" />faisalamin001</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I am new to learning react. How is the beta react docs created? What technologies/frameworks were used?</p> </blockquote> <p>Follow the new beta docs: Classes were exchanged with Hooks. (my favorite part) Interactive examples and visual diagrams were added. (beginners friendly)</p> <p>Thanks, @gaearon </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/saurabhp75"><img src="https://avatars.githubusercontent.com/u/12612293?v=4" />saurabhp75</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I think, I have found a minor issue in the beta docs. The first solution to "Fix a broken story tray" challenge in "Keeping Components Pure" section should have a key prop for the list item like below.</p> <p><code><li key={'create'}>Create Story</li></code></p> <p>instead of </p> <p><code><li>Create Story</li></code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>If there are simple fixes, PRs are very appreciated. It is difficult to track each individual comment in the thread.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kylegundrum"><img src="https://avatars.githubusercontent.com/u/1379527?v=4" />kylegundrum</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@gaearon </p> <blockquote> <p>that's a cool idea, would you be interested in exploring a PR to implement this?</p> </blockquote> <p>I'd be willing to take this on if you haven't already, @lizzthabet?</p> <p>I think the Redux docs are a great example of this functionality with docsearch. The global search bar opens a modal with a link at the bottom to "See all <em>x</em> results". This navigates to a dedicated search page accessible at <code>/search?q=term</code>. </p> <p>The old and beta React docs only offer the search modal displaying the top 5 results. Is it intentional that there isn't a standalone search page? If so, could go with a simpler implementation to detect a <code>?search=term</code> query string from any page (or maybe just the homepage) and open the search modal with the initial query. But I'd think the full search page with all results is more useful.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I think for now opening a modal from URL sounds fine.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zelfroster"><img src="https://avatars.githubusercontent.com/u/93514460?v=4" />zelfroster</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>There is some overlapping of sidebar on the main content. <img src="https://user-images.githubusercontent.com/93514460/197062283-fedc866a-52c9-4a2f-8e7c-9043b1acc762.png" alt="image" /> <img src="https://user-images.githubusercontent.com/93514460/197062386-68de096e-60ec-44eb-90fd-df5215b4d809.png" alt="image" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lizzthabet"><img src="https://avatars.githubusercontent.com/u/23283986?v=4" />lizzthabet</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <blockquote> <p>that's a cool idea, would you be interested in exploring a PR to implement this?</p> </blockquote> <p>I'd be willing to take this on if you haven't already, @lizzthabet?</p> <p>go for it, @kylegundrum!</p> </blockquote> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Ramjonchhen"><img src="https://avatars.githubusercontent.com/u/46254432?v=4" />Ramjonchhen</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Hello everyone. I would like to know the process of how to raise an issue for the bug founded on the <a href="https://beta.reactjs.org/">https://beta.reactjs.org/</a> (beta react docs). I think I have founded a potential issue on the beta docs and would like to know the procedure to raise the issue. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/harish-sethuraman"><img src="https://avatars.githubusercontent.com/u/32865581?v=4" />harish-sethuraman</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@zelfroster Feel free to raise a bug and send a PR in case you found the root cause. The same bug is not reproducible on my device 😞 </p> <p>@Ramjonchhen You can raise an issue in the issues tab (<a href="https://github.com/reactjs/reactjs.org/issues/new">https://github.com/reactjs/reactjs.org/issues/new</a>) and we can track it from there.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Ramjonchhen"><img src="https://avatars.githubusercontent.com/u/46254432?v=4" />Ramjonchhen</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Thank You @harish-sethuraman for answering the query and helping out.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/SecondThread"><img src="https://avatars.githubusercontent.com/u/18317476?v=4" />SecondThread</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Is there any way to disable the political advertisements on the header of the react page? They are obnoxious and I'd like to remove political arguments from docs explaining programming syntax.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Shivam-Dhyani"><img src="https://avatars.githubusercontent.com/u/69079491?v=4" />Shivam-Dhyani</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>API Reference section seems very unstructured in the beta version, while it was simpler to understand in the current docs.</p> <p>Also, the font size in previous docs was better!!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gaearon"><img src="https://avatars.githubusercontent.com/u/810438?v=4" />gaearon</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@Shivam-Dhyani Can you please be more concrete about what you mean by "unstructured" and "simpler to understand"? These are somewhat vague terms, and it would help if you listed some concrete comparisons.</p> </div> </div> <div class="page-bar-simple"> <a href="/reactjs/react.dev/3308?page=6" class="previous">Previous</a> <a href="/reactjs/react.dev/3308?page=8" class="next">Next</a> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

reactjs / react.dev

New React Docs #3308

The plan

Anyone can learn React

Translations

What to expect

Help us help you! Take the survey!