chore: update lang tags on code blocks
This commit is contained in:
Oliver Eyton-Williams
Mrugesh Mohapatra
parent
120bb342e8
commit
d7dc1acb4a
@ -90,7 +90,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
|
||||
@ -85,7 +85,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
|
||||
@ -7,6 +7,7 @@ forumTopicId: 301084
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id='description'>
|
||||
When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
|
||||
<strong>Note:</strong> This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
|
||||
@ -18,14 +19,17 @@ background: var(--penguin-skin, black);
|
||||
|
||||
This will set background to black if your variable wasn't set.
|
||||
Note that this can be useful for debugging.
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
<section id='instructions'>
|
||||
It looks like there is a problem with the variables supplied to the <code>.penguin-top</code> and <code>.penguin-bottom</code> classes. Rather than fix the typo, add a fallback value of <code>black</code> to the <code>background</code> property of the <code>.penguin-top</code> and <code>.penguin-bottom</code> classes.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -34,12 +38,12 @@ tests:
|
||||
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: The fallback value of <code>black</code> should be used in <code>background</code> property of the <code>penguin-bottom</code> class.
|
||||
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
@ -219,7 +223,7 @@ tests:
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
background: #c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
@ -253,16 +257,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}"
|
||||
```html
|
||||
<style>
|
||||
.penguin-top {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
.penguin-bottom {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -249,8 +249,10 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin {--penguin-belly: white;}"
|
||||
```html
|
||||
<style>
|
||||
.penguin {--penguin-belly: white;}
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -249,8 +249,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin {--penguin-skin: gray;}"
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -249,8 +249,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ":root {--penguin-belly: pink;}"
|
||||
```html
|
||||
<style>:root {--penguin-belly: pink;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -60,7 +60,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
|
||||
@ -104,7 +104,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
|
||||
@ -269,8 +269,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}"
|
||||
```html
|
||||
<style>.penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -277,8 +277,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}"
|
||||
```html
|
||||
<style>@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -251,8 +251,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}"
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -82,7 +82,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: rgb(255, 0, 0);
|
||||
|
||||
@ -56,8 +56,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||||
```html
|
||||
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -60,7 +60,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
@ -82,8 +82,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: 100px 100px 100px;}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: 100px 100px 100px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -74,8 +74,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-gap: 10px 20px;}"
|
||||
```html
|
||||
<style>.container {grid-gap: 10px 20px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -73,8 +73,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-rows: 50px 50px;}"
|
||||
```html
|
||||
<style>.container {grid-template-rows: 50px 50px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -76,8 +76,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {justify-items: center;}"
|
||||
```html
|
||||
<style>.container {justify-items: center;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -76,8 +76,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {align-items: end;}"
|
||||
```html
|
||||
<style>.container {align-items: end;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -83,8 +83,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item2 {justify-self: center;}"
|
||||
```html
|
||||
<style>.item2 {justify-self: center;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -80,8 +80,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item3 {align-self: end;}"
|
||||
```html
|
||||
<style>.item3 {align-self: end;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -81,8 +81,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-column-gap: 20px;}"
|
||||
```html
|
||||
<style>.container {grid-column-gap: 20px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -75,8 +75,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-row-gap: 5px;}"
|
||||
```html
|
||||
<style>.container {grid-row-gap: 5px;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -95,8 +95,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -107,8 +107,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item3 {grid-template-columns: auto 1fr; display: grid;}"
|
||||
```html
|
||||
<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -72,8 +72,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {display: grid;}"
|
||||
```html
|
||||
<style>.container {display: grid;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -82,8 +82,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: repeat(3, minmax(90px, 1fr));}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -91,8 +91,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item5 {grid-area: footer;}"
|
||||
```html
|
||||
<style>.item5 {grid-area: footer;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -96,8 +96,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: repeat(3, 1fr);}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -84,8 +84,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".container {grid-template-columns: 1fr 100px 2fr;}"
|
||||
```html
|
||||
<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -91,8 +91,8 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = ".item5 {grid-area: 3/1/4/4;}"
|
||||
```html
|
||||
<style>.item5 {grid-area: 3/1/4/4;}</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -49,7 +49,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -54,7 +54,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ tests: []
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
|
||||
@ -82,7 +82,7 @@ const connect = ReactRedux.connect;
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
|
||||
const store = Redux.createStore(
|
||||
(state = '__INITIAL__STATE__', action) => state
|
||||
@ -107,7 +107,7 @@ ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const addMessage = (message) => {
|
||||
return {
|
||||
type: 'ADD',
|
||||
|
||||
@ -149,7 +149,7 @@ class AppWrapper extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -161,7 +161,7 @@ ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
// Redux:
|
||||
const ADD = 'ADD';
|
||||
|
||||
|
||||
@ -154,7 +154,7 @@ class AppWrapper extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -166,7 +166,7 @@ ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
// Redux:
|
||||
const ADD = 'ADD';
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const ADD = 'ADD';
|
||||
|
||||
const addMessage = (message) => {
|
||||
|
||||
@ -56,7 +56,7 @@ class DisplayMessages extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<DisplayMessages />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -68,7 +68,7 @@ ReactDOM.render(<DisplayMessages />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class DisplayMessages extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -77,7 +77,7 @@ class DisplayMessages extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<DisplayMessages />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -89,7 +89,7 @@ ReactDOM.render(<DisplayMessages />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class DisplayMessages extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -71,7 +71,7 @@ const addMessage = (message) => {
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const addMessage = (message) => {
|
||||
return {
|
||||
type: 'ADD',
|
||||
|
||||
@ -58,7 +58,7 @@ const state = [];
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const state = [];
|
||||
|
||||
// Change code below this line
|
||||
|
||||
@ -72,7 +72,7 @@ ReactDOM.render(
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
console.log('Now I know React and Redux!');
|
||||
```
|
||||
|
||||
|
||||
@ -137,7 +137,7 @@ class AppWrapper extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -149,7 +149,7 @@ ReactDOM.render(<AppWrapper />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
// Redux:
|
||||
const ADD = 'ADD';
|
||||
|
||||
|
||||
@ -85,7 +85,7 @@ class ResetPassword extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<ResetPassword />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -97,7 +97,7 @@ ReactDOM.render(<ResetPassword />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class ReturnTempPassword extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -56,7 +56,7 @@ const JSX = (
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(JSX, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -68,7 +68,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const JSX = (
|
||||
<div>
|
||||
<h1>This is a block of JSX</h1>
|
||||
|
||||
@ -85,7 +85,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -97,7 +97,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -66,7 +66,7 @@ class Colorful extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<Colorful />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -78,7 +78,7 @@ ReactDOM.render(<Colorful />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const styles = {
|
||||
color: "purple",
|
||||
fontSize: 40,
|
||||
|
||||
@ -76,7 +76,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -88,7 +88,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -82,7 +82,7 @@ class GateKeeper extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<GateKeeper />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -94,7 +94,7 @@ ReactDOM.render(<GateKeeper />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class GateKeeper extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -132,7 +132,7 @@ class Vegetables extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -144,7 +144,7 @@ ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class Fruits extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -76,7 +76,7 @@ tests:
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(JSX, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -88,7 +88,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const JSX = (
|
||||
<div>
|
||||
<h1>Hello JSX!</h1>
|
||||
|
||||
@ -84,7 +84,7 @@ class ParentComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<ParentComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -96,7 +96,7 @@ ReactDOM.render(<ParentComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const ChildComponent = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -152,7 +152,7 @@ class MyForm extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyForm />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@ -164,7 +164,7 @@ ReactDOM.render(<MyForm />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyForm extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -75,7 +75,7 @@ class ControlledInput extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<ControlledInput />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -87,7 +87,7 @@ ReactDOM.render(<ControlledInput />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class ControlledInput extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -76,7 +76,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -88,7 +88,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -51,7 +51,7 @@ const JSX = <div></div>;
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(JSX, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -63,7 +63,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const JSX = <h1>Hello JSX!</h1>;
|
||||
```
|
||||
|
||||
|
||||
@ -73,7 +73,7 @@ class StatefulComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<StatefulComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -85,7 +85,7 @@ ReactDOM.render(<StatefulComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class StatefulComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -67,7 +67,7 @@ const MyComponent = function() {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -79,7 +79,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const MyComponent = function() {
|
||||
// Change code below this line
|
||||
return (
|
||||
|
||||
@ -52,7 +52,7 @@ const JSX = (
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(JSX, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -64,7 +64,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const JSX = (
|
||||
<div className = 'myDiv'>
|
||||
<h1>Add a class to this div</h1>
|
||||
|
||||
@ -74,7 +74,7 @@ function Frameworks() {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<Frameworks />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -86,7 +86,7 @@ ReactDOM.render(<Frameworks />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const frontEndFrameworks = [
|
||||
'React',
|
||||
'Angular',
|
||||
|
||||
@ -62,7 +62,7 @@ class Colorful extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<Colorful />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -74,7 +74,7 @@ ReactDOM.render(<Colorful />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class Colorful extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
|
||||
@ -58,7 +58,7 @@ const JSX = (
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(JSX, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -70,7 +70,7 @@ ReactDOM.render(JSX, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const JSX = (
|
||||
<div>
|
||||
<h2>Welcome to React!</h2> <br />
|
||||
|
||||
@ -126,7 +126,7 @@ class Controller extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<Controller />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@ -138,7 +138,7 @@ ReactDOM.render(<Controller />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class OnlyEvens extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -65,7 +65,7 @@ class ShoppingCart extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -77,7 +77,7 @@ ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const Items = (props) => {
|
||||
return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
|
||||
}
|
||||
|
||||
@ -104,7 +104,7 @@ class RenderInput extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyApp />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -116,7 +116,7 @@ ReactDOM.render(<MyApp />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyApp extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -97,7 +97,7 @@ class ToDo extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<ToDo />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -109,7 +109,7 @@ ReactDOM.render(<ToDo />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const List= (props) => {
|
||||
return <p>{props.tasks.join(', ')}</p>
|
||||
};
|
||||
|
||||
@ -93,7 +93,7 @@ class Calendar extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<Calendar />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -105,7 +105,7 @@ ReactDOM.render(<Calendar />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const CurrentDate = (props) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -80,7 +80,7 @@ class Navbar extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyApp />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -92,7 +92,7 @@ ReactDOM.render(<MyApp />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyApp extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -115,7 +115,7 @@ const Vegetables = () => {
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class TypesOfFood extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -226,7 +226,7 @@ class GameOfChance extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<GameOfChance />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@ -238,7 +238,7 @@ ReactDOM.render(<GameOfChance />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class Results extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -62,7 +62,7 @@ const JSX = (
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const JSX = (
|
||||
<div>
|
||||
<h1>Hello World</h1>
|
||||
|
||||
@ -63,7 +63,7 @@ var ReactDOMServer = { renderToString(x) { return null; } };
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<App />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -75,7 +75,7 @@ ReactDOM.render(<App />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -69,7 +69,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -81,7 +81,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -68,7 +68,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -80,7 +80,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -73,7 +73,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -85,7 +85,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -76,7 +76,7 @@ var PropTypes = {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<CampSite />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -88,7 +88,7 @@ ReactDOM.render(<CampSite />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class CampSite extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -79,7 +79,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -91,7 +91,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -73,7 +73,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -85,7 +85,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -11,7 +11,7 @@ forumTopicId: 301414
|
||||
<section id='description'>
|
||||
Before moving on to dynamic rendering techniques, there's one last way to use built-in JavaScript conditionals to render what you want: the <dfn>ternary operator</dfn>. The ternary operator is often utilized as a shortcut for <code>if/else</code> statements in JavaScript. They're not quite as robust as traditional <code>if/else</code> statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, <code>if/else</code> statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago — when an <code>if/else</code> statement was required, it was always <em>outside</em> the <code>return</code> statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
|
||||
|
||||
```js
|
||||
```jsx
|
||||
condition ? expressionIfTrue : expressionIfFalse;
|
||||
```
|
||||
|
||||
@ -200,7 +200,7 @@ class CheckUserAge extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<CheckUserAge />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@ -212,7 +212,7 @@ ReactDOM.render(<CheckUserAge />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const inputStyle = {
|
||||
width: 235,
|
||||
margin: 5
|
||||
|
||||
@ -205,7 +205,7 @@ class MagicEightBall extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
var possibleAnswers = [
|
||||
'It is certain',
|
||||
'It is decidedly so',
|
||||
@ -239,7 +239,7 @@ ReactDOM.render(<MagicEightBall />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const inputStyle = {
|
||||
width: 235,
|
||||
margin: 5
|
||||
|
||||
@ -157,7 +157,7 @@ class MyComponent extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@ -169,7 +169,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -152,7 +152,7 @@ class MyToDoList extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyToDoList />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@ -164,7 +164,7 @@ ReactDOM.render(<MyToDoList />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const textAreaStyles = {
|
||||
width: 235,
|
||||
margin: 5
|
||||
|
||||
@ -53,7 +53,7 @@ const ShoppingCart = (props) => {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -65,7 +65,7 @@ ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const ShoppingCart = (props) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -84,7 +84,7 @@ var PropTypes = {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -96,7 +96,7 @@ ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const Items = (props) => {
|
||||
return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
|
||||
};
|
||||
|
||||
@ -89,7 +89,7 @@ class TypesOfFood extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -101,7 +101,7 @@ ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
const TypesOfFruit = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -11,7 +11,7 @@ forumTopicId: 301421
|
||||
<section id='description'>
|
||||
Sometimes you might need to know the previous state when updating the state. However, state updates may be asynchronous - this means React may batch multiple <code>setState()</code> calls into a single update. This means you can't rely on the previous value of <code>this.state</code> or <code>this.props</code> when calculating the next value. So, you should not use code like this:
|
||||
|
||||
```js
|
||||
```jsx
|
||||
this.setState({
|
||||
counter: this.state.counter + this.props.increment
|
||||
});
|
||||
@ -19,7 +19,7 @@ this.setState({
|
||||
|
||||
Instead, you should pass <code>setState</code> a function that allows you to access state and props. Using a function with <code>setState</code> guarantees you are working with the most current values of state and props. This means that the above should be rewritten as:
|
||||
|
||||
```js
|
||||
```jsx
|
||||
this.setState((state, props) => ({
|
||||
counter: state.counter + props.increment
|
||||
}));
|
||||
@ -27,7 +27,7 @@ this.setState((state, props) => ({
|
||||
|
||||
You can also use a form without `props` if you need only the `state`:
|
||||
|
||||
```js
|
||||
```jsx
|
||||
this.setState(state => ({
|
||||
counter: state.counter + 1
|
||||
}));
|
||||
@ -129,7 +129,7 @@ class MyComponent extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@ -141,7 +141,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -86,7 +86,7 @@ class MyComponent extends React.Component {
|
||||
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
@ -98,7 +98,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'));
|
||||
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -68,7 +68,7 @@ class MyComponent extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -80,7 +80,7 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -54,7 +54,7 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
// Change code below this line
|
||||
class MyComponent extends React.Component {
|
||||
constructor(props) {
|
||||
|
||||
@ -75,7 +75,7 @@ class Counter extends React.Component {
|
||||
### After Test
|
||||
<div id='jsx-teardown'>
|
||||
|
||||
```js
|
||||
```jsx
|
||||
ReactDOM.render(<Counter />, document.getElementById('root'))
|
||||
```
|
||||
|
||||
@ -87,7 +87,7 @@ ReactDOM.render(<Counter />, document.getElementById('root'))
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
```jsx
|
||||
class Counter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -48,9 +48,9 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='jsx-seed'>
|
||||
<div id='js-seed'>
|
||||
|
||||
```jsx
|
||||
```js
|
||||
const INCREMENT = 'INCREMENT';
|
||||
const DECREMENT = 'DECREMENT';
|
||||
|
||||
|
||||
@ -39,9 +39,9 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='jsx-seed'>
|
||||
<div id='js-seed'>
|
||||
|
||||
```jsx
|
||||
```js
|
||||
const defaultState = {
|
||||
user: 'CamperBot',
|
||||
status: 'offline',
|
||||
|
||||
@ -37,9 +37,9 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='jsx-seed'>
|
||||
<div id='js-seed'>
|
||||
|
||||
```jsx
|
||||
```js
|
||||
const reducer = (state = 5) => {
|
||||
return state;
|
||||
}
|
||||
|
||||
@ -34,9 +34,9 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='jsx-seed'>
|
||||
<div id='js-seed'>
|
||||
|
||||
```jsx
|
||||
```js
|
||||
// Define an action here:
|
||||
|
||||
```
|
||||
|
||||
@ -35,9 +35,9 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='jsx-seed'>
|
||||
<div id='js-seed'>
|
||||
|
||||
```jsx
|
||||
```js
|
||||
const action = {
|
||||
type: 'LOGIN'
|
||||
}
|
||||
|
||||
@ -42,9 +42,9 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='jsx-seed'>
|
||||
<div id='js-seed'>
|
||||
|
||||
```jsx
|
||||
```js
|
||||
const store = Redux.createStore(
|
||||
(state = {login: false}) => state
|
||||
);
|
||||
|
||||
@ -33,9 +33,9 @@ tests:
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='jsx-seed'>
|
||||
<div id='js-seed'>
|
||||
|
||||
```jsx
|
||||
```js
|
||||
const store = Redux.createStore(
|
||||
(state = 5) => state
|
||||
);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user