My Learning Resources
Learn to Teach
In order to teach React, I must first Learn React! See my Big Questions.
My Big Questions
Section titled “My Big Questions”-
How to create a NextJS/React project? 🗝️
pnpm create next-app app-name
-
What should I highglight about the key starter files and the folder structure?
-
Where do I put my component (
The Ultimate Guide to Organizing Your Next.js 15 Project Structure*.jsx) files? -
What LOGs should be attached to Thinking in React (by React)
- Here’s a blog (7 min) on Thinking in React: step-by-step thought process for building a React App
-
React Hooks
- What are they?
- List/describe the default hooks?
- How to create “custom” hooks?
-
SPA vs. Multi-Page
- What’s the default? (if any)
-
Creating/Using Components
- How do Props work?
- How do I “slot” child components?
-
State
- What is it?
- Where to keep it (put it)?
-
What is JSX?
JSX is an “extended” form of JavaScript that allows for inlined HTML Markup. It provides a simpler way to “build” HTML than using the DOM API (document.createElement(), etc.) or .innerHTML with template strings.
TODO: Compare DOM API sample w. placeholder text and JSX
It requires a special parser to distinguish the HTML tags from the rest of JavaScript and to handle any placeholders in that markup.
MUI (or Material UI) is a suite of UI (User Interface) tools for React.
ShadCN
Section titled “ShadCN”ShadCN is a suite of UI tools for React.
Further Readings
Section titled “Further Readings”These are resources that I found helpful, so I want to remember them.
- How to Read React Errors
- Before You Memo by Dan Abramov
- Unit Testing React with Vitest/Playwright
- Parents & Owners in React: Rendering Performance - Potentially helpful in understanding State vs. Props vs. Component Heirarchy
- Building an App According to Thinking In React