ericdiviney / react-handbook Goto Github PK

Should be self-explanatory, but basically on smaller devices, I think the flex layout of these components makes them appear sort of centered. Let's try to keep it consistent and left-align the text on mobile as well if possible.

Examples, we could probably use some tables in the React Frameworks page, since we're comparing several together. This would make skimming this page a lot easier and more digestible, while being clearer about the differences between each framework vs running your own meta framework with dependencies.

simple

I think this is just a z-index or layering issue. Notice the screenshot below:

On the hooks page (https://react-handbook-one.vercel.app/hooks) we should really go into more detail on useRef, useCallback, and useMemo. I think useReducer has the content it needs, just maybe should be rewritten for clarity on when to use it.

For this issue, we need to review each of the .mdx pages under src/pages - and any links to github or library domains should be replaced with links to their npm packages. This is a more universal format and we should adopt it everywhere.

https://www.joshwcomeau.com/react/common-beginner-mistakes/

Just find a good place to put it with the other references we have on the "React Basics" page.

I'd really like to use a custom scrollbar thats not so ugly/bulky on the left-hand-side of the pages.

https://www.radix-ui.com/docs/primitives/components/scroll-area

Can we try implementing something like the above, and be sure it works on mobile devices? I did pull this in at one time and give it a try, but it broke the hamburger and header actions on mobile - so want to be aware of that before we ship something like this.

Keeping the draft/published versions separated in Google Docs vs the repo is becoming a challenge. After the site is done with the latest edits, let's do an export into Google Docs to get all synced up.

I have an idea to have 2 pages for the following type of information:

File templates for Context providers, quick-n-dirty global state with useContext/useState, barrel files and explanation, currying for tons of providers, custom hooks, higher order components, unit/integration/e2e test templates

Basically just a bunch of files people can copy + paste into their project so their not starting from scratch everytime they create a new test file or component file or context file. Just speed up development a tad.

Add ANOTHER new page near component templates - Random component tips and tricks (small tips like the following):
- using key={} to reset state for a component
- Easier conditional JSX logic blocks
- others?
These are just little nuggets that senior react devs have living in their heads.

• state management libs
• hooks / advanced usage and concepts
• performance
• other "coming soon" links in the sidebar

It is possible to write typescript using only JSDOC. I am not famiiar with the approach, but we should at least mention that on the page where we also suggest jsdoc. I wasn't even aware, and it is a different way that teams can ensure type-safety.

https://www.prisma.io/blog/type-safe-js-with-jsdoc-typeSaf3js

• Web components
• Monorepos
• Controlled vs uncontrolled form components and when to use them

I read this article recently (https://www.joshwcomeau.com/react/file-structure/#hooks-5) and it was a very good alternative to the bulletproof-react repo structure. I think variety is fine on this page, as some people won't like the "feature" approach, and this is probably the best alternative I've seen to that.

Include a simple statement like "If you're not a fan of the approach above due to how it groups by feature, you might like this alternative approach by Josh Comeau instead.

There are several files I ran through way too quickly and did not clean up before pushing the state management article. I was a little too excited to get it published and also was nearing my deadilne. Anyways, the file that ideally could be cleaned up is:

• src/components/StateTldr.jsx

Please hop in the discord and briefly chat with me before taking it on, just to discuss a general direction that can end up in reusable components/sections for other guides we may write.

Ideas:

• Turn the tab/accordion (desktop/mobile) into a generic component that's reusable in pages
• Create a component to wrap all hyperlinks in (both in jsx components and .mdx files) to automatically open new tabs/windows only when linking off-site

Add some color or something here. This is a simple page but could pop a little more. Maybe add a gradient to the cards of some kind on hover? Whatever we choose it should be subtle and match the tone/style of the rest of the site styles.

• People coming to the site might not have any idea who Andrew Clark is or why his tweet is embedded. Add a description and link so people know why we are quoting him.

"Andrew Clark is a core contributor to React whose recent work includes Hooks, Server Components, and Suspense."

Double check all pages for references to "I" or "me" or "my" and change to "we" or "our"

2. State Management is a great example here, since we want to publish an advanced guide.
   • this should be just like the "You will learn" summary at beginning of pages, say that we're working on more material and we'd be open to contributions

Other pages that could use something like this:
- hooks
- state management
- automated testing
- ecosystem (always adding)

We should consider adding code editor, so that users can interact with code samples directly on the website.

We might also consider adding playground at some point, where users can write and play with code (similar to CodeSandbox or JSFiddle) that is tailored to React

Existing file explorer: https://reacthandbook.dev/project-standards

• For the existing structures - add more files in each folder
• https://www.robinwieruch.de/react-folder-structure/
• https://blog.webdevsimplified.com/2022-07/react-folder-structure/
  4/4 from this one: https://twitter.com/_georgemoller/status/1678374278511697920?s=20

Be sure to give credit and link directly back to the sources here.

Hello, The transition destination to the Qwik page under 'High-Performance Websites' on the Framework page resulted in a 404 error. The issue is with the following part of the code:

• reword the project structure content to be if you go with an SPA. Maybe make the recommendation to go with SPA less certain, and more like “you’ll probably move quicker”. Also note that going with a framework probably means they encourage opinionated file structures and those should be followed.

We use inline SVG code to generate the icon shown in tab headers of browsers, in _app.jsx.

That is the "folder". But in the /public directory, we have a static image that looks like a blue briefcase, this was the original image I went with for a logo. But I personally like the emoji combination we've been consistently using around the site: ⚛🤌

Is it possible to generate those two emojis as an image file, or should we choose a new logo/icon for the favicon?

This is the link I want to add: https://react-typescript-cheatsheet.netlify.app/

I think it can just be added to the other list of resources in that section, below the 'NO BS TS' link.

Just for quality of life - we should catalog all the components in our project and display them sort of like a design system or just use storybook to demonstrate.

A way to make this simple would be to Add a link in the footer, only visible on localhost, that opens a new page that demonstrates all the UI components on the site and provides the ts props interface for each

Throughout the site, we very frequently reference the react docs, which were recently published under react.dev domain. Since we were linking to the beta version of the docs (beta.reactjs.org) - we should update all links going to the docs so users can avoid a quick redirect.

Goal:
Any hyperlink on the site that goes to a beta.reactjs.org domain should be replaced with the react.dev equivalent. For any pages that are no longer maintained or result in 404 not found errors, please add to this issue so we can discuss that particular link and any alternatives we might have.

When transferring content from Google Docs -> MDX files, unnecessary bolding happened in a lot of areas. Examples on the "React Basics" page:

No BS TS

We should remove the double asterisk at the beginning and end of this markdown node so that and tags aren't rendered in the actual webpages themselves.

With the new release of the React docs (https://react.dev/) yesterday, which look great for the record, we should re-evaluate some of the content we have on our site. I think the framework comparison could at least be modified so that we don't repeat the same things the React docs are already saying.

In general, I think this large update to their docs is a good thing, even if it makes a lot of the content we wrote obsolete or just repeated what they've written.

I still think the mission here is valid, and there is room to improve the other topics that the React docs don't cover great (ecosystem, actually comparing the frameworks, learning resources outside of the docs for the frameworks, etc.)

Secondly, I'd like to propose a more real-time tool like discord or slack to use so that we can all chat regularly on project updates. This would make management of the project easier as well as a method of quickly getting feedback/communication from the wider team.

("I", "me") and replace with "we" or neutral language. Example:

"I wouldn't recommend doing xyz...."
to:
"It is not recommended to do XYZ because..." or "We don't recommend xyz for the following reasons.."

It's probably better to try and re-write most things in a way that there is no subject or framing from a person's perspective.

Sort of a "after you've done your first issue, go ahead and add yourself to this page" initiation thing.

This is not a terribly complex one, just a big one that will have a lot of file changes and due diligence. Eric should probably take this one on.

The article: https://www.robinwieruch.de/vite-create-react-app/

The page and section I'm talking about:

Add a nested bullet point so that the text on the page reads like this:

• Vite is the current recommended alternative
  • Read this guide on migrating your app from CRA to Vite

Try to move the lists into these 3 categories:

• form componenets (datepickers, dropdowns, buttons, form libraries, input masking etc.)
• interactive (drag-n-drop, table, visualizations, resizable, grid-layout, guided tours, pdf viewer, cropper, carousels/swipers)
• passive (loading states, virtualization, internationalization, device detection, polyfills,)

Use the Radix hover card for seeing details of someone.

https://www.radix-ui.com/docs/primitives/components/hover-card

Eric Willroth suggested a neat resource: https://www.w3.org/WAI/ARIA/apg/patterns/

Let's do several things:

• Rename "JavaScript Basics" to "JS / TS Fundamentals"
• We need to search the site for links to this page ^^ to update any link titles that need it
• Rename "React Basics" to "React Fundamentals"
• We would also need to search the site for links that go to this page ^^ and update accordingly

Finally, let's add this resource to the typescript resource list:

• typescript.tv/errors - how to fix your confusing TypeScript errors

We should add the image (with credit/citation) from this page: https://www.semrush.com/blog/semantic-html5-guide/

It's a great visual way to quickly understand for HTML what semantic means. Also, we should rewrite the headers for each section to be more descriptive:

• "Why" -> "Why is Semantic HTML Important"
• "A Warning" -> "Bad Practices to Avoid"

The image/banner can be directly linked to the SEM rush asset right below the "A11Y = Accessibility" bullet point in the first section. We should also provide credit right below the image to the original webpage. This can be a simple note like "Image provided by SEMRush.com"

I think all we need to do is sign up for Algolia open-source search. Eric will look into this pretty soon.

Some improvements I need to make:

• replace "I" and "me" with "we" and "our"
• "js / ts" -> "javascript / typescript" -> JavaScript / TypeScript (correct spelling and capitalization, everywhere)
• "react" -> "React"
• "next" -> "Next.js"

https://react.miletadulovic.me/React+Knowledge+Base

Specifically, I really liked what he wrote in:

• Components basics
• Hooks
• Common React Patterns

Here's the resource: https://exploringjs.com/es6.html

Maybe provide a small line about the focus on es6, can just paraphrase whatever the site says. "the most comprehensive book on ECMAScript 6"