View Code? Open in Web Editor
NEW
Discover a captivating ReactJS demo showcasing advanced features like Refs and Portals. Play the Almost Final Countdown game, where players challenge themselves with timer tasks, utilizing direct DOM access, dynamic value management, and component APIs. Experience seamless modal rendering with Portals. Dive into the code and explore the magic!
Home Page: https://sofiane-abou-abderrahim.github.io/react-the-almost-final-countdown/
HTML 7.08%
JavaScript 48.62%
CSS 44.30%
react-the-almost-final-countdown's Introduction
Advanced DOM Access & Value Management
Accessing DOM Elements with Refs
Managing Values with Refs
Exposing API Functions from Components
Detaching DOM Rendering from JSX Structure with Portals
0. Module Introduction & Starting Project
run npm install
run npm run dev
create README.md
1. Repetition: Managing User Input with State (Two-Way-Binding)
use useState()
and two-way-binding in Player.jsx
2. Introducing Refs: Connecting & Accessing HTML Elements via Refs
replace useState()
with useRef()
in Player.jsx
because it is more convenient
3. Manipulating the DOM via Refs
use useRef()
to clear the input in Player.jsx
4. Adding Challenges to the Demo Project
create TimerChallenge.jsx
component
output <TimerChallenge />
components in App.jsx
5. Setting Timers & Managing State
use useState()
to set a timer in TimerChallenge.jsx
render UI dynamically
6. Using Refs for More Than "DOM Element Connections"
use useRef()
in TimerChallenge.jsx
to store the timer
value without resetting it when the component is reexecuted
7. Adding a Modal Component
create ResultModal.jsx
component
output the <ResultModal />
component in TimerChallenge.jsx
8. Forwarding Refs to Custom Components
reach out the dialog in ResultModal
from TimerChallenge.jsx
with help of useRef()
forward the ref defined in TimerChallenge.jsx
to the dialog element in ResultModal.jsx
with help of the forwardRef
function
use this dialog in TimerChallenge.jsx
9. Exposing Component APIs via the useImperativeHandle Hook
detach the TimerChallenge.jsx
component from the dialog
element from the ``ResultModal.jsxcomponent with help of
useImperativeHandle()`
10. More Examples: When To Use Refs & State
measure how much time is left on an ongoing basis with setInterval()
instead of setTimeout
in TimerChallenge.jsx
use clearInterval()
instead of clearTimeout()
11. Sharing State Across Components
forward the correct information to the modal by replacing the result
prop with the remainingTime
prop
use the remainingTime
prop to calculate the score or find out if the user lost in ResultModal.jsx
add a handleReset
function to reset the remaining time correctly
trigger the handleReset()
function through a onReset
prop from ResultModal.jsx
12. Enhancing the Demo App "Result Modal"
calculate the score in ResultModal.jsx
output the score dynamically
13. Closing the Modal via the ESC (Escape) Key
add the built-in onClose
prop to the <dialog>
element and bind it to the onReset
prop value
14. Introducing & Understanding "Portals"
use the createPortal()
function imported from react-dom
on the <dialog>
element in ResultModal.jsx
attach the modal to the <div>
with an id
of modal
in index.html
react-the-almost-final-countdown's People
Contributors
Watchers