This article specifically focuses on how to deal with components and state because that seems to be the biggest hurdle to learn React after syntax. You can do it!
Why components at all?
Why use a system to manage state and not just whatever I like?
They provide a sensible way to structure your app.
They solve collaboration with others(and your future self).
Remember when you were writing cool projects with jQuery, Flash or Framer Classic? Just hooking up a few event handlers and things started to respond and be cool. Lots of fun! You quickly add a bunch of other ideas on top and⌠hmmm isnât this supposed to update on that click?Â
Aaah got it, easy fix, letâs add another few screens. Wow, more than a hundred lines of code already, I must be really having fun! But wait⌠where was that thing where I stored the value of the other thing? And I canât seem to figure out why itâs doing some stuff sometimes, but not other times. It seems like the more I add, the more time Iâm spending on figuring out bugs and simply looking how I put everything together in the first place. I should maybe go back and restructure this whole thing⌠grmbl there goes the fun.
If this feels familiar, you were like me. After this you likely came up with some way to add aâcomponent structureâ to your project. Maybe you studied how classes worked. Or you went deep into functions, trying different things. And every approach was cool but had a bunch of less than ideal trade-offs that you eventually ran into.
This is what React components really solve. They give you a simple structure to divide every project into smaller pieces, into components. The rules are smart, simple and powerful.
But the best part is that everyone uses the same structure. So now you can move components around any project, you can easily figure out how anything is built because even the largest app uses the same simple rules under the hood. The real power of components is a broad consensus.
Itâs also worth noting that Reacts component approach is now adopted by Apple(SwiftUI) and Google(Flutter). Itâs more than a hip JavaScript thing. Itâs a better way of thinking about interfaces that you will be able to use for the decades to come.
âDumbâ Components(functional, pure)
Most components are pretty simple. They just render a piece of interface like a header or a button. Basically just a bit of html and css with some input variables(like a title), nicely packaged up so that you can re-use them across projects or build them into a system. Their power is basically just in the packaging of structure and style.
functionHeader({ children }){
 const style = { fontSize: 22 };
 return <h1 style={style}>{children}</h1>;
}
functionButton({ title = "My Title", onClick }){
Why components at all?
âDumbâ Components (functional, pure)
function Header({ children }) {Â const style = { fontSize: 22 };Â return <h1 style={style}>{children}</h1>;}
function Button({ title = "My Title", onClick }) {Â const style = { background: "blue", color: "white" };Â return <button style={style} onClick={onClick}>{title}</button>;}
function App() {Â return (Â Â <div>Â Â Â <Header>Warning: Test</Header>Â Â Â <Button title="Cancel" onClick={() => alert("Cancel")} />Â Â Â <Button title="OK" onClick={() => alert("OK")} />