Practical React exercises with detailed solutions.
Home Page: https://epic-react-exercises.vercel.app
License: Apache License 2.0
I'm a frontend web engineer - building performant, high-quality user interfaces. Formerly, a robotics teacher.
Above stats generated with: tipsy/profile-summary-for-github
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
02:34:44.495 Installing dependencies...
02:34:47.746 npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
02:34:53.536 npm WARN @reach/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
02:34:53.545 npm WARN @reach/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
02:34:53.553 npm WARN @reach/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
02:34:53.561 npm WARN @reach/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
02:34:53.569 npm WARN @reach/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
02:34:53.577 npm WARN @reach/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
02:34:53.586 npm WARN [email protected] requires a peer of @types/react@>=16 but none is installed. You must install peer dependencies yourself.
02:34:53.599 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
02:34:53.599 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
02:34:53.613 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
02:34:53.613 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
useTheme:
The button components are getting quite convoluted,
change the api for buttons for simplicity
and update all the respective components using them
https://github.com/mithi/epic-notes/blob/main/components/button/index.js
It's not rendering properly on small screens
but works fine on big screens
NOTE: I'm using react-markdown and react-syntax-highlighter` for this
There are currently three top level providers for handling the ui state:
I have to refactor this to best practices so that the app will be faster considering the following techniques:
state and dispatchuseCallback and useMemo for state update functions https://github.com/kentcdodds/kentcdodds.com/blob/319db97260078ea4c263e75166f05e2cea21ccd1/content/blog/how-to-optimize-your-context-value/index.mdBe sure to measure the performance before and after with chrome dev tools and react component profilers
to make sure the changes introduced actually does make things faster... not slower.
I've been copy pasting this everywhere. Put this somewhere to be reusable
import dynamic from "next/dynamic"
import { SpinnerDots } from "components/spinner"
const DynamicMarkdownRender = dynamic(() => import("components/markdown-render"), {
// eslint-disable-next-line react/display-name
loading: () => <SpinnerDots />,
})They're found in the following:
theme-menu.jscontent/react/advanced-hooks/3content/landingpages/react/[section]
Create a pageProperties.json that contains the title and description of that page content/topic/section/pageId
Edit to read and return pageProperties
https://github.com/mithi/epic-notes/blob/d624a04bb0733088f067095c08679a07ac286828/utils/index.js#L54
Edit this component to destructure the return of pageContents
that passes it to
add
<Head>
<meta property="og:url" content={currentURL} key="ogurl" />
<meta property="og:image" content={previewImage} key="ogimage" />
<meta property="og:site_name" content={siteName} key="ogsitename" />
<meta property="og:title" content={pageTitle} key="ogtitle" />
<meta property="og:description" content={description} key="ogdesc" />
</Head>or something
https://www.netlify.com/blog/2020/05/08/improve-your-seo-and-social-sharing-cards-with-next.js/
also redirect react/{SECTION_THAT_DOES_NOT_EXIST}/ETCETERA to react/
reactSee issues from PrisimJS/prism
instead of doing this:
import { useContext } from "react"
import { ThemeContext } from "providers"
const x = useContext(ThemeContext)I should do it like this
import { useTheme } from "hooks"
const x = useTheme()
https://www.eliostruyf.com/devhack-optimizing-initial-load-js-nextjs/
https://nextjs.org/docs/advanced-features/dynamic-import
https://medium.com/ne-digital/how-to-reduce-next-js-bundle-size-68f7ac70c375
https://blog.logrocket.com/slimming-down-your-bundle-size/
dynamic from 'next/dynamic';
// Loading StickerForm component, showing spinner while fetching the component
// Use it like you're use to <StickerForm />
const StickerForm = dynamic(() => import('./StickerForm'), { loading: () => <Spinner /> });
See issue: RobertBroersma/beanheads#23
Update
https://github.com/mithi/epic-react-exercises/blob/main/content/react/patterns/2/components/accord.js
and
https://github.com/mithi/epic-react-exercises/blob/main/content/react/patterns/5/components/use-accordion.js
to be compliant to accessibility guidelines
https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html
There shouldn't be an underline here
When we hover to this link close this menu, it should become a pointer
Here it is on a mobile phone
here it is on safari response design mode
When I run your app on my Windows machine in Chrome and Edge, I'm seeing horrible scrollbars that uglyify the GUI.
This should be a simple CSS fix.
I noticed in your Reddit video that the scrollbars don't appear though. I am guessing you are on Mac?
Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .
These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
Use a instead. In general, you should only use a hyperlink for navigation to a real URL.
so I'm reading about error boundaries and I'm seeing opinions like:
error boundaries should only be used for unexpected errors that would otherwise crash a react tree
or
Your code should gracefully handle API errors and not rely on an Error Boundary for "known" UI state.
or
An unexpected error is still an error. (We don’t recommend using error boundaries for expected errors or control flow.)
Error boundaries are primarily useful for production, but in development we want to make errors as highly visible as possible.
What is your opinion on this? Should we handle "expected" errors (example: promise-based errors or network failed errors etc) with a try-catch block and ONLY use error boundaries for "unexpected" errors?
I have seen some discussions bringing up the experimental suspense feature but is it okay to rely on it when it's still experimental?
Thanks in advance!
Some Discussions:
We'd have to modify
to scroll to the top on each re-render
page prop of buttons to hrefnotebook to ReactNotebookCreate a folder inside content/react/hooks and name it the next integer.
Example 5 in this case, since the last number is 4
Inside that folder create 2 files: notes.md and app.js
Write your example app in app.js and export it as default
const App = () => {
return <>Hello world!</>
}
export default AppWrite the description of your exercise in notes.md.
## The hello world exercise
> Summary: Display `hello world` on the screen!
I'm calling this everywhere move is somewhere and call it from there so that I don't always copy paste this everywhere
const useNextEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect
in the following files:
main.jsuse-async.jsreact/advanced-hooks/3react/advanced-hooks/2
https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
// ***************
// IMPORTANT: Use isomorphic effect
// ***************
// React currently throws a warning when using useLayoutEffect on the server.
// To get around it, we can conditionally useEffect on the server (no-op) and
// useLayoutEffect in the browser. We need useLayoutEffect because we want
// `connect` to perform sync updates to a ref to save the latest props after
// a render is actually committed to the DOM.
Notice the pagination buttons are different...
| on desktop safari | on mobile safari |
|---|---|
 |
 |
On mobile (safari, chrome, firefox), the first button on theme menu has a blue outline (as if selected), I don't know why.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.