├── A2_Intro_ABasicReactApp
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── B3_DOM_DOMManipulation
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── B5_DOM_DOMImperativeProgramming
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── B7_DOM_DOMDeclarativeProgramming
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C10_Elements_PureFunctions
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C11_Elements_Props
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C12_Elements_TemplateLogic
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C13_Elements_ElementProperties
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C1_Elements_Recursion
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C2_Elements_POJOs
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C3_Elements_CreatingReactElements
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C4_Elements_ReactElementTrees
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C6_Elements_ReactAndDOMElements
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C8_Elements_Components
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── C9_Elements_ComponentsAndReusability
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── D3_JSX_ReactElementsAndJSX
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── D4_JSX_JSXAndThinkingInElements
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── D6_JSX_FragmentAndHTMLAuthoring
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── E1_Fiber_RootCreationAndRender
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── E2_Fiber_ConceptualAside_LinkedLists
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── H1_Events_DOMEvents
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── H2_Events_ReactEventObjects
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── H3_Events_SyntheticEventMethods
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── I4_State_ConceptualAside_Reducers
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── I5_State_ActionsAndState
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── J10_HooksState_useStatePart3
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── J11_HooksState_StrictEqualityAndObjectIs
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── J12_HooksState_ImmutableState
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── J2_HooksState_ConceptualAside_Queues
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── J5_HooksState_useReducerPart1
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── J6_HooksState_useReducerPart2
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── J7_HooksState_useStatePart1
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── J8_HooksState_useStatePart2
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── K2_useEffect_AddingYourOwnEffects
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── K3_useEffect_Dependencies
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── K4_useEffect_FetchingDataOrNot
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── K5_useEffect_EffectsAndUnmounting
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── K6_useEffect_FetchingDataOrNot
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── K7_useEffect_ConceptualAside_StaleClosures
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── K8_useEffect_useEffectAndStaleClosures
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── Kb2_use_FetchingData
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ └── index.htm
├── L1_useRef_useRef
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── L2_useRef_useRefAndTheDOM
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── L3_useRef_forwardRef
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── L4_useRef_refAsAProp
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ └── index.htm
├── M1_CustomHooks_ExtractingCustomHooks
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── N1_ComponentDesign_RealWorldComplexityAndLoops
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── N2_ComponentDesign_LiftingState
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── N3_ComponentDesign_AndZeroAndTernaryOperators
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── N4_ComponentDesign_Children
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── O1_useContext_PropDrilling
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── O2_useContext_Context
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── O3_useContext_use
├── Begin
│ └── index.htm
└── Finished
│ └── index.htm
├── P1_useIdAndKey_useId
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── P2_useIdAndKey_Key
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── Q1_memouseMemoanduseCallback_ConceptualAside_Memoization
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── Q2_memouseMemoanduseCallback_memo
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── Q3_memouseMemoanduseCallback_useMemo
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── Q4_memouseMemoanduseCallback_useCallback
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── R1_useContextReducer_useContextuseReducer
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ └── index.htm
├── R3_useContextReducer_use_ReducerAndContext
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ └── index.htm
├── README.md
├── S2_Toolchains_ConceptualAside_ESModules
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── app.js
│ ├── index.htm
│ └── otherCode.js
├── S4_Toolchains_Vite
├── Begin
│ ├── app.js
│ └── index.htm
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── T2_StrictMode_ExtraRerender
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── T3_StrictMode_ExtraEffectRerun
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── U1_Forms_ReorganizingOurApp
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── Counter.jsx
│ │ ├── CounterList.jsx
│ │ ├── CounterSummary.jsx
│ │ ├── CounterSummaryDetail.jsx
│ │ ├── CounterSummaryHeader.jsx
│ │ └── CounterTools.jsx
│ ├── contexts
│ │ └── contexts.js
│ ├── hooks
│ │ └── useDocumentTitle.js
│ ├── index.css
│ ├── main.jsx
│ ├── models
│ │ └── counterObj.js
│ └── reducers
│ │ ├── counterReducer.js
│ │ └── tabReducer.js
│ └── vite.config.js
├── U2_Forms_UncontrolledInputs
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── Counter.jsx
│ │ │ ├── CounterList.jsx
│ │ │ ├── CounterSummary.jsx
│ │ │ ├── CounterSummaryDetail.jsx
│ │ │ ├── CounterSummaryHeader.jsx
│ │ │ └── CounterTools.jsx
│ │ ├── contexts
│ │ │ └── contexts.js
│ │ ├── hooks
│ │ │ └── useDocumentTitle.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── models
│ │ │ └── counterObj.js
│ │ └── reducers
│ │ │ ├── counterReducer.js
│ │ │ └── tabReducer.js
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── AddCounter.jsx
│ │ ├── Counter.jsx
│ │ ├── CounterList.jsx
│ │ ├── CounterSummary.jsx
│ │ ├── CounterSummaryDetail.jsx
│ │ ├── CounterSummaryHeader.jsx
│ │ └── CounterTools.jsx
│ ├── contexts
│ │ └── contexts.js
│ ├── hooks
│ │ └── useDocumentTitle.js
│ ├── index.css
│ ├── main.jsx
│ ├── models
│ │ └── counterObj.js
│ └── reducers
│ │ ├── counterReducer.js
│ │ └── tabReducer.js
│ ├── vite.config.js
│ └── vite.config.js.timestamp-1703537521142-26b4ded2a1d47.mjs
├── U3_Forms_ControlledInputs
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── AddCounter.jsx
│ │ │ ├── Counter.jsx
│ │ │ ├── CounterList.jsx
│ │ │ ├── CounterSummary.jsx
│ │ │ ├── CounterSummaryDetail.jsx
│ │ │ ├── CounterSummaryHeader.jsx
│ │ │ └── CounterTools.jsx
│ │ ├── contexts
│ │ │ └── contexts.js
│ │ ├── hooks
│ │ │ └── useDocumentTitle.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── models
│ │ │ └── counterObj.js
│ │ └── reducers
│ │ │ ├── counterReducer.js
│ │ │ └── tabReducer.js
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── AddCounter.jsx
│ │ ├── Counter.jsx
│ │ ├── CounterList.jsx
│ │ ├── CounterSummary.jsx
│ │ ├── CounterSummaryDetail.jsx
│ │ ├── CounterSummaryHeader.jsx
│ │ └── CounterTools.jsx
│ ├── contexts
│ │ └── contexts.js
│ ├── hooks
│ │ └── useDocumentTitle.js
│ ├── index.css
│ ├── main.jsx
│ ├── models
│ │ └── counterObj.js
│ └── reducers
│ │ ├── counterReducer.js
│ │ └── tabReducer.js
│ ├── vite.config.js
│ └── vite.config.js.timestamp-1703537521142-26b4ded2a1d47.mjs
├── U4_Forms_Form
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── AddCounter.jsx
│ │ │ ├── Counter.jsx
│ │ │ ├── CounterList.jsx
│ │ │ ├── CounterSummary.jsx
│ │ │ ├── CounterSummaryDetail.jsx
│ │ │ ├── CounterSummaryHeader.jsx
│ │ │ └── CounterTools.jsx
│ │ ├── contexts
│ │ │ └── contexts.js
│ │ ├── hooks
│ │ │ └── useDocumentTitle.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── models
│ │ │ └── counterObj.js
│ │ └── reducers
│ │ │ ├── counterReducer.js
│ │ │ └── tabReducer.js
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── AddCounter.jsx
│ │ ├── Counter.jsx
│ │ ├── CounterList.jsx
│ │ ├── CounterSummary.jsx
│ │ ├── CounterSummaryDetail.jsx
│ │ ├── CounterSummaryHeader.jsx
│ │ └── CounterTools.jsx
│ ├── contexts
│ │ └── contexts.js
│ ├── hooks
│ │ └── useDocumentTitle.js
│ ├── index.css
│ ├── main.jsx
│ ├── models
│ │ └── counterObj.js
│ └── reducers
│ │ ├── counterReducer.js
│ │ └── tabReducer.js
│ ├── vite.config.js
│ └── vite.config.js.timestamp-1703537521142-26b4ded2a1d47.mjs
├── U5_Forms_SelectTextarea
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── AddCounter.jsx
│ │ │ ├── Counter.jsx
│ │ │ ├── CounterList.jsx
│ │ │ ├── CounterSummary.jsx
│ │ │ ├── CounterSummaryDetail.jsx
│ │ │ ├── CounterSummaryHeader.jsx
│ │ │ └── CounterTools.jsx
│ │ ├── contexts
│ │ │ └── contexts.js
│ │ ├── hooks
│ │ │ └── useDocumentTitle.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── models
│ │ │ └── counterObj.js
│ │ └── reducers
│ │ │ ├── counterReducer.js
│ │ │ └── tabReducer.js
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── AddCounter.jsx
│ │ ├── Counter.jsx
│ │ ├── CounterList.jsx
│ │ ├── CounterSummary.jsx
│ │ ├── CounterSummaryDetail.jsx
│ │ ├── CounterSummaryHeader.jsx
│ │ └── CounterTools.jsx
│ ├── contexts
│ │ └── contexts.js
│ ├── hooks
│ │ └── useDocumentTitle.js
│ ├── index.css
│ ├── main.jsx
│ ├── models
│ │ └── counterObj.js
│ └── reducers
│ │ ├── counterReducer.js
│ │ └── tabReducer.js
│ ├── vite.config.js
│ └── vite.config.js.timestamp-1703537521142-26b4ded2a1d47.mjs
├── UnderstandingReact_TonyAlicea_AllCode.zip
├── V2_ReactDevTools_useDebugValue
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── AddCounter.jsx
│ │ │ ├── Counter.jsx
│ │ │ ├── CounterList.jsx
│ │ │ ├── CounterSummary.jsx
│ │ │ ├── CounterSummaryDetail.jsx
│ │ │ ├── CounterSummaryHeader.jsx
│ │ │ └── CounterTools.jsx
│ │ ├── contexts
│ │ │ └── contexts.js
│ │ ├── hooks
│ │ │ └── useDocumentTitle.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── models
│ │ │ └── counterObj.js
│ │ └── reducers
│ │ │ ├── counterReducer.js
│ │ │ └── tabReducer.js
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── AddCounter.jsx
│ │ ├── Counter.jsx
│ │ ├── CounterList.jsx
│ │ ├── CounterSummary.jsx
│ │ ├── CounterSummaryDetail.jsx
│ │ ├── CounterSummaryHeader.jsx
│ │ └── CounterTools.jsx
│ ├── contexts
│ │ └── contexts.js
│ ├── hooks
│ │ └── useDocumentTitle.js
│ ├── index.css
│ ├── main.jsx
│ ├── models
│ │ └── counterObj.js
│ └── reducers
│ │ ├── counterReducer.js
│ │ └── tabReducer.js
│ ├── vite.config.js
│ └── vite.config.js.timestamp-1703537521142-26b4ded2a1d47.mjs
├── W2_CSSAndComponents_ToolchainsAndCSS
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── AddCounter.jsx
│ │ │ ├── Counter.jsx
│ │ │ ├── CounterList.jsx
│ │ │ ├── CounterSummary.jsx
│ │ │ ├── CounterSummaryDetail.jsx
│ │ │ ├── CounterSummaryHeader.jsx
│ │ │ └── CounterTools.jsx
│ │ ├── contexts
│ │ │ └── contexts.js
│ │ ├── hooks
│ │ │ └── useDocumentTitle.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── models
│ │ │ └── counterObj.js
│ │ └── reducers
│ │ │ ├── counterReducer.js
│ │ │ └── tabReducer.js
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── AddCounter.jsx
│ │ ├── Counter.jsx
│ │ ├── CounterList.css
│ │ ├── CounterList.jsx
│ │ ├── CounterSummary.jsx
│ │ ├── CounterSummaryDetail.jsx
│ │ ├── CounterSummaryHeader.jsx
│ │ └── CounterTools.jsx
│ ├── contexts
│ │ └── contexts.js
│ ├── hooks
│ │ └── useDocumentTitle.js
│ ├── index.css
│ ├── main.jsx
│ ├── models
│ │ └── counterObj.js
│ └── reducers
│ │ ├── counterReducer.js
│ │ └── tabReducer.js
│ ├── vite.config.js
│ └── vite.config.js.timestamp-1703537521142-26b4ded2a1d47.mjs
├── W3_CSSAndComponents_CSSModulesAndMore
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── AddCounter.jsx
│ │ │ ├── Counter.jsx
│ │ │ ├── CounterList.css
│ │ │ ├── CounterList.jsx
│ │ │ ├── CounterSummary.jsx
│ │ │ ├── CounterSummaryDetail.jsx
│ │ │ ├── CounterSummaryHeader.jsx
│ │ │ └── CounterTools.jsx
│ │ ├── contexts
│ │ │ └── contexts.js
│ │ ├── hooks
│ │ │ └── useDocumentTitle.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── models
│ │ │ └── counterObj.js
│ │ └── reducers
│ │ │ ├── counterReducer.js
│ │ │ └── tabReducer.js
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── AddCounter.jsx
│ │ ├── Counter.jsx
│ │ ├── CounterList.jsx
│ │ ├── CounterList.module.css
│ │ ├── CounterSummary.jsx
│ │ ├── CounterSummaryDetail.jsx
│ │ ├── CounterSummaryHeader.jsx
│ │ └── CounterTools.jsx
│ ├── contexts
│ │ └── contexts.js
│ ├── hooks
│ │ └── useDocumentTitle.js
│ ├── index.css
│ ├── main.jsx
│ ├── models
│ │ └── counterObj.js
│ └── reducers
│ │ ├── counterReducer.js
│ │ └── tabReducer.js
│ ├── vite.config.js
│ └── vite.config.js.timestamp-1703537521142-26b4ded2a1d47.mjs
├── X10_ClassProject_HighlightedLetter
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── api
│ │ │ └── data.json
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── CorrectGuesses.jsx
│ │ │ ├── Guess.jsx
│ │ │ ├── Header.jsx
│ │ │ ├── Honeycomb.jsx
│ │ │ ├── Letter.jsx
│ │ │ └── Score.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── api
│ │ └── data.json
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── CorrectGuesses.jsx
│ │ ├── Guess.jsx
│ │ ├── Header.jsx
│ │ ├── Honeycomb.jsx
│ │ ├── Letter.jsx
│ │ └── Score.jsx
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── X3_ClassProject_GettingTheData
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── AddCounter.jsx
│ │ │ ├── Counter.jsx
│ │ │ ├── CounterList.jsx
│ │ │ ├── CounterList.module.css
│ │ │ ├── CounterSummary.jsx
│ │ │ ├── CounterSummaryDetail.jsx
│ │ │ ├── CounterSummaryHeader.jsx
│ │ │ └── CounterTools.jsx
│ │ ├── contexts
│ │ │ └── contexts.js
│ │ ├── hooks
│ │ │ └── useDocumentTitle.js
│ │ ├── index.css
│ │ ├── main.jsx
│ │ ├── models
│ │ │ └── counterObj.js
│ │ └── reducers
│ │ │ ├── counterReducer.js
│ │ │ └── tabReducer.js
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── api
│ │ └── data.json
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── X4_ClassProject_Header
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── api
│ │ │ └── data.json
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ └── Header.module.css
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── api
│ │ └── data.json
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── Header.jsx
│ │ └── Header.module.css
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── X5_ClassProject_Honeycomb
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── api
│ │ │ └── data.json
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── Header.jsx
│ │ │ └── Header.module.css
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── api
│ │ └── data.json
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── Header.jsx
│ │ ├── Honeycomb.jsx
│ │ └── Letter.jsx
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── X6_ClassProject_Shuffle
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── api
│ │ │ └── data.json
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── Header.jsx
│ │ │ ├── Honeycomb.jsx
│ │ │ └── Letter.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── api
│ │ └── data.json
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── Header.jsx
│ │ ├── Honeycomb.jsx
│ │ └── Letter.jsx
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── X7_ClassProject_WordsAndLetters
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── api
│ │ │ └── data.json
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── Header.jsx
│ │ │ ├── Honeycomb.jsx
│ │ │ └── Letter.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── api
│ │ └── data.json
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── Guess.jsx
│ │ ├── Header.jsx
│ │ ├── Honeycomb.jsx
│ │ └── Letter.jsx
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── X8_ClassProject_WordList
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── api
│ │ │ └── data.json
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── Guess.jsx
│ │ │ ├── Header.jsx
│ │ │ ├── Honeycomb.jsx
│ │ │ └── Letter.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── api
│ │ └── data.json
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── CorrectGuesses.jsx
│ │ ├── Guess.jsx
│ │ ├── Header.jsx
│ │ ├── Honeycomb.jsx
│ │ └── Letter.jsx
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── X9_ClassProject_Score
├── Begin
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── api
│ │ │ └── data.json
│ │ └── vite.svg
│ ├── src
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── CorrectGuesses.jsx
│ │ │ ├── Guess.jsx
│ │ │ ├── Header.jsx
│ │ │ ├── Honeycomb.jsx
│ │ │ └── Letter.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ └── vite.config.js
└── Finished
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── README.md
│ ├── index.html
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── api
│ │ └── data.json
│ └── vite.svg
│ ├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── components
│ │ ├── CorrectGuesses.jsx
│ │ ├── Guess.jsx
│ │ ├── Header.jsx
│ │ ├── Honeycomb.jsx
│ │ ├── Letter.jsx
│ │ └── Score.jsx
│ ├── index.css
│ └── main.jsx
│ └── vite.config.js
├── Z2_Suspense_SuspenseAndRemix
├── Begin
│ └── routes
│ │ └── _index.tsx
└── Finished
│ └── routes
│ └── _index.tsx
├── ZR1_ReactServerComponents_ServerComponents
└── Finished
│ ├── components
│ └── courses.js
│ ├── page.js
│ └── page.module.css
├── ZR2_ReactServerComponents_ClientComponentsAndUseClient
├── Begin
│ ├── components
│ │ └── courses.js
│ ├── page.js
│ └── page.module.css
└── Finished
│ ├── components
│ ├── allcaps.js
│ └── courses.js
│ ├── page.js
│ └── page.module.css
└── ZR4_ReactServerComponents_ComposingClientAndServerComponents
├── Begin
├── components
│ ├── allcaps.js
│ └── courses.js
├── page.js
└── page.module.css
└── Finished
├── components
├── allcaps.js
└── courses.js
├── globals.css
├── page.js
└── page.module.css
/A2_Intro_ABasicReactApp/Begin/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/A2_Intro_ABasicReactApp/Begin/app.js
--------------------------------------------------------------------------------
/B3_DOM_DOMManipulation/Begin/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/B3_DOM_DOMManipulation/Begin/app.js
--------------------------------------------------------------------------------
/B3_DOM_DOMManipulation/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/B3_DOM_DOMManipulation/Finished/app.js:
--------------------------------------------------------------------------------
1 | const listElement = document.getElementById("list");
2 | const newListItem = document.createElement("li");
3 | newListItem.textContent = "Item 3";
4 | setTimeout(() => listElement.appendChild(newListItem), 1000);
--------------------------------------------------------------------------------
/B3_DOM_DOMManipulation/Finished/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 | - Item 1
13 | - Item 2
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/B5_DOM_DOMImperativeProgramming/Begin/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/B5_DOM_DOMImperativeProgramming/Begin/app.js
--------------------------------------------------------------------------------
/B5_DOM_DOMImperativeProgramming/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/B5_DOM_DOMImperativeProgramming/Finished/app.js:
--------------------------------------------------------------------------------
1 | const countElement = document.getElementById("count");
2 |
3 | function setCount() {
4 | let count = Number(countElement.textContent);
5 | count = count + 1;
6 | countElement.textContent = count;
7 | }
--------------------------------------------------------------------------------
/B7_DOM_DOMDeclarativeProgramming/Begin/app.js:
--------------------------------------------------------------------------------
1 | const countElement = document.getElementById("count");
2 |
3 | function setCount() {
4 | let count = Number(countElement.textContent);
5 | count = count + 1;
6 | countElement.textContent = count;
7 | }
--------------------------------------------------------------------------------
/B7_DOM_DOMDeclarativeProgramming/Finished/app.js:
--------------------------------------------------------------------------------
1 | const countApp = {
2 | getCount: () => {
3 | const countElement = document.getElementById("count");
4 | return Number(countElement.textContent);
5 | },
6 | setCount: (val) => {
7 | const countElement = document.getElementById("count");
8 | countElement.textContent = val;
9 | }
10 | }
11 |
12 | function setCount() {
13 | let count = countApp.getCount();
14 | if (count >= 5) {
15 | countApp.setCount(0);
16 | } else {
17 | countApp.setCount(count + 1);
18 | }
19 | }
--------------------------------------------------------------------------------
/C10_Elements_PureFunctions/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/C11_Elements_Props/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/C12_Elements_TemplateLogic/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/C13_Elements_ElementProperties/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/C1_Elements_Recursion/Begin/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/C1_Elements_Recursion/Begin/app.js
--------------------------------------------------------------------------------
/C1_Elements_Recursion/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/C1_Elements_Recursion/Finished/app.js:
--------------------------------------------------------------------------------
1 | function countDown(num) {
2 | console.log(num);
3 |
4 | if (num === 0) return;
5 |
6 | countDown(num - 1);
7 | }
8 |
9 | countDown(5);
--------------------------------------------------------------------------------
/C1_Elements_Recursion/Finished/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/C2_Elements_POJOs/Begin/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/C2_Elements_POJOs/Begin/app.js
--------------------------------------------------------------------------------
/C2_Elements_POJOs/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/C2_Elements_POJOs/Finished/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/C3_Elements_CreatingReactElements/Begin/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/C3_Elements_CreatingReactElements/Begin/app.js
--------------------------------------------------------------------------------
/C3_Elements_CreatingReactElements/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/C3_Elements_CreatingReactElements/Finished/app.js:
--------------------------------------------------------------------------------
1 | const rootNode = document.getElementById('app');
2 | const root = ReactDOM.createRoot(rootNode);
3 | root.render(React.createElement(App));
4 |
5 | console.log(React);
6 |
7 | function App() {
8 | console.log("Called App");
9 |
10 | return React.createElement("button", null, "Click me");
11 | }
12 |
13 | console.log(App());
14 |
15 | console.log(React.createElement(App));
--------------------------------------------------------------------------------
/C4_Elements_ReactElementTrees/Begin/app.js:
--------------------------------------------------------------------------------
1 | const rootNode = document.getElementById('app');
2 | const root = ReactDOM.createRoot(rootNode);
3 | root.render(React.createElement(App));
4 |
5 | console.log(React);
6 |
7 | function App() {
8 | return React.createElement("button", null, "Click me");
9 | }
10 |
11 | console.log(App());
12 |
13 | console.log(React.createElement(App));
--------------------------------------------------------------------------------
/C4_Elements_ReactElementTrees/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/C4_Elements_ReactElementTrees/Finished/app.js:
--------------------------------------------------------------------------------
1 | const rootNode = document.getElementById('app');
2 | const root = ReactDOM.createRoot(rootNode);
3 | root.render(React.createElement(App));
4 |
5 | console.log(React);
6 |
7 | function App() {
8 | return (
9 | React.createElement("article", null,
10 | React.createElement("h2", null, "Counter "),
11 | React.createElement("p", null, "You clicked 1 times"),
12 | React.createElement("button", null, "Click me"))
13 | );
14 | }
15 |
16 | console.log(App());
--------------------------------------------------------------------------------
/C6_Elements_ReactAndDOMElements/Begin/app.js:
--------------------------------------------------------------------------------
1 | const rootNode = document.getElementById('app');
2 | const root = ReactDOM.createRoot(rootNode);
3 | root.render(React.createElement(App));
4 |
5 | console.log(React);
6 |
7 | function App() {
8 | return (
9 | React.createElement("article", null,
10 | React.createElement("h2", null, "Counter "),
11 | React.createElement("p", null, "You clicked 1 times"),
12 | React.createElement("button", null, "Click me"))
13 | );
14 | }
15 |
16 | console.log(App());
--------------------------------------------------------------------------------
/C6_Elements_ReactAndDOMElements/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/C8_Elements_Components/Begin/app.js:
--------------------------------------------------------------------------------
1 | const rootNode = document.getElementById('app');
2 | const root = ReactDOM.createRoot(rootNode);
3 | root.render(React.createElement(App));
4 |
5 | function App() {
6 | return (
7 | React.createElement("article", null,
8 | React.createElement("h2", null, "Counter "),
9 | React.createElement("p", null, "You clicked 1 times"),
10 | React.createElement("button", null, "Click me"))
11 | );
12 | }
--------------------------------------------------------------------------------
/C8_Elements_Components/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/C9_Elements_ComponentsAndReusability/Begin/index.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Understanding React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/E2_Fiber_ConceptualAside_LinkedLists/Begin/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/E2_Fiber_ConceptualAside_LinkedLists/Begin/app.js
--------------------------------------------------------------------------------
/I5_State_ActionsAndState/Begin/app.js:
--------------------------------------------------------------------------------
1 | const numbers = [1, 2, 3, 4];
2 | const reducerFn = (accumulator, currentValue) => {
3 | console.log("--- Iteration ---");
4 | console.log("Accumulator " + accumulator);
5 | console.log("Current Value " + currentValue);
6 |
7 | const nextAccumulator = accumulator + " " + currentValue;
8 | console.log("Next accumulator " + nextAccumulator);
9 |
10 | return nextAccumulator;
11 | }
12 |
13 | const initialValue = 0;
14 | const sum = numbers.reduce(
15 | reducerFn,
16 | initialValue
17 | );
18 |
19 | console.log(sum);
--------------------------------------------------------------------------------
/K7_useEffect_ConceptualAside_StaleClosures/Finished/app.js:
--------------------------------------------------------------------------------
1 | function createCounter(incBy) {
2 | let value = 0;
3 |
4 | function increment() {
5 | value += incBy;
6 | console.log(value);
7 | }
8 |
9 | const message = `Current value is ${value}`;
10 | function log() {
11 | console.log(message);
12 | }
13 |
14 | return [increment, log];
15 | }
16 |
17 | const [increment, log] = createCounter(1);
18 | increment();
19 | increment();
20 | increment();
21 |
22 | log();
--------------------------------------------------------------------------------
/K8_useEffect_useEffectAndStaleClosures/Begin/app.js:
--------------------------------------------------------------------------------
1 | function createCounter(incBy) {
2 | let value = 0;
3 |
4 | function increment() {
5 | value += incBy;
6 | console.log(value);
7 | }
8 |
9 | const message = `Current value is ${value}`;
10 | function log() {
11 | console.log(message);
12 | }
13 |
14 | return [increment, log];
15 | }
16 |
17 | const [increment, log] = createCounter(1);
18 | increment();
19 | increment();
20 | increment();
21 |
22 | log();
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Understanding React (Source Code)
2 | Code for my course "Understanding React"
3 |
--------------------------------------------------------------------------------
/S2_Toolchains_ConceptualAside_ESModules/Finished/app.js:
--------------------------------------------------------------------------------
1 | import { CounterObj } from "./otherCode.js";
2 |
3 | const counters = [
4 | new CounterObj(1, 'A', 1, 0),
5 | new CounterObj(2, 'B', 2, 0),
6 | new CounterObj(3, 'C', 1, 0)
7 | ];
8 |
9 | console.log(counters);
--------------------------------------------------------------------------------
/S2_Toolchains_ConceptualAside_ESModules/Finished/otherCode.js:
--------------------------------------------------------------------------------
1 | /* Objects */
2 | export class CounterObj {
3 | constructor(id, name, tab, total) {
4 | this.id = id;
5 | this.name = name;
6 | this.tab = tab;
7 | this.total = total;
8 | }
9 | }
10 | /* End Objects */
--------------------------------------------------------------------------------
/S4_Toolchains_Vite/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/S4_Toolchains_Vite/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/S4_Toolchains_Vite/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/S4_Toolchains_Vite/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/S4_Toolchains_Vite/Finished/src/App.css
--------------------------------------------------------------------------------
/S4_Toolchains_Vite/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/S4_Toolchains_Vite/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/S4_Toolchains_Vite/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/T2_StrictMode_ExtraRerender/Begin/src/App.css
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/T2_StrictMode_ExtraRerender/Finished/src/App.css
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/T2_StrictMode_ExtraRerender/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/T3_StrictMode_ExtraEffectRerun/Begin/src/App.css
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/T3_StrictMode_ExtraEffectRerun/Finished/src/App.css
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/T3_StrictMode_ExtraEffectRerun/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U1_Forms_ReorganizingOurApp/Begin/src/App.css
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U1_Forms_ReorganizingOurApp/Finished/src/App.css
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U1_Forms_ReorganizingOurApp/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U2_Forms_UncontrolledInputs/Begin/src/App.css
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U2_Forms_UncontrolledInputs/Finished/src/App.css
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/components/AddCounter.jsx:
--------------------------------------------------------------------------------
1 | export function AddCounter() {
2 | return (
3 | <>
4 | Add Counter
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U2_Forms_UncontrolledInputs/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U3_Forms_ControlledInputs/Begin/src/App.css
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/components/AddCounter.jsx:
--------------------------------------------------------------------------------
1 | export function AddCounter() {
2 | return (
3 | <>
4 | Add Counter
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U3_Forms_ControlledInputs/Finished/src/App.css
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U3_Forms_ControlledInputs/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U4_Forms_Form/Begin/src/App.css
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U4_Forms_Form/Finished/src/App.css
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U4_Forms_Form/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U5_Forms_SelectTextarea/Begin/src/App.css
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/U5_Forms_SelectTextarea/Finished/src/App.css
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/U5_Forms_SelectTextarea/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/UnderstandingReact_TonyAlicea_AllCode.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/UnderstandingReact_TonyAlicea_AllCode.zip
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/V2_ReactDevTools_useDebugValue/Begin/src/App.css
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/V2_ReactDevTools_useDebugValue/Finished/src/App.css
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useDebugValue } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 |
5 | useDebugValue(title);
6 |
7 | return useEffect(() => {
8 | const originalTitle = document.title;
9 | document.title = title;
10 |
11 | return () => {
12 | document.title = originalTitle;
13 | }
14 | }, [title]);
15 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/V2_ReactDevTools_useDebugValue/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/App.css
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/App.css:
--------------------------------------------------------------------------------
1 | .header {
2 | color: darkgreen;
3 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/components/CounterList.css:
--------------------------------------------------------------------------------
1 | .header {
2 | color: green;
3 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useDebugValue } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 |
5 | useDebugValue(title);
6 |
7 | return useEffect(() => {
8 | const originalTitle = document.title;
9 | document.title = title;
10 |
11 | return () => {
12 | document.title = originalTitle;
13 | }
14 | }, [title]);
15 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/W2_CSSAndComponents_ToolchainsAndCSS/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/App.css
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/components/CounterList.css:
--------------------------------------------------------------------------------
1 | .header {
2 | color: green;
3 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 | return useEffect(() => {
5 | const originalTitle = document.title;
6 | document.title = title;
7 |
8 | return () => {
9 | document.title = originalTitle;
10 | }
11 | }, [title]);
12 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/App.css:
--------------------------------------------------------------------------------
1 | .header {
2 | color: darkgreen;
3 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/components/CounterList.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | color: green;
3 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useDebugValue } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 |
5 | useDebugValue(title);
6 |
7 | return useEffect(() => {
8 | const originalTitle = document.title;
9 | document.title = title;
10 |
11 | return () => {
12 | document.title = originalTitle;
13 | }
14 | }, [title]);
15 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/W3_CSSAndComponents_CSSModulesAndMore/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X10_ClassProject_HighlightedLetter/Begin/src/App.css
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/src/components/Guess.jsx:
--------------------------------------------------------------------------------
1 | export function Guess({ guess }) {
2 | return (
3 |
8 | )
9 | }
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/src/components/Score.jsx:
--------------------------------------------------------------------------------
1 | export function Score({ correctGuesses }) {
2 |
3 | let score = 0;
4 | correctGuesses.map((g) => {
5 | if (g.length === 4) {
6 | score++;
7 | } else {
8 | score = score + g.length;
9 | }
10 | });
11 |
12 | return (
13 | Score: { score }
14 | )
15 | }
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X10_ClassProject_HighlightedLetter/Finished/src/App.css
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/src/components/Guess.jsx:
--------------------------------------------------------------------------------
1 | export function Guess({ guess, centerLetter, outerLetters }) {
2 | return (
3 |
4 |
5 | {guess.split('').map((l, index) => {
6 | return {l}
7 | })}
8 |
9 |
10 | )
11 | }
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/src/components/Score.jsx:
--------------------------------------------------------------------------------
1 | export function Score({ correctGuesses }) {
2 |
3 | let score = 0;
4 | correctGuesses.map((g) => {
5 | if (g.length === 4) {
6 | score++;
7 | } else {
8 | score = score + g.length;
9 | }
10 | });
11 |
12 | return (
13 | Score: { score }
14 | )
15 | }
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X10_ClassProject_HighlightedLetter/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/App.css:
--------------------------------------------------------------------------------
1 | .header {
2 | color: darkgreen;
3 | }
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/components/CounterList.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | color: green;
3 | }
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/components/CounterSummaryDetail.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryDetail = memo(function CounterSummaryDetail({ name, total }) {
4 |
5 | //name.shortName = name.shortName + ':'; // different delimiters for different
6 | const cName = {...name, shortName: name.shortName + ':'};
7 |
8 | return (
9 | {cName.shortName} ({total})
10 | )
11 | });
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/components/CounterSummaryHeader.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 |
3 | export const CounterSummaryHeader = memo(function CounterSummaryHeader({ setVisibleTab1, setVisibleTab2 }) {
4 | return (
5 |
8 | )
9 | });
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/components/CounterTools.jsx:
--------------------------------------------------------------------------------
1 | import { CounterSummary } from './CounterSummary.jsx';
2 |
3 | export function CounterTools() {
4 | return (
5 |
6 | )
7 | }
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/contexts/contexts.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const CounterContext = createContext(null);
4 | export const CounterDispatchContext = createContext(null);
5 | export const TabContext = createContext(null);
6 | export const TabDispatchContext = createContext(null);
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/hooks/useDocumentTitle.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useDebugValue } from 'react';
2 |
3 | export function useDocumentTitle(title) {
4 |
5 | useDebugValue(title);
6 |
7 | return useEffect(() => {
8 | const originalTitle = document.title;
9 | document.title = title;
10 |
11 | return () => {
12 | document.title = originalTitle;
13 | }
14 | }, [title]);
15 | }
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 | .button {
6 | background-color: blue;
7 | color: white;
8 | }
9 |
10 | .counter, .counter__value {
11 | display: flex;
12 | flex-wrap: nowrap;
13 | gap: 1rem;
14 | border: none;
15 | padding: 0;
16 | margin: .5rem 0;
17 | align-items: center;
18 | }
19 |
20 | .counter__legend {
21 | padding: 0;
22 | font-weight: bold;
23 | }
24 |
25 | .counter__value {
26 | margin-inline-start: 0;
27 | }
28 |
29 | .counter__empty {
30 | width: 20px;
31 | }
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/models/counterObj.js:
--------------------------------------------------------------------------------
1 | export class CounterObj {
2 | constructor(id, name, tab, total) {
3 | this.id = id;
4 | this.name = name;
5 | this.tab = tab;
6 | this.total = total;
7 | }
8 | }
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/src/reducers/tabReducer.js:
--------------------------------------------------------------------------------
1 | export function tabReducer(visibleTab, action) {
2 | switch (action.type) {
3 | case 'change-tab': {
4 | if (action.tab === visibleTab) {
5 | return visibleTab;
6 | } else {
7 | return action.tab;
8 | }
9 | }
10 | default: {
11 | throw Error('Unknown action: ' + action.type);
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X3_ClassProject_GettingTheData/Finished/src/App.css
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Finished/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import './App.css';
3 |
4 | function App() {
5 |
6 | useEffect(() => {
7 | let results = {};
8 | fetch('/api/data.json', { headers: { "Content-Type": "application/json" } })
9 | .then(res => res.json())
10 | .then(data => console.log(data));
11 | }, []);
12 |
13 | return (
14 | <>
15 | );
16 | }
17 |
18 | export default App;
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X3_ClassProject_GettingTheData/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X4_ClassProject_Header/Begin/src/App.css
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import './App.css';
3 |
4 | function App() {
5 |
6 | useEffect(() => {
7 | let results = {};
8 | fetch('/api/data.json', { headers: { "Content-Type": "application/json" } })
9 | .then(res => res.json())
10 | .then(data => console.log(data));
11 | }, []);
12 |
13 | return (
14 | <>
15 | );
16 | }
17 |
18 | export default App;
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/src/components/Header.module.css:
--------------------------------------------------------------------------------
1 | .title {
2 | margin: 0;
3 | }
4 |
5 | .date, .editor {
6 | font-size: 0.875rem;
7 | margin-block-start: 0.25rem;
8 | margin-block-end: 0.25rem;
9 | }
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X4_ClassProject_Header/Finished/src/App.css
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import styles from './Header.module.css';
2 |
3 | export function Header({ date, editor }) {
4 |
5 | return (
6 |
11 | );
12 | }
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/src/components/Header.module.css:
--------------------------------------------------------------------------------
1 | .title {
2 | margin: 0;
3 | }
4 |
5 | .date, .editor {
6 | font-size: 0.875rem;
7 | margin-block-start: 0.25rem;
8 | margin-block-end: 0.25rem;
9 | }
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-size: 16px;
3 | }
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X4_ClassProject_Header/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X5_ClassProject_Honeycomb/Begin/src/App.css
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Begin/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | import styles from './Header.module.css';
2 |
3 | export function Header({ date, editor }) {
4 |
5 | return (
6 |
11 | );
12 | }
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Begin/src/components/Header.module.css:
--------------------------------------------------------------------------------
1 | .title {
2 | margin: 0;
3 | }
4 |
5 | .date, .editor {
6 | font-size: 0.875rem;
7 | margin-block-start: 0.25rem;
8 | margin-block-end: 0.25rem;
9 | }
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X5_ClassProject_Honeycomb/Finished/src/App.css
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Finished/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Finished/src/components/Letter.jsx:
--------------------------------------------------------------------------------
1 | export function Letter({ letter, isCenter }) {
2 |
3 | return (
4 |
8 | );
9 | }
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X5_ClassProject_Honeycomb/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X6_ClassProject_Shuffle/Begin/src/App.css
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Begin/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Begin/src/components/Letter.jsx:
--------------------------------------------------------------------------------
1 | export function Letter({ letter, isCenter }) {
2 |
3 | return (
4 |
8 | );
9 | }
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X6_ClassProject_Shuffle/Finished/src/App.css
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Finished/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Finished/src/components/Letter.jsx:
--------------------------------------------------------------------------------
1 | export function Letter({ letter, isCenter }) {
2 |
3 | return (
4 |
8 | );
9 | }
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X6_ClassProject_Shuffle/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X7_ClassProject_WordsAndLetters/Begin/src/App.css
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Begin/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Begin/src/components/Letter.jsx:
--------------------------------------------------------------------------------
1 | export function Letter({ letter, isCenter }) {
2 |
3 | return (
4 |
8 | );
9 | }
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X7_ClassProject_WordsAndLetters/Finished/src/App.css
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Finished/src/components/Guess.jsx:
--------------------------------------------------------------------------------
1 | export function Guess({ guess }) {
2 | return (
3 |
8 | )
9 | }
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Finished/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X7_ClassProject_WordsAndLetters/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X8_ClassProject_WordList/Begin/src/App.css
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Begin/src/components/Guess.jsx:
--------------------------------------------------------------------------------
1 | export function Guess({ guess }) {
2 | return (
3 |
8 | )
9 | }
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Begin/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X8_ClassProject_WordList/Finished/src/App.css
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Finished/src/components/Guess.jsx:
--------------------------------------------------------------------------------
1 | export function Guess({ guess }) {
2 | return (
3 |
8 | )
9 | }
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Finished/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X8_ClassProject_WordList/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Begin/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Begin/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Begin/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Begin/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X9_ClassProject_Score/Begin/src/App.css
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Begin/src/components/Guess.jsx:
--------------------------------------------------------------------------------
1 | export function Guess({ guess }) {
2 | return (
3 |
8 | )
9 | }
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Begin/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Begin/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Begin/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Understanding React
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/X9_ClassProject_Score/Finished/src/App.css
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/src/components/Guess.jsx:
--------------------------------------------------------------------------------
1 | export function Guess({ guess }) {
2 | return (
3 |
8 | )
9 | }
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/src/components/Header.jsx:
--------------------------------------------------------------------------------
1 | export function Header({ date, editor }) {
2 |
3 | return (
4 |
9 | );
10 | }
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/src/components/Score.jsx:
--------------------------------------------------------------------------------
1 | export function Score({ correctGuesses }) {
2 |
3 | let score = 0;
4 | correctGuesses.map((g) => {
5 | if (g.length === 4) {
6 | score++;
7 | } else {
8 | score = score + g.length;
9 | }
10 | });
11 |
12 | return (
13 | Score: { score }
14 | )
15 | }
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/X9_ClassProject_Score/Finished/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/Z2_Suspense_SuspenseAndRemix/Begin/routes/_index.tsx:
--------------------------------------------------------------------------------
1 | import type { MetaFunction } from "@remix-run/node";
2 |
3 | export const meta: MetaFunction = () => {
4 | return [
5 | { title: "New Remix App" },
6 | { name: "description", content: "Welcome to Remix!" },
7 | ];
8 | };
9 |
10 | export default function Index() {
11 | return (
12 |
13 |
14 | Courses by Tony Alicea
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/ZR1_ReactServerComponents_ServerComponents/Finished/components/courses.js:
--------------------------------------------------------------------------------
1 | export function Courses() {
2 |
3 | const data = ["Understanding React", "Understanding HTML and CSS", "JavaScript: Understanding the Weird Parts"];
4 |
5 | return (
6 |
7 | {data.map((c, index) => - {c}
)}
8 |
9 | )
10 | }
--------------------------------------------------------------------------------
/ZR1_ReactServerComponents_ServerComponents/Finished/page.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import styles from "./page.module.css";
3 | import { Courses } from './components/courses.js';
4 |
5 | export default function Home() {
6 | return (
7 |
8 | Tony Alicea's Courses
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/ZR1_ReactServerComponents_ServerComponents/Finished/page.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/ZR1_ReactServerComponents_ServerComponents/Finished/page.module.css
--------------------------------------------------------------------------------
/ZR2_ReactServerComponents_ClientComponentsAndUseClient/Begin/components/courses.js:
--------------------------------------------------------------------------------
1 | export function Courses() {
2 |
3 | const data = ["Understanding React", "Understanding HTML and CSS", "JavaScript: Understanding the Weird Parts"];
4 |
5 | return (
6 |
7 | {data.map((c, index) => - {c}
)}
8 |
9 | )
10 | }
--------------------------------------------------------------------------------
/ZR2_ReactServerComponents_ClientComponentsAndUseClient/Begin/page.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import styles from "./page.module.css";
3 | import { Courses } from './components/courses.js';
4 |
5 | export default function Home() {
6 | return (
7 |
8 | Tony Alicea's Courses
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/ZR2_ReactServerComponents_ClientComponentsAndUseClient/Begin/page.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/ZR2_ReactServerComponents_ClientComponentsAndUseClient/Begin/page.module.css
--------------------------------------------------------------------------------
/ZR2_ReactServerComponents_ClientComponentsAndUseClient/Finished/components/courses.js:
--------------------------------------------------------------------------------
1 | export function Courses() {
2 |
3 | const data = ["Understanding React", "Understanding HTML and CSS", "JavaScript: Understanding the Weird Parts"];
4 |
5 | return (
6 |
7 | {data.map((c, index) => - {c}
)}
8 |
9 | )
10 | }
--------------------------------------------------------------------------------
/ZR2_ReactServerComponents_ClientComponentsAndUseClient/Finished/page.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import styles from "./page.module.css";
3 | import { AllCaps } from './components/allcaps.js';
4 | import { Courses } from './components/courses.js';
5 |
6 | export default function Home() {
7 | return (
8 |
9 | Tony Alicea's Courses
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/ZR2_ReactServerComponents_ClientComponentsAndUseClient/Finished/page.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/ZR2_ReactServerComponents_ClientComponentsAndUseClient/Finished/page.module.css
--------------------------------------------------------------------------------
/ZR4_ReactServerComponents_ComposingClientAndServerComponents/Begin/components/courses.js:
--------------------------------------------------------------------------------
1 | export function Courses() {
2 |
3 | const data = ["Understanding React", "Understanding HTML and CSS", "JavaScript: Understanding the Weird Parts"];
4 |
5 | return (
6 |
7 | {data.map((c, index) => - {c}
)}
8 |
9 | )
10 | }
--------------------------------------------------------------------------------
/ZR4_ReactServerComponents_ComposingClientAndServerComponents/Begin/page.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import styles from "./page.module.css";
3 | import { AllCaps } from './components/allcaps.js';
4 | import { Courses } from './components/courses.js';
5 |
6 | export default function Home() {
7 | return (
8 |
9 | Tony Alicea's Courses
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/ZR4_ReactServerComponents_ComposingClientAndServerComponents/Begin/page.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/ZR4_ReactServerComponents_ComposingClientAndServerComponents/Begin/page.module.css
--------------------------------------------------------------------------------
/ZR4_ReactServerComponents_ComposingClientAndServerComponents/Finished/components/courses.js:
--------------------------------------------------------------------------------
1 | export function Courses() {
2 |
3 | const data = ["Understanding React", "Understanding HTML and CSS", "JavaScript: Understanding the Weird Parts"];
4 |
5 | return (
6 |
7 | {data.map((c, index) => - {c}
)}
8 |
9 | )
10 | }
--------------------------------------------------------------------------------
/ZR4_ReactServerComponents_ComposingClientAndServerComponents/Finished/page.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import styles from "./page.module.css";
3 | import { AllCaps } from './components/allcaps.js';
4 | import { Courses } from './components/courses.js';
5 |
6 | export default function Home() {
7 | return (
8 |
9 | Tony Alicea's Courses
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/ZR4_ReactServerComponents_ComposingClientAndServerComponents/Finished/page.module.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnthonyPAlicea/understandingreact/8309b18d84fff190828165e098ca1edae06fb4c5/ZR4_ReactServerComponents_ComposingClientAndServerComponents/Finished/page.module.css
--------------------------------------------------------------------------------