| 😄 | 😆 | 😊 | 😃 |
😩 | 😔 | 😞 | 😖 | 😨 | 😰 | 😣 | 😢 | 😭 | 😂 | 😲 | 😱 | | 😫 | 😠 | 😡 | 😤 | 😪 | 😋 | 😷
😎 | 😵 | 👿 | 😈 | 😐 | 😶 | 😇 | 👽 | 💛 | 💙 | 💜 | ❤️ | 💚 | 💔 | 💓 | 💗 | 💕 | 💞 | 💘 | ✨
| 😄 | 😆 | 😊 | 😃 |
😩 | 😔 | 😞 | 😖 | 😨 | 😰 | 😣 | 😢 | 😭 | 😂 | 😲 | 😱 | | 😫 | 😠 | 😡 | 😤 | 😪 | 😋 | 😷
😎 | 😵 | 👿 | 😈 | 😐 | 😶 | 😇 | 👽 | 💛 | 💙 | 💜 | ❤️ | 💚 | 💔 | 💓 | 💗 | 💕 | 💞 | 💘 | ✨
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
const ThemeContext = React.createContext('light'); | |
class ThemeProvider extends React.Component { | |
state = {theme: 'light'}; | |
render() { | |
return ( | |
<ThemeContext.Provider value={this.state.theme}> | |
{this.props.children} | |
</ThemeContext.Provider> |
class MyComponent extends React.Component { | |
constructor(props) { | |
super(props); | |
this.inputRef = React.createRef(); | |
} | |
render() { | |
return <input type="text" ref={this.inputRef} />; | |
} |
class FancyButton extends React.Component { | |
buttonRef = React.createRef(); | |
focus() { | |
this.buttonRef.current.focus(); | |
} | |
render() { | |
const {label, theme, ...rest} = this.props; | |
return ( |
function withTheme(Component) { | |
return function ThemedComponent(props) { | |
return ( | |
<ThemeContext.Consumer> | |
{theme => <Component {...props} theme={theme} />} | |
</ThemeContext.Consumer> | |
); | |
}; | |
} |
function withTheme(Component) { | |
function ThemedComponent({forwardedRef, ...rest}) { | |
return ( | |
<ThemeContext.Consumer> | |
{theme => ( | |
// Assign the custom prop "forwardedRef" as a ref | |
<Component | |
{...rest} | |
ref={forwardedRef} | |
theme={theme} |
<DataProvider render={data => ( | |
<h1>Hello {data.target}</h1> | |
)}/> |
class MouseTracker extends React.Component { | |
constructor(props) { | |
super(props); | |
this.handleMouseMove = this.handleMouseMove.bind(this); | |
this.state = { x: 0, y: 0 }; | |
} | |
handleMouseMove(event) { | |
this.setState({ | |
x: event.clientX, |