// sample solution to app.js
import React from 'react';
import ReactDOM from 'react-dom';
class Button extends React.Component {
scream() {
alert('AAAAAAAAHHH!!!!!');
}
render() {
return <button onClick={this.scream}>AAAAAH!</button>;
}
}
ReactDOM.render(
<Button />,
document.getElementById('app')
);
Quotes help make search much faster. Example: "Practice Makes Perfect"
Tuesday, August 14, 2018
Codecademy Sample Solution: Use 'this' in a Component
// sample solution to app.js
import React from 'react';
import ReactDOM from 'react-dom';
class MyName extends React.Component {
// name property goes here:
get name() {
return 'Nate';
}
render() {
return <h1>My name is {this.name}.</h1>;
}
}
ReactDOM.render(<MyName />, document.getElementById('app'));
import React from 'react';
import ReactDOM from 'react-dom';
class MyName extends React.Component {
// name property goes here:
get name() {
return 'Nate';
}
render() {
return <h1>My name is {this.name}.</h1>;
}
}
ReactDOM.render(<MyName />, document.getElementById('app'));
Codecademy Sample Solution: Use a Conditional in a Render Function
// sample solution to app.js
import React from 'react';
import ReactDOM from 'react-dom';
const fiftyFifty = Math.random() < 0.5;
// New component class starts here:
class TonightsPlan extends React.Component{
render() {
let task;
if (fiftyFifty) {
task = 'out'
} else {
task = 'to bed'
}
return <h1>Tonight I'm going {task} WOOO</h1>;
}
}
ReactDOM.render(
<TonightsPlan />,
document.getElementById('app')
);
import React from 'react';
import ReactDOM from 'react-dom';
const fiftyFifty = Math.random() < 0.5;
// New component class starts here:
class TonightsPlan extends React.Component{
render() {
let task;
if (fiftyFifty) {
task = 'out'
} else {
task = 'to bed'
}
return <h1>Tonight I'm going {task} WOOO</h1>;
}
}
ReactDOM.render(
<TonightsPlan />,
document.getElementById('app')
);
Codecademy Sample Solution: Put Logic in a Render Function
// sample solution to app.js
import React from 'react';
import ReactDOM from 'react-dom';
const friends = [
{
title: "Yummmmmmm",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyweirdo.jpg"
},
{
title: "Hey Guys! Wait Up!",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-earnestfrog.jpg"
},
{
title: "Yikes",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-alpaca.jpg"
}
];
// New component class starts here:
class Friend extends React.Component{
render() {
var friend = friends[0];
return (
<div>
<h1>{friend.title}</h1>
<img src={friend.src} />
</div>
);
}
}
ReactDOM.render(
<Friend />,
document.getElementById('app')
);
import React from 'react';
import ReactDOM from 'react-dom';
const friends = [
{
title: "Yummmmmmm",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyweirdo.jpg"
},
{
title: "Hey Guys! Wait Up!",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-earnestfrog.jpg"
},
{
title: "Yikes",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-alpaca.jpg"
}
];
// New component class starts here:
class Friend extends React.Component{
render() {
var friend = friends[0];
return (
<div>
<h1>{friend.title}</h1>
<img src={friend.src} />
</div>
);
}
}
ReactDOM.render(
<Friend />,
document.getElementById('app')
);
Codecademy Sample Solution: Use a Variable Attribute in a Component
// sample solution for app.js
import React from 'react';
import ReactDOM from 'react-dom';
const owl = {
title: 'Excellent Owl',
src: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg'
};
class Owl extends React.Component {
render() {
return (
<div>
<h1>{owl.title}</h1>
<img
src={owl.src}
alt={owl.title} />
</div>
);
}
}
ReactDOM.render(
<Owl />,
document.getElementById('app')
);
import React from 'react';
import ReactDOM from 'react-dom';
const owl = {
title: 'Excellent Owl',
src: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg'
};
class Owl extends React.Component {
render() {
return (
<div>
<h1>{owl.title}</h1>
<img
src={owl.src}
alt={owl.title} />
</div>
);
}
}
ReactDOM.render(
<Owl />,
document.getElementById('app')
);
Codecademy Sample Solution: Use Multiline JSX in a Component
//sample solution for app.js
import React from 'react';
import ReactDOM from 'react-dom';
class QuoteMaker extends React.Component {
render() {
return (
<blockquote>
<p>
What is important now is to recover our senses.
</p>
<cite>
<a target="_blank"
href="https://en.wikipedia.org/wiki/Susan_Sontag">
Susan Sontag
</a>
</cite>
</blockquote>
);
}
};
ReactDOM.render(
<QuoteMaker />,
document.getElementById('app')
);
import React from 'react';
import ReactDOM from 'react-dom';
class QuoteMaker extends React.Component {
render() {
return (
<blockquote>
<p>
What is important now is to recover our senses.
</p>
<cite>
<a target="_blank"
href="https://en.wikipedia.org/wiki/Susan_Sontag">
Susan Sontag
</a>
</cite>
</blockquote>
);
}
};
ReactDOM.render(
<QuoteMaker />,
document.getElementById('app')
);
Subscribe to:
Posts (Atom)
This is an example of scrolling text using Javascript.
Popular Posts
-
//Sample Solution const gameState = {} function preload() { this.load.image('codey', 'https://s3.amazonaws.com/codecademy-...
-
//Sample solution to main.js var red = [0, 100, 63]; var orange = [40, 100, 60]; var green = [75, 100, 40]; var blue = [196, 77, 55]; ...
-
<!-- Sample solution to index.html --> <!DOCTYPE html> <html> <body> <div class="nav"> ...
-
$(document).ready(function(){ $("button").on("click", function(){ var message = $("<span>Call 1-555-...
-
$VERBOSE = nil # We'll explain this at the end of the lesson. require 'prime' # This is a module. We'll cover these s...
-
//sample solution function isMAC48Address(inputString) { if(inputString.length!=17){ return false; } var regex = /^([0-9A...
-
Sample Solution: //document.write( "Ryan" ); document.write( " The length of Ryan is "); document.write( "Ryan...
-
function isSolved(sudoku) { // A sudoku will be solved if all its rows, columns and blocks are correct. // Use a combination of t...
-
Question: How does frequency affect the impedance and admittance of an inductor? Answer: The impedance Z of an inductor is given as jw...
-
// Sudoku Solver Project function isPossibleRow(sudoku, row, number) { // This isPossibleRow() function returns true if the 'numbe...