Paul MelnikowandGitHub
c7deb5a0d1
I did this as a warm-up to using [React hooks](https://reactjs.org/docs/hooks-intro.html), which provide a better way to accomplish stateful things and side effects using functional components. This allows all components to be written in the same style, improves testability, facilitates code reuse, etc. There's [a intro here](https://reactjs.org/docs/hooks-intro.html) which links to [Dan's talk at React Conf](https://www.youtube.com/watch?time_continue=3599&v=dpw9EHDh2bM) which does a really good job of explaining why hooks are a good way to write components. He describes hooks as being the electrons and neutrons to components which are atoms. Low-level functionality which was always there in React, though not as accessibly or visibly. This adds a lint rule that enforces "the rule of hooks" which says they have to be declared at the top level in the functional component. I don't think this changeset does a fabulous job of showing off the improvements hooks allows, though I think it is still a good direction for this code.
17 lines
337 B
JavaScript
17 lines
337 B
JavaScript
import React from 'react'
|
|
import styled from 'styled-components'
|
|
|
|
const Donate = styled.div`
|
|
padding: 25px 50px;
|
|
`
|
|
|
|
export default function DonateBox() {
|
|
return (
|
|
<Donate>
|
|
Love Shields? Please consider{' '}
|
|
<a href="https://opencollective.com/shields">donating</a> to sustain our
|
|
activities
|
|
</Donate>
|
|
)
|
|
}
|