67 |
98 | )
99 | }
100 |
--------------------------------------------------------------------------------
/src/components/Expand.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import clsx from 'clsx'
3 |
4 | export function Expand({ children, parent }) {
5 | const [hidden, setHidden] = useState(true)
6 |
7 | function toggleHidden() {
8 | setHidden(!hidden)
9 | }
10 |
11 | return (
12 |
68 |
84 |
69 | {Icon}
70 |
71 | {label}
72 |
73 |
74 |
75 |
82 |
83 |
85 |
97 | :first-child]:mt-0 [&>:last-child]:mb-0',
88 | {
89 | 'animate-enterFromTop': isOpen,
90 | 'hidden': !isOpen
91 | }
92 | )}
93 | >
94 | {children}
95 |
96 |
13 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/FAQ.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import * as AccordionPrimitive from '@radix-ui/react-accordion'
3 | import { clsx } from 'clsx'
4 |
5 | export function FAQ({ children }) {
6 | return (
7 |
14 |
37 |
38 |
39 |
51 | :first-child]:mt-0 [&>:last-child]:mb-0 px-0 py-2',
42 | {
43 | 'hidden': hidden,
44 | 'animate-enterFromTop': !hidden,
45 | }
46 | )}
47 | >
48 | {children}
49 |
50 | {children}
58 |
11 |
21 | )
22 | }
23 |
24 | function PageLink({ label, page, previous = false }) {
25 | return (
26 | <>
27 |
35 |
41 | {page.title}
42 |
43 |
44 | )
45 | }
46 |
47 | function PageNavigation() {
48 | let router = useRouter()
49 | let allPages = navigation.flatMap((group) => group.links)
50 | let currentPageIndex = allPages.findIndex(
51 | (page) => page.href === router.pathname
52 | )
53 |
54 | if (currentPageIndex === -1) {
55 | return null
56 | }
57 |
58 | let previousPage = allPages[currentPageIndex - 1]
59 | let nextPage = allPages[currentPageIndex + 1]
60 |
61 | if (!previousPage && !nextPage) {
62 | return null
63 | }
64 |
65 | return (
66 |
12 | Have recommendations?{' '}
13 |
67 | {previousPage && (
68 |
78 | )
79 | }
80 |
81 | function GitHubIcon(props) {
82 | return (
83 |
90 | )
91 | }
92 |
93 | function SocialLink({ href, icon: Icon, children }) {
94 | return (
95 |
101 | {children}
102 |
69 |
71 | )}
72 | {nextPage && (
73 |
74 |
76 | )}
77 |
112 |
117 |
118 | )
119 | }
120 |
121 | export function SocialLinksList() {
122 | return (
123 | 113 | © Copyright {new Date().getFullYear()}. All rights reserved. 114 |
115 |
124 |
128 | Follow on GitHub
129 |
130 |
131 | );
132 | }
133 |
134 | export function Footer() {
135 | return (
136 |
140 | )
141 | }
142 |
--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from 'react'
2 | import Link from 'next/link'
3 | import clsx from 'clsx'
4 | import { motion, useScroll, useTransform } from 'framer-motion'
5 |
6 | import { Logo } from '@/components/Logo'
7 | import { SocialLinksList } from '@/components/Footer'
8 | import {
9 | MobileNavigation,
10 | useIsInsideMobileNavigation,
11 | } from '@/components/MobileNavigation'
12 | import { useMobileNavigationStore } from '@/components/MobileNavigation'
13 | import { ModeToggle } from '@/components/ModeToggle'
14 | import { MobileSearch, Search } from '@/components/Search'
15 |
16 | function TopLevelNavItem({ href, children }) {
17 | return (
18 |
62 |
63 |
66 |
68 |
73 |
74 |
82 |
83 |
88 |
84 |
87 |
30 | {tag && {tag} }
31 | {tag && label && (
32 |
33 | )}
34 | {label && (
35 | {label}
36 | )}
37 |
38 | )
39 | }
40 |
41 | function Anchor({ id, inView, children }) {
42 | return (
43 |
47 | {inView && (
48 |
49 |
53 | )}
54 | {children}
55 |
56 | )
57 | }
58 |
59 | export function Heading({
60 | level = 2,
61 | children,
62 | id,
63 | tag,
64 | label,
65 | anchor = true,
66 | ...props
67 | }) {
68 | let Component = `h${level}`
69 | let ref = useRef()
70 | let registerHeading = useSectionStore((s) => s.registerHeading)
71 |
72 | let inView = useInView(ref, {
73 | margin: `${remToPx(-3.5)}px 0px 0px 0px`,
74 | amount: 'all',
75 | })
76 |
77 | useEffect(() => {
78 | if (level === 2) {
79 | registerHeading({ id, ref, offsetRem: tag || label ? 8 : 6 })
80 | }
81 | })
82 |
83 | return (
84 | <>
85 |
50 |
52 |
34 |
38 |
145 |
159 | setHoveringNav(true)}
40 | onMouseLeave={() => setHoveringNav(false)}
41 | data-state={`${isHoveringNav || isNavigationOpen ? 'open' : ''}`}
42 | className={clsx(
43 | 'group contents min-w-[55px] bg-white transition-all dark:bg-zinc-900 lg:pointer-events-auto lg:mt-12 lg:block lg:border-r lg:border-zinc-900/10 lg:px-4 lg:pb-8 lg:dark:border-white/10',
44 | '',
45 | {
46 | 'shadow hover:shadow-xl': !isHoveringNav,
47 | 'shadow-xl': isHoveringNav,
48 | }
49 | )}
50 | >
51 |
56 |
108 |
136 |
140 |
142 |
143 |
144 |
59 |
106 |
107 |
114 |
135 |
124 |
134 |
131 |
133 |
153 |
154 | {children}
155 |
156 |
157 |
158 |
52 |
53 | Official libraries
54 |
55 |
81 | )
82 | }
83 |
--------------------------------------------------------------------------------
/src/components/Logo.jsx:
--------------------------------------------------------------------------------
1 | export function Logo(props) {
2 | return (
3 |
56 | {libraries.map((library) => (
57 |
80 |
58 |
78 | ))}
79 |
59 |
71 | 60 | {library.name} 61 |
62 |63 | {library.description} 64 |
65 |66 | 69 |
70 |
4 | ⚛ 🤌
5 | React Handbook
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/MobileNavigation.jsx:
--------------------------------------------------------------------------------
1 | import { createContext, Fragment, useContext } from 'react'
2 | import { Dialog, Transition } from '@headlessui/react'
3 | import { motion } from 'framer-motion'
4 | import { create } from 'zustand'
5 |
6 | import { Header } from '@/components/Header'
7 | import { Navigation } from '@/components/Navigation'
8 |
9 | function MenuIcon(props) {
10 | return (
11 |
20 | )
21 | }
22 |
23 | function XIcon(props) {
24 | return (
25 |
34 | )
35 | }
36 |
37 | const IsInsideMobileNavigationContext = createContext(false)
38 |
39 | export function useIsInsideMobileNavigation() {
40 | return useContext(IsInsideMobileNavigationContext)
41 | }
42 |
43 | export const useMobileNavigationStore = create((set) => ({
44 | isOpen: false,
45 | open: () => set({ isOpen: true }),
46 | close: () => set({ isOpen: false }),
47 | toggle: () => set((state) => ({ isOpen: !state.isOpen })),
48 | }))
49 |
50 | export function MobileNavigation() {
51 | let isInsideMobileNavigation = useIsInsideMobileNavigation()
52 | let { isOpen, toggle, close } = useMobileNavigationStore()
53 | let ToggleIcon = isOpen ? XIcon : MenuIcon
54 |
55 | return (
56 |
133 |
134 | {isActiveGroup && (
135 |
138 |
143 | {isActiveGroup && (
144 |
147 |
185 | -
148 | {group.links.map((link) => (
149 |
-
169 |
174 | {section.title} 175 | 176 |
177 | ))}
178 |
4 |
6 | )
7 | }
8 |
9 | export function SimpleRow({ children, header = false }) {
10 | if (header) {
11 | return (
12 | {children}
5 |
13 | {children}
14 |
15 | )
16 | }
17 | return (
18 |
19 | {children}
20 |
21 | )
22 | }
23 |
24 | export function SimpleCell({ children, header = false }) {
25 | if (header) {
26 | return (
27 |
28 |
32 | )
33 | }
34 | return (
35 |
29 | {children}
30 |
31 |
36 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/StepList.jsx:
--------------------------------------------------------------------------------
1 | import { clsx } from 'clsx'
2 |
3 | export function Step({ children, last }) {
4 | return (
5 |
37 | {children}
38 |
39 |
15 |
16 |
17 | {/* bullet marker */}
18 |
19 |
20 |
21 | {/* list text */}
22 |
23 | {children}
24 |
25 | -
41 | {children}
42 |
12 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/Tab.jsx:
--------------------------------------------------------------------------------
1 | import * as RadixTab from '@radix-ui/react-tabs'
2 |
3 | import clsx from 'clsx'
4 | import * as React from 'react'
5 |
6 | export function Tabs({ children, defaultValue }) {
7 | return
13 |
16 |
20 | 17 | {title} 18 |
19 |
21 | {children}
22 |
23 |
32 |
33 | {title}
34 |
35 | {children}
36 |
50 |
51 |
56 |
62 | )
63 | }
64 |
--------------------------------------------------------------------------------
/src/components/Tweet.jsx:
--------------------------------------------------------------------------------
1 | import { TwitterTweetEmbed } from 'react-twitter-embed';
2 |
3 | export function Tweet({ tweetId }) {
4 | return (
5 |
57 | {topics.map((resource) => (
58 |
61 |
6 |
8 | );
9 | }
--------------------------------------------------------------------------------
/src/components/mdx.jsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import clsx from 'clsx'
3 | import { Heading } from '@/components/Heading'
4 |
5 | export const a = Link;
6 | export { CodeGroup, Code as code, Pre as pre } from '@/components/Code';
7 | export * from '@/components/Accordion'
8 | export { Button } from '@/components/Button';
9 | export * from '@/components/Details';
10 | export * from '@/components/Expand';
11 | export * from '@/components/FAQ';
12 | export * from '@/components/LeadHeading'
13 | export * from '@/components/PillTab';
14 | export * from '@/components/Resource';
15 | export * from '@/components/Summary';
16 | export * from '@/components/StepList';
17 | export * from '@/components/Tab';
18 | export * from '@/components/Tweet';
19 |
20 | export const h2 = function H2(props) {
21 | return
43 |
48 | )
49 | }
50 |
51 | export function Row({ children }) {
52 | return (
53 |
45 | {children}
46 |
47 |
54 | {children}
55 |
56 | )
57 | }
58 |
59 | export function Col({ children, sticky = false }) {
60 | return (
61 | :first-child]:mt-0 [&>:last-child]:mb-0',
64 | sticky && 'xl:sticky xl:top-24'
65 | )}
66 | >
67 | {children}
68 |
69 | )
70 | }
71 |
72 | export function Properties({ children }) {
73 | return (
74 |
75 |
82 | )
83 | }
84 |
85 | export function Property({ name, type, children }) {
86 | return (
87 | -
79 | {children}
80 |
-
89 |
- Name 90 |
-
91 |
{name}92 |
93 | - Type 94 |
- 95 | {type} 96 | 97 |
- Description 98 |
- 99 | {children} 100 | 101 |
31 |
76 | )
77 | }
78 |
79 | function MemberCard({ person, large = false }) {
80 | const { description, image, name, socials } = person
81 |
82 | const size = large ? `w-16 h-16` : `w-8 h-8`
83 |
84 | return (
85 |
32 |
66 |
67 |
33 |
34 | Core Team
35 |
36 |
37 |
38 | {core.map((person) => (
39 |
42 |
43 |
44 | Special thanks to:
45 |
46 |
47 |
65 | -
48 |
-
49 |
Josh Claunch - someone we repeatedly go to for feedback/advice on things I'm writing, and for having very advanced knowledge of state management in React applications 50 |
51 | -
52 |
Anthony Conklin - someone else we can always rely on for fresh feedback 53 |
54 | -
55 |
Theo-Flux for being the first person to contribute to the project besides myself, giving us hope that we're working on something worthwhile 56 |
57 | -
58 |
59 | Tono Nogueras{' '} 60 | {' '} 61 | for significant contributions to the React Native guide 62 |
63 |
68 | Join 10+ other{' '}
69 |
88 |
92 | {/* eslint-disable-next-line @next/next/no-img-element */}
93 | 
99 |
100 |
101 |
108 | {/* eslint-disable-next-line @next/next/no-img-element */}
109 |
114 |
153 |
115 |
152 |
116 |
118 | {name}
117 | {description}
119 |
120 | {socials.twitter && (
121 | <>
122 |
126 | Twitter
127 |
128 |
129 | )}
130 | {socials.linkedin && (
131 | <>
132 |
136 | Linkedin
137 |
138 |
139 | )}
140 | {socials.github && (
141 | <>
142 |
146 | GitHub
147 |
148 |
149 | )}
150 |
151 |
6 |
251 | )
252 | }
253 |
--------------------------------------------------------------------------------
/src/components/pages/Standards.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import { useState } from 'react'
3 | import { Resource } from '@/components/Resource'
4 | import {
5 | PillTabs,
6 | PillTabsList,
7 | PillTabsTrigger,
8 | PillTabsContent,
9 | } from '@/components/PillTab'
10 | import { bulletproofStructure, scaleStructure, simpleStructure } from './Standards-Config';
11 | import type { DirectoryExplorerProps, DirectoryItemType, DirectoryItemProps } from './Standards-Config';
12 |
13 | export function DirectoryExplorerTabs() {
14 | return (
15 |
7 |
250 |
8 |
9 |
130 |
10 |
129 |
11 |
29 |
12 |
24 |
25 | Gatsby
26 |
27 |
28 |
30 |
98 |
31 |
93 |
94 | Next.js
95 |
96 |
97 |
99 |
128 |
100 |
123 |
124 | Remix
125 |
126 |
127 |
131 |
148 | Good for:
132 |
133 |
147 |
134 | Static websites, Content-driven websites, SEO-friendly websites,
135 | High-traffic sites w/ non-dynamic content (Blogs, Marketing,
136 | Portfolio, Documentation)
137 |
138 |
139 | Static websites, SEO-friendly rendering, Fast dynamic apps/sites,
140 | SPAish Support (via export)
141 |
142 |
143 | SEO-friendly rendering, Fast dynamic apps/sites, Deploying
144 | "to the edge"
145 |
146 |
149 |
199 | Learning Resources
150 |
151 |
198 |
152 |
168 |
153 |
154 | Gatsby Tutorial
155 |
156 |
157 |
158 |
159 | Getting Started With Gatsby
160 |
161 |
162 |
163 |
164 | Build a Blog with Markdown & Gatsby
165 |
166 |
167 |
169 |
180 |
170 |
171 | Next.js Tutorial
172 |
173 |
174 |
175 |
176 | Introduction to Next.js by Xiaoru Li
177 |
178 |
179 |
181 |
197 |
182 |
183 | Remix Tutorial
184 |
185 |
186 |
187 |
188 | Up & Running With Remix by Kent C. Dodds
189 |
190 |
191 |
192 |
193 | Remix Tutorial with Kent C. Dodds
194 |
195 |
196 |
200 |
234 |
235 | Things To Be Aware Of
201 |
202 |
233 | Mostly for SSG only.
203 |
204 | Next.js strongly encourages a Node.js runtime to
205 | serve/run the app (not required if you do a static export). Gatsby
206 | and Remix do not.
207 |
208 |
209 |
232 |
210 | Remix generally encourages you to move a lot of typical
211 | client-side "state" to the edge/server, sometimes
212 | removing the need to manage a "state" in the frontend
213 | altogether.
214 |
215 |
216 | Remix generally encourages you to fetch data for your
217 | apps/components from the edge/server via "loader
218 | functions".
219 |
220 |
221 | While the router / nested routes bring a big performance boost
222 | to your app, there's also a bit of a learning curve. This
223 | is a moot point if you're also considering the App Router
224 | in Next.js, as that also comes with a learning curve.
225 |
226 |
227 | Remix doesn't support SSG (which in a lot of cases is
228 | probably fine if your goals are simply to deliver a fast user
229 | experience).
230 |
231 |
236 |
249 | Commercially Backed By:
237 |
238 |
248 |
239 | Netlify
240 |
241 |
242 | Vercel
243 |
244 |
245 | Shopify
246 |
247 |
16 |
17 |
18 |
19 | bulletproof-react
20 |
21 |
22 | simple
23 |
24 |
25 | scale-up
26 |
27 |
28 |
29 | This directory structure is based on the{' '}
30 |
31 | bulletproof-react
32 | {' '}
33 | repo - it is an absolute goldmine for good practices and architecture
34 | of large/enterprise React application.
35 |
37 |
38 | This structure comes directly from{' '}
39 |
40 | Josh Comeau
41 | {' '}
42 | - a very talented author of educational material in the webdev
43 | community. Read more of his React articles{' '}
44 |
45 | here
46 |
47 | .
48 |
50 |
51 | This structure can be used for medium to large React applications, adapted from{' '}
52 |
53 | Robin Wieruch
54 | {' '}
55 | - a high quality educator and content creator for in-depth tutorials and articles. Visit his blog{' '}
56 |
57 | here
58 |
59 | .
60 |
62 |
63 |
64 | )
65 | }
66 |
67 | export function DirectoryExplorer({ structure }: DirectoryExplorerProps) {
68 | const [selectedItem, setSelectedItem] = useState
72 |
93 | )
94 | }
95 |
96 | export function DirectoryItem({ item, onSelect }: DirectoryItemProps) {
97 | const [isHighlighted, setIsHighlighted] = useState(() => {
98 | return item.name === 'src'
99 | })
100 |
101 | function handleClickItem() {
102 | setIsHighlighted(!isHighlighted)
103 | onSelect(item)
104 | }
105 |
106 | return (
107 |
73 |
92 |
74 |
84 | -
75 | {structure.map((item, index) => (
76 |
85 | {selectedItem && (
86 |
91 |
87 | {selectedItem.description}
88 |
89 | )}
90 | -
173 | {item.items.map((item, index) => (
174 |
{children}
11 | )
12 | }
13 |
14 | export function Column({ children }) {
15 | return (
16 |
17 | {children}
18 |
19 | )
20 | }
21 |
22 | export function GreenfieldContent() {
23 | return (
24 | This is specifically helpful if you are an expert/experienced in a particular facet of development (styling/CSS as an example) - we are not looking for people to read in detail the entire website, but more like skip to the spots where YOU have expertise and explain what you would change (if anything) 24 | 2. **Provide feedback for sections that are confusing, over-explained, or still not clear by the end of an article.**
This is helpful from the exact opposite lens as point #1 above - if you are an expert in different facets of development than what is covered, but you really need to understand something you haven't ever dove into (testing or state-management for example) it's very helpful to get feedback when you still did not understand a topic very well after going through our material 25 | 3. **Help out with small or large
While we don't expect anyone to clean up the dirty work, we do keep track of smaller "tasks" or things that need to get done that might not require a seasoned/expert opinion and are just generally related more to site maintenance. If you're looking for more of those green squares in your GH profile but can't find things to work on, help with these tasks would be greatly appreciated. Some examples might be things like typos/spell-checks or text formatting, while others might be more interesting such as large component refactors (more realistic to professional React development). 26 | 27 | --- 28 | 29 |
7 | Hi there, so we're looking for libraries and tools that can do the following:
8 |
9 | - useful things for 3d rendering / graphics / video-gaming in browsers
10 | - edge cases / difficult things to do in frontend apps
11 | - niche libraries that just REALLY fill out their use-cases
12 |
13 |
14 | React boasts a vast ecosystem of open-source libraries, plugins, and features that can help your team rapidly develop UIs and applications.
15 |
16 | Generally, to make our list below, the library in question needs to have support and active development/maintenance. The rules are not strict, something like 100K+ weekly downloads on npm and a release within the last 6-12 months.
17 |
18 | ---
19 |
20 | ## Premade Hooks
21 |
22 | -
5 | Hi there, so we're looking for the following:
6 |
7 | - Any other common and battle-tested ways to ship React applications
8 | - React integrations with other devices, operating systems, etc.
9 | - Resources for building React apps with Astro, Qwik, or others that play well with React
10 |
11 | Please consider helping us out if you have any recommendations!
12 |
13 |
14 | ## Monorepos
15 |
16 | -
5 | Hi there, so we're looking for the following:
6 |
7 | - plugins/libraries that solve a huge problem, and are only applicable to Next.js applications
8 | - tutorials/educational material that make Next.js more accesible
9 | - summarizations of core concepts required to build with Next.js, and off-site links to dive deeper
10 |
11 | Please consider helping us out if you have any recommendations!
12 |
13 |
14 | ## Basics
15 |
16 | - 49 | ## Misc Resources 50 |
51 |
-
8 |
- Resources for learning JavaScript & TypeScript 9 |
- Core React concepts you absolutely need to know 10 |
- Advanced understanding of render/re-render behavior in React 11 |
- More crash courses & tutorials to help you learn React 12 |
79 |
80 | - Rendering in React
81 | - Why React Renders
82 | - Why React Re-Renders
83 | - A (mostly) complete guide to react rendering behavior
84 | - Everything on developerway.com that has to do with re-rendering
85 | - React, Visualized
86 | - A Visual Guide to React Rendering
87 | - Interactive CodeSandbox that shows how/when parents re-render any direct child components used in the render (NOT to be confused with the `children` prop, which do NOT always trigger re-renders if/when they change)
88 | - Notice that `Component B` in this example is memoized with `memo()`
89 | - React recursively re-renders child components, but the `children` prop is special
90 | - assuming your component passes the children prop through and simply renders it, re-renders of `{children}` will not always cause the parent to re-render
91 | - Timeline of a React Component With Hooks
92 | - An interactive timeline showing how a React component with hooks runs
93 | - Parents & Owners in React: Rendering Performance
94 | - Being aware of the distinction between parent and owner components can help you isolate updates and improve rendering performance.
95 |
96 |
97 |
98 |
99 |
100 | ## Courses & Video Tutorials
101 |
102 | Crash courses and more you can blow through below.
103 |
104 |
48 | We're looking for contributors!
49 | If you are interested in working in open-source/public, you can get involved with us on GitHub .
50 |
51 |
52 | We love feedback of all kinds, just please keep in mind that we are working professionals that try to maintain this website in our spare time only. We are open to all suggestions, provided you have a positive attitude when making the suggestion. We don't assume any ill intent, ever.
53 |
--------------------------------------------------------------------------------
/src/pages/react-performance-optimization.mdx:
--------------------------------------------------------------------------------
1 |
2 | export const description = 'Ship fast and performant UIs, a great start to positive UX.'
3 |
4 | export const sections = [
5 | { title: 'Loading vs Runtime', id: 'loading-vs-runtime'},
6 | { title: 'Measuring Loadtimes', id: 'measuring-loadtimes'},
7 | { title: 'Optimizing Loadtimes', id: 'optimizing-loadtimes'},
8 | { title: 'Measuring Runtimes', id: 'measuring-runtimes'},
9 | { title: 'Optimizing Runtimes', id: 'optimizing-runtimes'},
10 | { title: 'UX Performance Best Practices', id: 'ux-performance-best-practices'},
11 | { title: 'Typical Performance Hangups', id: 'typical-performance-hangups-in-react'},
12 | { title: 'Misc. Articles', id: 'misc-articles'}
13 | ]
14 |
15 | # React Performance & Optimization
16 |
17 | -
19 |
- Loadtime performance vs Runtime performance 20 |
- How to measure and improve both (loadtime and runtime) 21 |
- React-specific ways to optimize your project/codebase 22 |
- How to make performance work toward the best UX 23 |
67 |
72 | 73 | 74 | 75 | Other helpful resources for understanding how to measure runtime performance in React apps: 76 | 77 | -
-
8 |
- What is Semantic HTML 9 |
- Why Semantic HTML / Accessibility is important 10 |
- Bad Practices 11 |
21 | image and description provided by
By adding semantic HTML tags to your pages, you provide additional information that helps define the roles and relative importance of the different parts of your page. 24 | 25 | **Misc** 26 | 27 | - `A11Y` is an acronym for "Accessibility" 28 | - Introduction to
23 | - Use the inline fold vscode plugin to collapse long className strings when you're not focused on them with the cursor - Inspired by Cory House
24 | - The Tailwind IntelliSense vscode plugin gives you auto-complete
25 | - If you purchase tailwindui you'll get access to tons of pre-made components + templates
26 | - shadcn/ui - Open Source UI Components
27 | - Preline - Open Source UI Components
28 | - awesome-tailwindcss repository on github.com is full of awesome stuff
29 |
30 |
31 |
32 | ## CSS / CSS-in-JS
33 | - 
13 |
14 | The React Handbook is a website primarily maintained by me,