marp: true
# Abstraction
Copyright By PowCoder代写 加微信 powcoder
Fundamentally, React is kinda weird.
It requires a bit of a shift in mental perspective.
# The spectrum of components
Here are two different React components being used:
sidePanel={
a
# Why is this thinking useful
We want to structure our components so that items have a _clear spot_ on this spectrum.
This leads to more predictable, “cleaner” code.
The following component is blurry in terms of abstraction. Let’s address that by extracting components.
const Banner = ({ type, message, user }) => {
const bg = type === “success” ? “green” : “red”;
// Only logged in users are allowed to see the banner
if (!user) {
return null;
const ContactPage = () => {
const [message, setMessage] = useState(“”);
const [messageError, setMessageError] = useState(false);
Contact Us
We’re looking forward to hearing from you. Please fill in this contact
value={message}
onChange={(ev) => {
setMessage(ev.target.value);
if (ev.target.value.length < 100) { setMessageError(true); setMessageError(false); {messageError && (
Please enter at least 100 characters.
## Resources
[On the Spectrum of Abstraction](https://www.youtube.com/watch?v=mVVNJKv9esE)
This is an advanced talk, but definitely worthwhile.
Even if you don’t understand everything the speaker says, the general idea should get you think about all of this stuff.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com