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:

Welcome to my website!

logOutCurrentUser(currentUser)}
sidePanel={
component will almost certainly render
a html node, and not much else.

# 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;

Notification from HelloPets.com: {message}

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