ericdiviney / react-handbook Goto Github PK
View Code? Open in Web Editor NEWβπ€ Modern approaches to architecture and feature development in React apps.
Home Page: https://reacthandbook.dev
License: MIT License
βπ€ Modern approaches to architecture and feature development in React apps.
Home Page: https://reacthandbook.dev
License: MIT License
I think all we need to do is sign up for Algolia open-source search. Eric will look into this pretty soon.
Existing file explorer: https://reacthandbook.dev/project-standards
Be sure to give credit and link directly back to the sources here.
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
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.
("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.
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"
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:
react-handbook/src/pages/frameworks.mdx
Line 117 in da6843d
Sort of a "after you've done your first issue, go ahead and add yourself to this page" initiation thing.
Eric Willroth suggested a neat resource: https://www.w3.org/WAI/ARIA/apg/patterns/
simple
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:
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:
Other pages that could use something like this:
- hooks
- state management
- automated testing
- ecosystem (always adding)
Let's do several things:
Finally, let's add this resource to the typescript resource list:
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.
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.
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.
When transferring content from Google Docs -> MDX files, unnecessary bolding happened in a lot of areas. Examples on the "React Basics" page:
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.
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.
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.
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.
Use the Radix hover card for seeing details of someone.
https://www.radix-ui.com/docs/primitives/components/hover-card
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.
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
Try to move the lists into these 3 categories:
https://react.miletadulovic.me/React+Knowledge+Base
Specifically, I really liked what he wrote in:
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.
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:
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?
"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"
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.
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
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.
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:
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"
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.
Some improvements I need to make:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.