Public
Edited
Apr 3
1 fork
import {
render,
jsx,
component,
useState,
useEffect,
useRef
} from "@j-f1/react-16"
//This works
function SimpleHelloWorld() {
return jsx`
<div>
Hello World!
</div>
`;
}
render((_) => jsx`<${SimpleHelloWorld}/>`)
//This fails
function SimpleHelloWorld2() {
var ref = useState();
return jsx`
<div>
Hello World!
</div>
`;
}
function CounterComponent() {
// 1. Initialize state using useState with an initial value of 0
// 2. Destructure the returned array into the state variable (count)
// and the setter function (setCount)
const [count, setCount] = useState(0);
// 3. Define a function to handle the button click
const increment = () => {
// 4. Use the setter function to update the state.
// Using a function ensures we update based on the *previous* state.
setCount((prevCount) => prevCount + 1);
};
// 5. Return JSX using the jsx tagged template literal
return jsx`
<div>
<h2>Counter Example</h2>
<p>Current Count: ${count}</p>
<button onClick=${increment}>
Increment +
</button>
</div>
`;
}
render((_) => jsx`<${CounterComponent}/>`)
render((_) => jsx`<${HelloWorldComponent}/>`)
function HelloWorldComponent() {
// Create a ref object using the useRef hook properly
const messageRef = useRef({
message: "Hello, World!",
greetings: {
english: "Hello, World!",
spanish: "¡Hola, Mundo!",
french: "Bonjour, Monde!"
},
language: "english",
addLanguage: function(language) {
this.greetings[language] = this.greetings[language] || "";
},
removeLanguage: function(language) {
if (language in this.greetings && Object.keys(this.greetings).length > 1) {
delete this.greetings[language];
}
},
update: function() {
console.log("Updated message configuration");
}
});
const [currentGreeting, setCurrentGreeting] = useState(messageRef.current.message);
const [currentLanguage, setCurrentLanguage] = useState("english"); //default language
const handleGreetingChange = (newGreeting) => {
messageRef.current.message = newGreeting;
setCurrentGreeting(newGreeting);
messageRef.current.update();
};
const addNewLanguage = (newLanguage) => {
messageRef.current.addLanguage(newLanguage);
messageRef.current.update();
};
const deleteLanguage = (languageName) => {
if (currentLanguage === languageName) {
setCurrentLanguage(Object.keys(messageRef.current.greetings)[0]);
messageRef.current.language = Object.keys(messageRef.current.greetings)[0];
}
messageRef.current.removeLanguage(languageName);
messageRef.current.update();
};
const handleLanguageAdd = (languageName) => {
messageRef.current.addLanguage(languageName);
messageRef.current.update();
};
const handleLanguageRemove = (languageName) => {
messageRef.current.removeLanguage(languageName);
messageRef.current.update();
};
return jsx`
<div>
<${Header}
onLanguageAdd={handleLanguageAdd}
onLanguageRemove={handleLanguageRemove}
onGreetingChange=${handleGreetingChange}
messageRef=${messageRef}
addNewLanguage=${addNewLanguage}
deleteLanguage=${deleteLanguage}
currentLanguage=${currentLanguage}
setCurrentLanguage=${setCurrentLanguage}
currentLanguage={currentLanguage}
/>
<${Display} messageRef=${messageRef} currentGreeting=${currentGreeting} currentLanguage=${currentLanguage}/>
</div>
`;
}
function Header({
onLanguageAdd,
onLanguageRemove,
onGreetingChange,
messageRef,
addNewLanguage,
deleteLanguage,
currentLanguage,
setCurrentLanguage
}) {
const [newLanguageName, setNewLanguageName] = useState("");
const [customGreeting, setCustomGreeting] = useState("");
const handleLanguageSelect = (e) => {
const selectedLanguage = e.target.value;
setCurrentLanguage(selectedLanguage);
onGreetingChange(messageRef.current.greetings[selectedLanguage]);
};
const handleAddLanguage = () => {
if (newLanguageName && customGreeting) {
messageRef.current.greetings[newLanguageName.toLowerCase()] = customGreeting;
addNewLanguage(newLanguageName.toLowerCase());
setNewLanguageName("");
setCustomGreeting("");
}
};
const handleRemoveLanguage = (language) => {
if (Object.keys(messageRef.current.greetings).length > 1) {
deleteLanguage(language);
}
};
return jsx`
<div className="header">
<div className="language-selector">
<label>Select Language:</label>
<select value=${currentLanguage} onChange=${handleLanguageSelect}>
${Object.keys(messageRef.current.greetings).map(lang => jsx`
<option value=${lang}>${lang.charAt(0).toUpperCase() + lang.slice(1)}</option>
`)}
</select>
</div>
<div className="language-controls">
<input
type="text"
placeholder="New language name"
value=${newLanguageName}
onChange=${e => setNewLanguageName(e.target.value)}
/>
<input
type="text"
placeholder="Custom greeting"
value=${customGreeting}
onChange=${e => setCustomGreeting(e.target.value)}
/>
<button onClick=${handleAddLanguage}>Add Language</button>
<div className="remove-languages">
${Object.keys(messageRef.current.greetings).map(lang => jsx`
<button onClick=${() => handleRemoveLanguage(lang)}>
Remove ${lang}
</button>
`)}
</div>
</div>
</div>
`;
}
function Display({ messageRef, currentGreeting, currentLanguage }) {
const getBackgroundColor = () => {
const colorMap = {
english: "#e0f7fa",
spanish: "#fff9c4",
french: "#e8eaf6",
german: "#f1f8e9",
japanese: "#fce4ec"
};
return colorMap[currentLanguage] || "#f5f5f5";
};
return jsx`
<div className="display" style=${{
backgroundColor: getBackgroundColor(),
padding: "2rem",
margin: "1rem 0",
borderRadius: "8px",
textAlign: "center",
fontSize: "2rem",
fontWeight: "bold",
transition: "background-color 0.3s ease"
}}>
<h1>${currentGreeting}</h1>
<p>${
currentLanguage.charAt(0).toUpperCase() + currentLanguage.slice(1)
} greeting</p>
</div>
`;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
