Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic ReactJS work
// React Native syntax
var MyComponent = React.createClass({
render() {
return <div>
<h1>Hello World</h1>
<p>This is my first React component!</p>
</div>
}
})
// ES6 class syntax
class MyComponent extends React.Component {
render() {
return <div>
<h1>Hello World</h1>
<p>This is my first React component!</p>
</div>
}
}
// Stateless functional component syntax
const MyComponent = () => {
return <div>
<h1>Hello World</h1>
<p>This is my first React component!</p>
</div>
}
// Render DOM element
ReactDOM.render( <MyComponent />,
document.getElementById('react-container' ) )
// Properties (stateless syntax)
const ChristmasGift = () => {
return (
<div className="present">
<span className="bow"></span>
<span className="ribbon"></span>
<h1 className="present-title">{this.props.text}<span>{this.props.children}</span></h1>
</div>
)
}
// Events (ES6 syntax)
/**
* Note: CAN'T use ES6 syntax nor Stateless syntax to write custom function() names separated by commas
* Should use React Native syntax instead
*/
var Present = React.createClass {
open() { // Create your own custom events
alert( "Opening present" )
},
render() {
return (
<div className="present" onClick={this.open}>
<span className="bow"></span>
<span className="ribbon"></span>
<h1 className="present-title">{this.props.text}<span>{this.props.children}</span></h1>
</div>
)
}
} // END React.Component
// State (React Native syntax)
var Satisfied = React.createClass({
getInitialState() { // the state of the Component when first created
return {checked: false}
},
checkToggle() {
this.setState({checked: !this.state.checked}) // reverse the state true/false
},
render() {
var msg
if ( this.state.checked ) { msg = "satisfied" }
else { msg = "unsatisfied" }
return (
<div>
<input type="checkbox"
onChange={this.checkToggle}
defaultChecked={this.state.checked} />
<p>Looks like you are {msg} with your Christmas presents.</p>
</div>
)
}
}) // END React class
// Render our Components
/**
* Notes:
* 1. Don't put comments in this function - the compiler will either have an error, or output the comment as plain text
* 2. Also, don't use commas between Components - this is XML, treat it like a block of HTML
* 3. All Components must be contained within an enclosing <div>
* 4. Any text between Component tags (i.e. "th") is this.props.children
*/
ReactDOM.render(
<div>
<ChristmasGift text="25">th</ChristmasGift>
<Present text="24">th</Present>
<Satisfied></Satisfied>
</div>,
document.getElementById('under-the-tree')
)
// Add State to Present
class PresentState extends React.Component {
getInitialState() {
return { open: false }
},
open() { // Create your own custom events
this.setState({open: true})
},
close() {
this.setState({open: false})
},
renderGift() {
return (
<div className="present" onClick={this.open}>
<span className="bow"></span>
<span className="ribbon"></span>
<h1 className="present-title">25<span>th</span></h1>
</div>
)
},
renderBlog() {
return (
<div className="blog-post">
<h1 className="post-title">{this.props.title}</h1>
<p className="excerpt">{this.props.children}</p>
<button onClick={this.close}>CLOSE</button>
</div>
)
},
render() {
return (this.state.open) ? this.renderBlog() : this.renderGift()
}
} // END React.Component
// Render our Component
ReactDOM.render(
<PresentState title="Blog Post Title">Blog Post Excerpt</PresentState>
document.getElementById('under-the-tree')
)
// React Gift Component
var Gift = React.createClass({
getInitialState() {
return { open: false, addressing: false }
},
// Functions for handling the opening/closing of a Gift (to view the blog post)
open() {
this.setState({reading: true})
},
close() {
this.setState({reading: false})
},
// Functions for handling adding a "To:" address note on the present's tag
address() {
this.setState({addressing: true})
},
save() {
var name = this.refs.yourName.value // retrieved from the "tag" <div> - save it later
this.setState({addressing: false})
},
// Function to render the Gift
/* Note: Use refs to retrieve data (input) into the React script and work with it further */
renderGift() {
return (
<div className="present" onClick={this.open}>
<span className="bow"></span>
<span className="ribbon"></span>
<div className="tag" onClick={this.address}>
To: <input type="text" ref="yourName" />
<button onClick={this.save}>X</button>
</div>
<h1 className="present-title">25<span>th</span></h1>
</div>
)
},
// Function to render the Blog post
renderBlog() {
return (
<div className="blog-post">
<h1 className="post-title">{this.props.title}</h1>
<p className="excerpt">{this.props.children}</p>
<button onClick={this.close}>CLOSE</button>
</div>
)
},
render() {
return (this.state.open) ? this.renderBlog() : this.renderGift()
}
}) // END Gift Component
// React Christmas Component
var Christmas = React.createClass({
// use propTypes to do some error checking on our Components
propTypes: {
count: function( props, propName ) {
if( typeof props[propName] !== 'number' ) {
return new Error( "The count must be a number" ) // Output an error in the JS console
}
if( props[propName] > 25 ) {
return new Error( "There are not " + props[propName] + " days in Advent. count is too high" )
}
}
},
getInitialState() { // this is the initial state for Gifts (the children of Christmas)
return {
gifts: [
'Transformer',
'Lego City Train set',
'Super Mario Anything',
'New bicycle'
]
}
},
// Note: map iterates through all our notes to display them all
render() {
return (
<div className="christmas">
{this.state.gifts.map((gift, i) => {
return <Gift key={i}>{gift}</Gift>
})}
</div>
)
}
}) // END Christmas Component
// Render our page!
ReactDOM.render(
<Christmas count={25}/>,
document.getElementById('christmas-scene')
)
{ // Dec 1
"font": [
"typeface": "Sonsie One",
"googleFont": 1,
"url": "",
"fontMsg": "Selected for the large, stylized numerals."
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 2
"font": [
"typeface": "Varela Round",
"googleFont": 1,
"url": "",
"fontMsg": 'This is the ONLY Google Font with "Round" in its name.'
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 3
"font": [
"typeface": "Averia Serif Libre",
"googleFont": 1,
"url": "",
"fontMsg": "A great, rounded, old-style, Christmas-y serif font."
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 4
"font": [
"typeface": "Quicksand",
"googleFont": 1,
"url": "",
"fontMsg": "A thin sans-serif with rounded terminals."
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 5
"font": [
"typeface": "Nunito",
"googleFont": 1,
"url": "",
"fontMsg": "A nicer sans-serif with rounded terminals. (Also, the body font on <a href='http://poststatus.com'>Post Status</a>.)"
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 6
"font": [
"typeface": "Volkhov",
"googleFont": 1,
"url": "",
"fontMsg": "A beautiful serif I recently used for the headings on my <a href='http://wordpress.org/themes/jkl'>first WordPress theme on the .org repository</a>."
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 7
"font": [
"typeface": "Source Sans Pro",
"googleFont": 1,
"url": "",
"fontMsg": "The sans-serif font I selected for the body on my <a href='http://wordpress.org/themes/jkl'>first WordPress theme on the .org repository</a>."
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 8
"font": [
"typeface": "Source Code Pro",
"googleFont": 1,
"url": "",
"fontMsg": "The monospace font I selected for &lt;code&gt; tags on my <a href='http://wordpress.org/themes/jkl'>first WordPress theme on the .org repository</a>."
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 9
"font": [
"typeface": "Font Awesome",
"googleFont": 0,
"url": "",
"fontMsg": "Simply, Awesome. Obviously I love Font Awesome - and backed <a href='http://kickstarter.com'>Font Awesome 5.0</a>!"
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 10
"font": [
"typeface": "Merriweather",
"googleFont": 1,
"url": "",
"fontMsg": "This is one of the most beautiful serif fonts I've seen in recent years. I used it in a book I wrote."
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 11
"font": [
"typeface": "Montserrat",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 12
"font": [
"typeface": "Playfair Display",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 13
"font": [
"typeface": "Oswald",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 14
"font": [
"typeface": "Play",
"googleFont": 1,
"url": "",
"fontMsg": "A font I selected for a new logo (MarsX) I designed. (They wanted something a little like SpaceX.)"
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 15
"font": [
"typeface": "Fira Sans",
"googleFont": 1,
"url": "",
"fontMsg": "I selected this font for the body text on MarsX's website."
],
"video": [
"provider": "youtube",
"videoId": "l5Y0lVM-44k",
"videoTitle": 'Jordan Smith sings "The Grinch"',
"videoMsg": "I've always enjoyed this song - and this is a great rendition of it."
]
},
{ // Dec 16
"font": [
"typeface": "Julius Sans One",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 17
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 18
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 19
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 20
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 21
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 22
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 23
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": ""
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 24
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": "Since it's my birthday today..."
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
{ // Dec 25
"font": [
"typeface": "",
"googleFont": 1,
"url": "",
"fontMsg": "The Christmas font!"
],
"video": [
"provider": "youtube",
"videoId": "",
"videoTitle": "",
"videoMsg": ""
]
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.