This is why React won: No template language to learn. No prescriptions for managing your app. No piles of abstractions to do basic things. It's just a UI lib. Import it, declare what to paint on-screen, done.
Oh, you want routing? "Not my business", says React. Go add a routing library. You want a framework for managing global state? Go find one. Want a kitchen sink frontend solution which bundles all of these commonplace features together? Use Create React App, or Next.js, or whatever fits your use case.
That's why I love React. The complexity of the solution matches the complexity of the problem.
Hello world:
const App = () => <div>Hello world!</div>
root.render(<App />);
Basic reactivity (output click event to console):
const App = () => <button onClick={console.log}></button>
Composition & enumeration (dynamic bullet list!):
const OneTwoThree = () => [1, 2, 3].map(i => <li>{i}</li>)
const App = () => (
<ul>
<OneTwoThree />
</ul>
)
Set UI output data and CSS style based on asynchronous query results:
const App = () => {
const [isGoogleUp, setIsGoogleUp] = useState(true);
const checkGoogleStatus = () =>
fetch('http://google.com')
.then((response) => setIsGoogleUp(response.ok))
.catch((err) => setIsgoogleUp(false));
useEffect(() => {
checkGoogleStatus();
}, []);
return isGoogleUp
? (<span style={{ color: 'green' }}>Google is up!</span>)
: (<span style={{ color: 'red' }}>Can't reach Google.</span>);
};
I can't imagine things being much simpler than this. No extra CSS files. No `Controller` classes. No janky, bespoke HTML "attributes" to make array loops or conditionals work. Just pure JavaScript (JSX optional) painting what you declare. That's my jam. I can't endure the agony of learning another damn template language or SomeCompany's (leaky) abstractions.