gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: consolidated comments for use with translation dictionary (#39578)

Browse Source
This commit is contained in:
Randell Dawson
2020-09-15 09:53:25 -07:00
committed by GitHub
parent 104f359902
commit a2f4c8d0e1
87 changed files with 289 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md
View File

@@ -51,9 +51,9 @@ class ReturnTempPassword extends React.Component {
render() {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<p>Your temporary password is: <strong></strong></p>
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}
@@ -70,9 +70,9 @@ class ResetPassword extends React.Component {
<h2>Reset Password</h2>
<h3>We've generated a new temporary password for you.</h3>
<h3>Please reset this password from your account settings ASAP.</h3>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}
@@ -123,9 +123,9 @@ class ResetPassword extends React.Component {
<h2>Reset Password</h2>
<h3>We've generated a new temporary password for you.</h3>
<h3>Please reset this password from your account settings ASAP.</h3>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<ReturnTempPassword tempPassword="serrPbqrPnzc" />
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

12
curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md
View File

@@ -51,14 +51,14 @@ class MyComponent extends React.Component {
this.handleEnter = this.handleEnter.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
// change code below this line
// Change code below this line
componentDidMount() {
}
componentWillUnmount() {
}
// change code above this line
// Change code above this line
handleEnter() {
this.setState((state) => ({
message: state.message + 'You pressed the enter key! '
@@ -107,14 +107,14 @@ class MyComponent extends React.Component {
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleEnter = this.handleEnter.bind(this); }
componentDidMount() {
// change code below this line
// Change code below this line
document.addEventListener('keydown', this.handleKeyPress);
// change code above this line
// Change code above this line
}
componentWillUnmount() {
// change code below this line
// Change code below this line
document.removeEventListener('keydown', this.handleKeyPress);
// change code above this line
// Change code above this line
}
handleEnter() {
this.setState((state) => ({

16
curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md
View File

@@ -14,7 +14,7 @@ All property value length units (like <code>height</code>, <code>width</code>, a
## Instructions
<section id='instructions'>
If you have a large set of styles, you can assign a style <code>object</code> to a constant to keep your code organized. Uncomment the <code>styles</code> constant and declare an <code>object</code> with three style properties and their values. Give the <code>div</code> a color of <code>"purple"</code>, a font-size of <code>40</code>, and a border of <code>"2px solid purple"</code>. Then set the <code>style</code> attribute equal to the <code>styles</code> constant.
If you have a large set of styles, you can assign a style <code>object</code> to a constant to keep your code organized. Initialize a <code>styles</code> constant and assign an <code>object</code> with three style properties and their values to it. Give the <code>div</code> a color of <code>"purple"</code>, a font-size of <code>40</code>, and a border of <code>"2px solid purple"</code>. Then set the <code>style</code> attribute equal to the <code>styles</code> constant.
</section>
## Tests
@@ -46,15 +46,15 @@ tests:
```jsx
// const styles =
// change code above this line
// Change code above this line
class Colorful extends React.Component {
render() {
// change code below this line
// Change code below this line
return (
<div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
);
// change code above this line
// Change code above this line
}
};
@@ -84,14 +84,14 @@ const styles = {
fontSize: 40,
border: "2px solid purple"
};
// change code above this line
// Change code above this line
class Colorful extends React.Component {
render() {
// change code below this line
// Change code below this line
return (
<div style={styles}>Style Me!</div>
// change code above this line
);
// Change code above this line
}
};

8
curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md
View File

@@ -48,9 +48,9 @@ class MyComponent extends React.Component {
this.state = {
text: "Hello"
};
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
handleClick() {
this.setState({
@@ -60,9 +60,9 @@ class MyComponent extends React.Component {
render() {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<button>Click Me</button>
{ /* change code above this line */ }
{ /* Change code above this line */ }
<h1>{this.state.text}</h1>
</div>
);

4
curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md
View File

@@ -59,9 +59,9 @@ class GateKeeper extends React.Component {
let inputStyle = {
border: '1px solid black'
};
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
return (
<div>
<h3>Don't Type Too Much:</h3>

16
curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md
View File

@@ -49,9 +49,9 @@ class Fruits extends React.Component {
return (
<div>
<h2>Fruits:</h2>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}
@@ -65,9 +65,9 @@ class TypesOfFood extends React.Component {
return (
<div>
<h1>Types of Food:</h1>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
<Vegetables />
</div>
);
@@ -153,10 +153,10 @@ class Fruits extends React.Component {
return (
<div>
<h2>Fruits:</h2>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<NonCitrus />
<Citrus />
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
)
}
@@ -170,9 +170,9 @@ class TypesOfFood extends React.Component {
return (
<div>
<h1>Types of Food:</h1>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<Fruits />
{ /* change code above this line */ }
{ /* Change code above this line */ }
<Vegetables />
</div>
);

2
curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md
View File

@@ -66,7 +66,7 @@ tests:
<div id='jsx-seed'>
```jsx
// write your code here
```

8
curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md
View File

@@ -68,10 +68,10 @@ class ParentComponent extends React.Component {
return (
<div>
<h1>I am the parent</h1>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}
@@ -113,9 +113,9 @@ class ParentComponent extends React.Component {
return (
<div>
<h1>I am the parent</h1>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<ChildComponent />
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

12
curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md
View File

@@ -124,22 +124,22 @@ class MyForm extends React.Component {
});
}
handleSubmit(event) {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
{/* change code below this line */}
{/* Change code below this line */}
{/* change code above this line */}
{/* Change code above this line */}
<button type='submit'>Submit!</button>
</form>
{/* change code below this line */}
{/* Change code below this line */}
{/* change code above this line */}
{/* Change code above this line */}
</div>
);
}

12
curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md
View File

@@ -48,19 +48,19 @@ class ControlledInput extends React.Component {
this.state = {
input: ''
};
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
render() {
return (
<div>
{ /* change code below this line */}
{ /* Change code below this line */}
{ /* change code above this line */}
{ /* Change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>

8
curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md
View File

@@ -61,11 +61,11 @@ class MyComponent extends React.Component {
super(props);
}
render() {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
};
```
@@ -94,13 +94,13 @@ class MyComponent extends React.Component {
super(props);
}
render() {
// change code below this line
// Change code below this line
return (
<div>
<h1>Hello React!</h1>
</div>
);
// change code above this line
// Change code above this line
}
};
```

3
curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md
View File

@@ -53,8 +53,9 @@ tests:
class StatefulComponent extends React.Component {
constructor(props) {
super(props);
// initialize state here
// Only change code below this line
// Only change code above this line
}
render() {
return (

8
curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md
View File

@@ -53,11 +53,11 @@ tests:
```jsx
const MyComponent = function() {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
```
@@ -81,13 +81,13 @@ ReactDOM.render(<MyComponent />, document.getElementById('root'))
```js
const MyComponent = function() {
// change code below this line
// Change code below this line
return (
<div>
Demo Solution
</div>
);
// change code above this line
// Change code above this line
}
```

2
curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md
View File

@@ -56,7 +56,7 @@ const frontEndFrameworks = [
];
function Frameworks() {
const renderFrameworks = null; // change code here
const renderFrameworks = null; // Change this line
return (
<div>
<h1>Popular Front End JavaScript Frameworks</h1>

4
curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md
View File

@@ -44,11 +44,9 @@ tests:
```jsx
const JSX = (
<div>
{/* remove comment and change code below this line
<h2>Welcome to React!</h2> <br >
<p>Be sure to close all tags!</p>
<hr >
remove comment and change code above this line */}
</div>
);
@@ -75,11 +73,9 @@ ReactDOM.render(JSX, document.getElementById('root'))
```js
const JSX = (
<div>
{/* change code below this line */}
<h2>Welcome to React!</h2> <br />
<p>Be sure to close all tags!</p>
<hr />
{/* change code above this line */}
</div>
);
```

8
curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md
View File

@@ -84,9 +84,9 @@ class OnlyEvens extends React.Component {
}
shouldComponentUpdate(nextProps, nextState) {
console.log('Should I update?');
// change code below this line
// Change code below this line
return true;
// change code above this line
// Change code above this line
}
componentDidUpdate() {
console.log('Component re-rendered.');
@@ -145,9 +145,9 @@ class OnlyEvens extends React.Component {
}
shouldComponentUpdate(nextProps, nextState) {
console.log('Should I update?');
// change code below this line
// Change code below this line
return nextProps.value % 2 === 0;
// change code above this line
// Change code above this line
}
componentDidUpdate() {
console.log('Component re-rendered.');

8
curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md
View File

@@ -52,9 +52,9 @@ class ShoppingCart extends React.Component {
super(props);
}
render() {
{ /* change code below this line */ }
{ /* Change code below this line */ }
return <Items />
{ /* change code above this line */ }
{ /* Change code above this line */ }
}
};
```
@@ -91,9 +91,9 @@ class ShoppingCart extends React.Component {
super(props);
}
render() {
{ /* change code below this line */ }
{ /* Change code below this line */ }
return <Items quantity = {10} />
{ /* change code above this line */ }
{ /* Change code above this line */ }
}
};
```

4
curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md
View File

@@ -59,9 +59,9 @@ class MyApp extends React.Component {
render() {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

8
curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md
View File

@@ -66,9 +66,9 @@ tests:
```jsx
const List = (props) => {
{ /* change code below this line */ }
{ /* Change code below this line */ }
return <p>{}</p>
{ /* change code above this line */ }
{ /* Change code above this line */ }
};
class ToDo extends React.Component {
@@ -80,11 +80,11 @@ class ToDo extends React.Component {
<div>
<h1>To Do Lists</h1>
<h2>Today</h2>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<List/>
<h2>Tomorrow</h2>
<List/>
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

16
curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md
View File

@@ -63,9 +63,9 @@ tests:
const CurrentDate = (props) => {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<p>The current date is: </p>
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
};
@@ -78,9 +78,9 @@ class Calendar extends React.Component {
return (
<div>
<h3>What date is it?</h3>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<CurrentDate />
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}
@@ -109,9 +109,9 @@ ReactDOM.render(<Calendar />, document.getElementById('root'))
const CurrentDate = (props) => {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<p>The current date is: {props.date}</p>
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
};
@@ -124,9 +124,9 @@ class Calendar extends React.Component {
return (
<div>
<h3>What date is it?</h3>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<CurrentDate date={Date()} />
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

10
curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md
View File

@@ -15,7 +15,7 @@ This pattern illustrates some important paradigms in React. The first is <em>uni
## Instructions
<section id='instructions'>
The <code>MyApp</code> component is stateful and renders a <code>Navbar</code> component as a child. Pass the <code>name</code> property in its <code>state</code> down to the child component, then show the <code>name</code> in the <code>h1</code> tag that's part of the <code>Navbar</code> render method.
The <code>MyApp</code> component is stateful and renders a <code>Navbar</code> component as a child. Pass the <code>name</code> property in its <code>state</code> down to the child component, then show the <code>name</code> in the <code>h1</code> tag that's part of the <code>Navbar</code> render method. <code>name</code> should appear after the text <code>Hello, my name is: </code>.
</section>
## Tests
@@ -50,7 +50,9 @@ class MyApp extends React.Component {
render() {
return (
<div>
<Navbar /* your code here */ />
{/* Change code below this line */}
<Navbar />
{/* Change code above this line */}
</div>
);
}
@@ -63,7 +65,9 @@ class Navbar extends React.Component {
render() {
return (
<div>
<h1>Hello, my name is: {/* your code here */} </h1>
{/* Change code below this line */}
<h1>Hello, my name is: </h1>
{/* Change code above this line */}
</div>
);
}

12
curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md
View File

@@ -51,15 +51,15 @@ class TypesOfFood extends React.Component {
return (
<div>
<h1>Types of Food:</h1>
{/* change code below this line */}
{/* Change code below this line */}
{/* change code above this line */}
{/* Change code above this line */}
</div>
);
}
};
// change code below this line
// Change code below this line
```
@@ -124,16 +124,16 @@ class TypesOfFood extends React.Component {
return (
<div>
<h1>Types of Food:</h1>
{/* change code below this line */}
{/* Change code below this line */}
<Fruits />
<Vegetables />
{/* change code above this line */}
{/* Change code above this line */}
</div>
);
}
};
// change code below this line
// Change code below this line
ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));
```

14
curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md
View File

@@ -18,7 +18,7 @@ In this challenge, you'll set up a child component to make rendering decisions b
<section id='instructions'>
The code editor has two components that are partially defined for you: a parent called <code>GameOfChance</code>, and a child called <code>Results</code>. They are used to create a simple game where the user presses a button to see if they win or lose.
First, you'll need a simple expression that randomly returns a different value every time it is run. You can use <code>Math.random()</code>. This method returns a value between <code>0</code> (inclusive) and <code>1</code> (exclusive) each time it is called. So for 50/50 odds, use <code>Math.random() >= .5</code> in your expression. Statistically speaking, this expression will return <code>true</code> 50% of the time, and <code>false</code> the other 50%. On line 30, replace the comment with this expression to complete the variable declaration.
Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the <code>Results</code> component as a child of <code>GameOfChance</code>, and pass in <code>expression</code> as a prop called <code>fiftyFifty</code>. In the <code>Results</code> component, write a ternary expression to render the text <code>"You Win!"</code> or <code>"You Lose!"</code> based on the <code>fiftyFifty</code> prop that's being passed in from <code>GameOfChance</code>. Finally, make sure the <code>handleClick()</code> method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.
Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the <code>Results</code> component as a child of <code>GameOfChance</code>, and pass in <code>expression</code> as a prop called <code>fiftyFifty</code>. In the <code>Results</code> component, write a ternary expression to render the <code>h1</code> element with the text <code>"You Win!"</code> or <code>"You Lose!"</code> based on the <code>fiftyFifty</code> prop that's being passed in from <code>GameOfChance</code>. Finally, make sure the <code>handleClick()</code> method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.
</section>
## Tests
@@ -186,7 +186,9 @@ class Results extends React.Component {
super(props);
}
render() {
return <h1>{/* change code here */}</h1>;
{/* Change code below this line */}
return <h1></h1>;
{/* Change code above this line */}
}
}
@@ -200,17 +202,17 @@ class GameOfChance extends React.Component {
}
handleClick() {
this.setState({
counter: 0 // change code here
counter: 0 // Change this line
});
}
render() {
const expression = null; // change code here
const expression = null; // Change this line
return (
<div>
<button onClick={this.handleClick}>Play Again</button>
{/* change code below this line */}
{/* Change code below this line */}
{/* change code above this line */}
{/* Change code above this line */}
<p>{'Turn: ' + this.state.counter}</p>
</div>
);

4
curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md
View File

@@ -48,7 +48,7 @@ const JSX = (
<p>Lets render this to the DOM</p>
</div>
);
// change code below this line
// Change code below this line
```
@@ -69,7 +69,7 @@ const JSX = (
<p>Lets render this to the DOM</p>
</div>
);
// change code below this line
// Change code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'));
```

4
curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md
View File

@@ -45,7 +45,7 @@ class App extends React.Component {
}
};
// change code below this line
// Change code below this line
```
@@ -85,7 +85,7 @@ class App extends React.Component {
}
};
// change code below this line
// Change code below this line
ReactDOMServer.renderToString(<App/>);
```

16
curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md
View File

@@ -49,14 +49,14 @@ class MyComponent extends React.Component {
}
}
render() {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}
@@ -90,14 +90,14 @@ class MyComponent extends React.Component {
}
}
render() {
// change code below this line
// Change code below this line
const name = this.state.name;
// change code above this line
// Change code above this line
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<h1>{name}</h1>
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

8
curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md
View File

@@ -53,9 +53,9 @@ class MyComponent extends React.Component {
render() {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}
@@ -91,9 +91,9 @@ class MyComponent extends React.Component {
render() {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<h1>{this.state.name}</h1>
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

4
curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md
View File

@@ -55,7 +55,7 @@ class MyComponent extends React.Component {
}));
}
render() {
// change code below this line
// Change code below this line
return (
<div>
@@ -100,7 +100,7 @@ class MyComponent extends React.Component {
}));
}
render() {
// change code below this line
// Change code below this line
if (this.state.display) {
return (
<div>

4
curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md
View File

@@ -56,7 +56,7 @@ class CampSite extends React.Component {
);
}
};
// change code below this line
// Change code below this line
```
@@ -101,7 +101,7 @@ class CampSite extends React.Component {
);
}
};
// change code below this line
// Change code below this line
const Camper = (props) => {
return (

8
curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md
View File

@@ -58,9 +58,9 @@ class MyComponent extends React.Component {
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
render() {
return (
@@ -101,11 +101,11 @@ class MyComponent extends React.Component {
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// change code below this line
// Change code below this line
this.setState({
name: 'React Rocks!'
});
// change code above this line
// Change code above this line
}
render() {
return (

4
curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md
View File

@@ -56,7 +56,7 @@ class MyComponent extends React.Component {
}));
}
render() {
// change code below this line
// Change code below this line
return (
<div>
<button onClick={this.toggleDisplay}>Toggle Display</button>
@@ -100,7 +100,7 @@ class MyComponent extends React.Component {
}));
}
render() {
// change code below this line
// Change code below this line
return (
<div>
<button onClick={this.toggleDisplay}>Toggle Display</button>

8
curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md
View File

@@ -154,9 +154,9 @@ const inputStyle = {
class CheckUserAge extends React.Component {
constructor(props) {
super(props);
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
this.submit = this.submit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
@@ -185,7 +185,9 @@ class CheckUserAge extends React.Component {
onChange={this.handleChange}
/>
<br />
{/* change code here */}
{/* Change code below this line */}
{/* Change code above this line */}
</div>
);
}

6
curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md
View File

@@ -175,7 +175,7 @@ class MagicEightBall extends React.Component {
'Outlook not so good',
'Very doubtful'
];
const answer = 'change me!'; // << change code here
const answer = 'change me!'; // Change this line
return (
<div>
<input
@@ -189,9 +189,9 @@ class MagicEightBall extends React.Component {
<br />
<h3>Answer:</h3>
<p>
{/* change code below this line */}
{/* Change code below this line */}
{/* change code above this line */}
{/* Change code above this line */}
</p>
</div>
);

4
curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md
View File

@@ -139,8 +139,8 @@ class MyComponent extends React.Component {
};
}
render() {
const usersOnline = null; // change code here
const renderOnline = null; // change code here
const usersOnline = null; // Change this line
const renderOnline = null; // Change this line
return (
<div>
<h1>Current Online Users:</h1>

6
curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md
View File

@@ -109,9 +109,9 @@ const textAreaStyles = {
class MyToDoList extends React.Component {
constructor(props) {
super(props);
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
@@ -127,7 +127,7 @@ class MyToDoList extends React.Component {
});
}
render() {
const items = null; // change code here
const items = null; // Change this line
return (
<div>
<textarea

4
curriculum/challenges/english/03-front-end-libraries/react/use-default-props.english.md
View File

@@ -43,7 +43,7 @@ const ShoppingCart = (props) => {
</div>
)
};
// change code below this line
// Change code below this line
```
@@ -74,7 +74,7 @@ const ShoppingCart = (props) => {
)
};
// change code below this line
// Change code below this line
ShoppingCart.defaultProps = {
items: 0
}

8
curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.english.md
View File

@@ -49,9 +49,9 @@ const Items = (props) => {
return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
Items.defaultProps = {
quantity: 0
@@ -101,11 +101,11 @@ const Items = (props) => {
return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};
// change code below this line
// Change code below this line
Items.propTypes = {
quantity: PropTypes.number.isRequired
};
// change code above this line
// Change code above this line
Items.defaultProps = {
quantity: 0

16
curriculum/challenges/english/03-front-end-libraries/react/use-react-to-render-nested-components.english.md
View File

@@ -58,9 +58,9 @@ const TypesOfFruit = () => {
const Fruits = () => {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
};
@@ -74,9 +74,9 @@ class TypesOfFood extends React.Component {
return (
<div>
<h1>Types of Food:</h1>
{ /* change code below this line */ }
{ /* Change code below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}
@@ -119,9 +119,9 @@ const TypesOfFruit = () => {
const Fruits = () => {
return (
<div>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<TypesOfFruit />
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
};
@@ -135,9 +135,9 @@ class TypesOfFood extends React.Component {
return (
<div>
<h1>Types of Food:</h1>
{ /* change code below this line */ }
{ /* Change code below this line */ }
<Fruits />
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

8
curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.english.md
View File

@@ -97,13 +97,13 @@ class MyComponent extends React.Component {
this.state = {
visibility: false
};
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
render() {
if (this.state.visibility) {
return (

6
curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.english.md
View File

@@ -16,7 +16,7 @@ The best practice with React is to place API calls or any calls to your server i
## Instructions
<section id='instructions'>
There is a mock API call in <code>componentDidMount()</code>. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of <code>activeUsers</code> in the <code>h1</code>. Watch what happens in the preview, and feel free to change the timeout to see the different effects.
There is a mock API call in <code>componentDidMount()</code>. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of <code>activeUsers</code> in the <code>h1</code> after the text <code>Active Users: </code>. Watch what happens in the preview, and feel free to change the timeout to see the different effects.
</section>
## Tests
@@ -71,7 +71,9 @@ class MyComponent extends React.Component {
render() {
return (
<div>
<h1>Active Users: {/* change code here */}</h1>
{/* Change code below this line */}
<h1>Active Users: </h1>
{/* Change code below this line */}
</div>
);
}

8
curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md
View File

@@ -52,9 +52,9 @@ class MyComponent extends React.Component {
super(props);
}
componentWillMount() {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
render() {
return <div />
@@ -86,9 +86,9 @@ class MyComponent extends React.Component {
super(props);
}
componentWillMount() {
// change code below this line
// Change code below this line
console.log('Component is mounting...');
// change code above this line
// Change code above this line
}
render() {
return <div />

4
curriculum/challenges/english/03-front-end-libraries/react/write-a-react-component-from-scratch.english.md
View File

@@ -40,7 +40,7 @@ tests:
<div id='jsx-seed'>
```jsx
// change code below this line
// Change code below this line
```
@@ -55,7 +55,7 @@ tests:
```js
// change code below this line
// Change code below this line
class MyComponent extends React.Component {
constructor(props) {
super(props);

8
curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.english.md
View File

@@ -49,13 +49,13 @@ class Counter extends React.Component {
this.state = {
count: 0
};
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
}
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
render() {
return (
<div>