Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/batsignal.html

Created June 27, 2017 23:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JoelCodes/b5aceaefac554ca6472282fdc03e6ae9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JoelCodes/b5aceaefac554ca6472282fdc03e6ae9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
batsignal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
console.log(this);
class App extends React.Component{
constructor(props){
super(props);
this.state = {count: 0};
}
render(){
const incrementFn = () => {
this.setState({count: this.state.count + 1});
}
return (<div>
<Displayer count={this.state.count}/>
<Incrementer incrementFn={incrementFn}/>
</div>)
}
}
const Displayer = ({count}) => {
return (<h1>{count}</h1>);
}
// class Displayer extends React.Component{
// render(){
// return <h1>{this.props.count}</h1>
// }
// }
const Incrementer = (props) => {
return (<button onClick={props.incrementFn}>+</button>)
}
// class Incrementer extends React.Component{
// render(){
// return <button onClick={this.props.incrementFn}>+</button>
// }
// }
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
</body>
</html>
Raw
lifecycle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class ParentApp extends React.Component{
constructor(props){
super(props);
this.state = {name: 'Michael'};
}
componentDidMount(){
setTimeout(() => {
this.setState({name: 'Kian'});
}, 2000);
setTimeout(() => {
this.setState({name: undefined});
}, 4000);
}
render(){
if(this.state.name)
return (<LifecycleComponent name={this.state.name}/>);
return <h1>Nothing</h1>;
}
}
class LifecycleComponent extends React.Component{
constructor(props){
super(props);
console.log('Constructor');
}
componentWillMount(){
console.log('Component Will Mount');
}
componentDidMount(){
console.log('Component Did Mount');
}
componentWillReceiveProps(nextProps, nextContext){
console.log('Component Will Receive Props', nextProps, nextContext)
}
componentWillUpdate(nextProps, nextState, nextContext){
console.log('Component Will Update', nextProps, nextState, nextContext)
}
componentWillUnmount() {
console.log('Component Will Unmount')
}
render(){
console.log('Render', this.props)
return <h1>Hello {this.props.name}</h1>
}
}
ReactDOM.render(
<ParentApp/>,
document.getElementById('root')
);
</script>
</body>
</html>
Raw
tweetr-public-from-react.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,700" rel="stylesheet">
<title>Tweeter - Home Page</title>
<style>
.over{
color: tomato;
}
</style>
<!-- External CSS -->
<link rel="stylesheet" href="/vendor/normalize-4.1.1.css" type="text/css" />
<!-- App CSS -->
<link rel="stylesheet" href="/styles/styles.css" type="text/css" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js'></script>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const tweetSvc = {
getTweets: () => axios.get('/tweets')
.then(response => response.data),
makeTweet: (text) => axios.post('/tweets', {text})
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { composerOpen: true, tweets: [] };
}
componentDidMount(){
this.loadTweets();
}
loadTweets(){
tweetSvc
.getTweets()
.then(tweets => {
this.setState({tweets});
});
}
createTweet(content){
tweetSvc
.makeTweet(content)
.then(() => {
this.loadTweets();
});
}
render() {
const toggleComposerOpen = () => {
this.setState({ composerOpen: !this.state.composerOpen });
};
return (
<div>
<NavBar composeButtonClick={toggleComposerOpen} />
<main className="container">
<TweetComposer
isOpen={this.state.composerOpen}
onCreateTweet={(content) => this.createTweet(content)}/>
<TweetList tweets={this.state.tweets} />
</main>
</div>
);
}
}
const NavBar = ({ composeButtonClick }) => (
<nav className="nav-bar">
<img className="logo" src="/images/bird.png" />
<span className="header">Tweeters</span>
<button className="compose" onClick={composeButtonClick}>✎ Compose</button>
</nav>);
class TweetComposer extends React.Component {
constructor(props) {
super(props);
this.state = { tweetContent: '' };
}
render() {
if(!this.props.isOpen) return null;
const onChange = (event) => {
this.setState({ tweetContent: event.target.value });
};
const onSubmit = (event) => {
event.preventDefault();
this.props.onCreateTweet(this.state.tweetContent);
this.setState({tweetContent: ''});
}
const len = this.state.tweetContent.length;
const counterClass = (len > 140) ? 'counter over': 'counter'
return (<section className="new-tweet">
<h2>Compose Tweet</h2>
<form id="new-tweet" onSubmit={onSubmit}>
<textarea name="text" placeholder="What are you humming about?" onChange={onChange} value={this.state.tweetContent} />
<input type="submit" value="Tweet" disabled={len > 140 || len < 1}/>
<span className={counterClass}>
{140 - len}
</span>
</form>
</section>);
}
}
const Tweet = ({ tweet }) => (<article className="tweet">
<header>
<span className="user">
<img src={tweet.user.avatars.small} />{tweet.user.name}
</span>
<span className="handle">{tweet.user.handle}</span>
</header>
<p className="tweet-content">{tweet.content.text}</p>
<footer>
<div><time>Two days ago</time>
<span className="icons">{tweet.likes}
<span className="like liked">❤︎</span>
</span>
</div>
</footer>
</article>);
const TweetList = ({ tweets }) => {
const tweetItems = tweets
.reverse()
.map(tweet => <Tweet key={tweet._id} tweet={tweet} />);
return (<div className="tweets">
{tweetItems}
</div>);
};
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment