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

6
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md
View File

@ -10,7 +10,7 @@ forumTopicId: 18347
When we start using jQuery, we will modify HTML elements without needing to actually change them in HTML.
Let's make sure that everyone knows they shouldn't actually modify any of this code directly.
Remember that you can start a comment with <code>&#60;!--</code> and end a comment with <code>--&#62;</code>
Add a comment at the top of your HTML that says <code>Only change code above this line.</code>
Add a comment at the top of your HTML that says <code>Code below this line should not be changed</code>
</section>
## Instructions
@ -25,7 +25,7 @@ Add a comment at the top of your HTML that says <code>Only change code above thi
tests:
- text: You should start a comment with <code>&#60;!--</code> at the top of your HTML.
testString: assert(code.match(/^\s*<!--/));
- text: Your comment should have the text <code>Only change code above this line</code>.
- text: Your comment should have the text <code>Code below this line should not be changed</code>.
testString: assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
- text: You should close your comment with <code>--&#62;</code>.
testString: assert(code.match(/-->.*\n+.+/g));
@ -75,7 +75,7 @@ tests:
<section id='solution'>
```html
<!-- Only change code above this line. -->
<!-- Code below this line should not be changed -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">

2
curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.english.md
View File

@ -55,7 +55,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md
View File

@ -53,7 +53,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -98,7 +98,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">

4
curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md
View File

@ -52,7 +52,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -97,7 +97,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md
View File

@ -53,7 +53,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -94,7 +94,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.english.md
View File

@ -49,7 +49,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -92,7 +92,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.english.md
View File

@ -43,7 +43,7 @@ tests:
<div id='html-seed'>
```html
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -82,7 +82,7 @@ tests:
$(document).ready(function() {
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/remove-an-element-using-jquery.english.md
View File

@ -45,7 +45,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -88,7 +88,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.english.md
View File

@ -51,7 +51,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -95,7 +95,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.english.md
View File

@ -59,7 +59,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -107,7 +107,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.english.md
View File

@ -49,7 +49,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -91,7 +91,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.english.md
View File

@ -52,7 +52,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -95,7 +95,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.english.md
View File

@ -58,7 +58,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -108,7 +108,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.english.md
View File

@ -49,7 +49,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -90,7 +90,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.english.md
View File

@ -52,7 +52,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -99,7 +99,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.english.md
View File

@ -55,7 +55,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<body>
<div class="container-fluid">
@ -103,7 +103,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<body>
<div class="container-fluid">

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.english.md
View File

@ -57,7 +57,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -100,7 +100,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md
View File

@ -50,7 +50,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -94,7 +94,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.english.md
View File

@ -54,7 +54,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
@ -105,7 +105,7 @@ tests:
});
</script>
<!-- Only change code above this line. -->
<!-- Only change code above this line -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>

4
curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.english.md
View File

@ -72,7 +72,7 @@ class Presentational extends React.Component {
};
const connect = ReactRedux.connect;
// change code below this line
// Change code below this line
```
@ -139,7 +139,7 @@ class Presentational extends React.Component {
};
const connect = ReactRedux.connect;
// change code below this line
// Change code below this line
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);

6
curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.english.md
View File

@ -129,7 +129,7 @@ const mapDispatchToProps = (dispatch) => {
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
// define the Container component here:
// Define the Container component here:
class AppWrapper extends React.Component {
@ -137,7 +137,7 @@ class AppWrapper extends React.Component {
super(props);
}
render() {
// complete the return statement:
// Complete the return statement:
return (null);
}
};
@ -248,7 +248,6 @@ const mapDispatchToProps = (dispatch) => {
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
// define the Container component here:
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
class AppWrapper extends React.Component {
@ -256,7 +255,6 @@ class AppWrapper extends React.Component {
super(props);
}
render() {
// complete the return statement:
return (
<Provider store={store}>
<Container/>

2
curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.english.md
View File

@ -45,7 +45,7 @@ tests:
<div id='jsx-seed'>
```jsx
// define ADD, addMessage(), messageReducer(), and store here:
// Define ADD, addMessage(), messageReducer(), and store here:
```

4
curriculum/challenges/english/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.english.md
View File

@ -41,9 +41,9 @@ tests:
```jsx
class DisplayMessages extends React.Component {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
render() {
return <div />
}

6
curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md
View File

@ -56,15 +56,15 @@ class DisplayMessages extends React.Component {
messages: []
}
}
// add handleChange() and submitMessage() methods here
// Add handleChange() and submitMessage() methods here
render() {
return (
<div>
<h2>Type in a new Message:</h2>
{ /* render an input, button, and ul here */ }
{ /* Render an input, button, and ul below this line */ }
{ /* change code above this line */ }
{ /* Change code above this line */ }
</div>
);
}

4
curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md
View File

@ -57,7 +57,7 @@ const addMessage = (message) => {
}
};
// change code below this line
// Change code below this line
```
@ -79,7 +79,7 @@ const addMessage = (message) => {
}
};
// change code below this line
// Change code below this line
const mapDispatchToProps = (dispatch) => {
return {

4
curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-state-to-props.english.md
View File

@ -44,7 +44,7 @@ tests:
```jsx
const state = [];
// change code below this line
// Change code below this line
```
@ -61,7 +61,7 @@ const state = [];
```js
const state = [];
// change code below this line
// Change code below this line
const mapStateToProps = (state) => {
return {

38
curriculum/challenges/english/03-front-end-libraries/react-and-redux/moving-forward-from-here.english.md
View File

@ -37,28 +37,28 @@ tests:
<div id='jsx-seed'>
```jsx
// import React from 'react'
// import ReactDOM from 'react-dom'
// import { Provider, connect } from 'react-redux'
// import { createStore, combineReducers, applyMiddleware } from 'redux'
// import thunk from 'redux-thunk'
/*
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, connect } from 'react-redux'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
// import rootReducer from './redux/reducers'
// import App from './components/App'
import rootReducer from './redux/reducers'
import App from './components/App'
// const store = createStore(
// rootReducer,
// applyMiddleware(thunk)
// );
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
// ReactDOM.render(
// <Provider store={store}>
// <App/>
// </Provider>,
// document.getElementById('root')
// );
// change code below this line
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
*/
```

16
curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md
View File

@ -49,7 +49,7 @@ tests:
<div id='jsx-seed'>
```jsx
// Redux Code:
// Redux:
const ADD = 'ADD';
const addMessage = (message) => {
@ -75,7 +75,7 @@ const messageReducer = (state = [], action) => {
const store = Redux.createStore(messageReducer);
// React Code:
// React:
class DisplayMessages extends React.Component {
constructor(props) {
@ -125,9 +125,9 @@ class DisplayMessages extends React.Component {
const Provider = ReactRedux.Provider;
class AppWrapper extends React.Component {
// render the Provider here
// Render the Provider below this line
// change code above this line
// Change code above this line
};
```
@ -150,7 +150,7 @@ ReactDOM.render(<AppWrapper />, document.getElementById('root'))
```js
// Redux Code:
// Redux:
const ADD = 'ADD';
const addMessage = (message) => {
@ -174,7 +174,7 @@ const messageReducer = (state = [], action) => {
const store = Redux.createStore(messageReducer);
// React Code:
// React:
class DisplayMessages extends React.Component {
constructor(props) {
@ -224,7 +224,7 @@ class DisplayMessages extends React.Component {
const Provider = ReactRedux.Provider;
class AppWrapper extends React.Component {
// change code below this line
// Change code below this line
render() {
return (
<Provider store = {store}>
@ -232,7 +232,7 @@ class AppWrapper extends React.Component {
</Provider>
);
}
// change code above this line
// Change code above this line
};
```

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>

2
curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md
View File

@ -83,7 +83,7 @@ const authReducer = (state = {authenticated: false}, action) => {
}
};
const rootReducer = // define the root reducer here
const rootReducer = // Define the root reducer here
const store = Redux.createStore(rootReducer);

2
curriculum/challenges/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.english.md
View File

@ -52,7 +52,7 @@ const defaultState = {
const immutableReducer = (state = defaultState, action) => {
switch(action.type) {
case 'ONLINE':
// don't mutate state here or the tests will fail
// Don't mutate state here or the tests will fail
return
default:
return state;

5
curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.english.md
View File

@ -48,7 +48,6 @@ const reducer = (state = 5) => {
// For example: Redux.createStore()
// Define the store here:
```
</div>
@ -66,10 +65,6 @@ const reducer = (state = 5) => {
return state;
}
// Redux methods are available from a Redux object
// For example: Redux.createStore()
// Define the store here:
const store = Redux.createStore(reducer);
```

1
curriculum/challenges/english/03-front-end-libraries/redux/define-an-action-creator.english.md
View File

@ -59,7 +59,6 @@ const action = {
const action = {
type: 'LOGIN'
}
// Define an action creator here:
const actionCreator = () => {
return action;
};

1
curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md
View File

@ -80,7 +80,6 @@ const loginAction = () => {
}
};
// Dispatch the action here:
store.dispatch(loginAction());
```

4
curriculum/challenges/english/03-front-end-libraries/redux/get-state-from-the-redux-store.english.md
View File

@ -40,7 +40,7 @@ const store = Redux.createStore(
(state = 5) => state
);
// change code below this line
// Change code below this line
```
@ -59,7 +59,7 @@ const store = Redux.createStore(
(state = 5) => state
);
// change code below this line
// Change code below this line
const currentState = store.getState();
```

4
curriculum/challenges/english/03-front-end-libraries/redux/handle-an-action-in-the-store.english.md
View File

@ -46,9 +46,9 @@ const defaultState = {
};
const reducer = (state = defaultState, action) => {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
};
const store = Redux.createStore(reducer);

5
curriculum/challenges/english/03-front-end-libraries/redux/never-mutate-state.english.md
View File

@ -53,14 +53,13 @@ const todos = [
const immutableReducer = (state = todos, action) => {
switch(action.type) {
case ADD_TO_DO:
// don't mutate state here or the tests will fail
// Don't mutate state here or the tests will fail
return
default:
return state;
}
};
// an example todo argument would be 'Learn React',
const addToDo = (todo) => {
return {
type: ADD_TO_DO,
@ -84,7 +83,6 @@ const store = Redux.createStore(immutableReducer);
```js
const ADD_TO_DO = 'ADD_TO_DO';
// A list of strings representing tasks to do:
const todos = [
'Go to the store',
'Clean the house',
@ -101,7 +99,6 @@ const immutableReducer = (state = todos, action) => {
}
};
// an example todo argument would be 'Learn React',
const addToDo = (todo) => {
return {
type: ADD_TO_DO,

10
curriculum/challenges/english/03-front-end-libraries/redux/register-a-store-listener.english.md
View File

@ -51,12 +51,12 @@ const reducer = (state = 0, action) => {
const store = Redux.createStore(reducer);
// global count variable:
// Global count variable:
let count = 0;
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
store.dispatch({type: ADD});
console.log(count);
@ -98,7 +98,7 @@ const reducer = (state = 0, action) => {
const store = Redux.createStore(reducer);
let count = 0;
// change code below this line
// Change code below this line
store.subscribe( () =>
{
@ -106,7 +106,7 @@ store.subscribe( () =>
}
);
// change code above this line
// Change code above this line
store.dispatch({type: ADD});
store.dispatch({type: ADD});

2
curriculum/challenges/english/03-front-end-libraries/redux/remove-an-item-from-an-array.english.md
View File

@ -41,7 +41,7 @@ tests:
const immutableReducer = (state = [0,1,2,3,4,5], action) => {
switch(action.type) {
case 'REMOVE_ITEM':
// don't mutate state here or the tests will fail
// Don't mutate state here or the tests will fail
return
default:
return state;

16
curriculum/challenges/english/03-front-end-libraries/redux/send-action-data-to-the-store.english.md
View File

@ -42,18 +42,18 @@ const ADD_NOTE = 'ADD_NOTE';
const notesReducer = (state = 'Initial State', action) => {
switch(action.type) {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
default:
return state;
}
};
const addNoteText = (note) => {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
};
const store = Redux.createStore(notesReducer);
@ -78,22 +78,22 @@ const ADD_NOTE = 'ADD_NOTE';
const notesReducer = (state = 'Initial State', action) => {
switch(action.type) {
// change code below this line
// Change code below this line
case ADD_NOTE:
return action.text;
// change code above this line
// Change code above this line
default:
return state;
}
};
const addNoteText = (note) => {
// change code below this line
// Change code below this line
return {
type: ADD_NOTE,
text: note
}
// change code above this line
// Change code above this line
};
const store = Redux.createStore(notesReducer);

4
curriculum/challenges/english/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.english.md
View File

@ -50,9 +50,9 @@ const defaultState = {
};
const authReducer = (state = defaultState, action) => {
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
};
const store = Redux.createStore(authReducer);

4
curriculum/challenges/english/03-front-end-libraries/redux/use-const-for-action-types.english.md
View File

@ -49,9 +49,9 @@ tests:
<div id='jsx-seed'>
```jsx
// change code below this line
// Change code below this line
// change code above this line
// Change code above this line
const defaultState = {
authenticated: false

4
curriculum/challenges/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.english.md
View File

@ -53,13 +53,13 @@ const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users}
const handleAsync = () => {
return function(dispatch) {
// dispatch request action here
// Dispatch request action here
setTimeout(function() {
let data = {
users: ['Jeff', 'William', 'Alice']
}
// dispatch received data action here
// Dispatch received data action here
}, 2500);
}

2
curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.english.md
View File

@ -45,7 +45,7 @@ tests:
const immutableReducer = (state = ['Do not mutate state!'], action) => {
switch(action.type) {
case 'ADD_TO_DO':
// don't mutate state here or the tests will fail
// Don't mutate state here or the tests will fail
return
default:
return state;

12
curriculum/challenges/english/03-front-end-libraries/redux/write-a-counter-with-redux.english.md
View File

@ -44,16 +44,16 @@ tests:
<div id='jsx-seed'>
```jsx
const INCREMENT = null; // define a constant for increment action types
const DECREMENT = null; // define a constant for decrement action types
const INCREMENT = null; // Define a constant for increment action types
const DECREMENT = null; // Define a constant for decrement action types
const counterReducer = null; // define the counter reducer which will increment or decrement the state based on the action it receives
const counterReducer = null; // Define the counter reducer which will increment or decrement the state based on the action it receives
const incAction = null; // define an action creator for incrementing
const incAction = null; // Define an action creator for incrementing
const decAction = null; // define an action creator for decrementing
const decAction = null; // Define an action creator for decrementing
const store = null; // define the Redux store here, passing in your reducers
const store = null; // Define the Redux store here, passing in your reducers
```
</div>