| import { useState, useEffect, useRef, useMemo } from 'react' | |
| export default function Wordle() { | |
| let [currentAttempt, setCurrentAttempt] = useState('') | |
| let [bestColors, setBestColors] = useState(() => new Map()) | |
| let [history, setHistory] = usePersistedHistory(h => { | |
| waitForAnimation(h) | |
| }) | |
| useEffect(() => { |
| <div id="screen"> | |
| <h1>Wordle</h1> | |
| <div id="grid"></div> | |
| <div id="keyboard"></div> | |
| </div> | |
| <style> | |
| body, html { | |
| background: #111; | |
| color: white; | |
| font-family: sans-serif; |
| <h1>Wordle</h1> | |
| <div id="grid"></div> | |
| <style> | |
| body, html { | |
| background: #111; | |
| color: white; | |
| font-family: sans-serif; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <div id="canvas"></div> | |
| <button id="restart">Restart</button> | |
| <script src="minesweeper.js"></script> | |
| <style> | |
| * { |
| <div id="canvas"></div> | |
| <style> | |
| #canvas { | |
| width: 500px; | |
| height: 300px; | |
| border: 5px solid black; | |
| position: relative; | |
| box-sizing: content-box; | |
| } |
| // from/to: { left, top, width, height, shape: 'circle' | 'rect' } | |
| function CurvedArrow({ from, to }) { | |
| function curvedHorizontal(x1, y1, x2, y2) { | |
| function pos(t) { | |
| let mx = x1 + (x2 - x1) / 2; | |
| let p1 = {x: x1, y: y1}; | |
| let p2 = {x: mx, y: y1}; | |
| let p3 = {x: mx, y: y2}; | |
| let p4 = {x: x2, y: y2}; | |
| return { |
| class Spiderman { | |
| lookOut() { | |
| alert('My Spider-Sense is tingling.'); | |
| } | |
| } | |
| let miles = new Spiderman(); | |
| miles.lookOut(); |
| const express = require('express'); | |
| const app = express(); | |
| // Application | |
| app.get('/', function(req, res) { | |
| if (process.env.NODE_ENV === 'development') { | |
| for (var key in require.cache) { | |
| delete require.cache[key]; | |
| } | |
| } |
If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.
You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.
If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.
function MyComponent() {
| function MyResponsiveComponent() { | |
| const width = useWindowWidth(); // Our custom Hook | |
| return ( | |
| <p>Window width is {width}</p> | |
| ); | |
| } |