diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md index 9d868483c0..95a37dbfd2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md @@ -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 <!-- and end a comment with --> -Add a comment at the top of your HTML that says Only change code above this line. +Add a comment at the top of your HTML that says Code below this line should not be changed ## Instructions @@ -25,7 +25,7 @@ Add a comment at the top of your HTML that says Only change code above thi tests: - text: You should start a comment with <!-- at the top of your HTML. testString: assert(code.match(/^\s*.*this line))\s*.*this line.*\s*-->/gi)); - text: You should close your comment with -->. testString: assert(code.match(/-->.*\n+.+/g)); @@ -75,7 +75,7 @@ tests:
```html - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.english.md index 2d59fe0b45..7552617864 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.english.md @@ -55,7 +55,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md index 9e4b8c4022..b15b43bcac 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md @@ -53,7 +53,7 @@ tests: }); - +

jQuery Playground

@@ -98,7 +98,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md index d779df304a..207d8bb346 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md @@ -52,7 +52,7 @@ tests: }); - +

jQuery Playground

@@ -97,7 +97,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md index d0c55db6b0..ed77fab64f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md @@ -53,7 +53,7 @@ tests: }); - +

jQuery Playground

@@ -94,7 +94,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.english.md index 541bae5bee..1bb0f9ad57 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.english.md @@ -49,7 +49,7 @@ tests: }); - +

jQuery Playground

@@ -92,7 +92,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.english.md index ca28a3f128..13b93d6444 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.english.md @@ -43,7 +43,7 @@ tests:
```html - +

jQuery Playground

@@ -82,7 +82,7 @@ tests: $(document).ready(function() { }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/remove-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/remove-an-element-using-jquery.english.md index 4a84648126..fa33eba8be 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/remove-an-element-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/remove-an-element-using-jquery.english.md @@ -45,7 +45,7 @@ tests: }); - +

jQuery Playground

@@ -88,7 +88,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.english.md index 08ae77ab77..1fcf3ac659 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.english.md @@ -51,7 +51,7 @@ tests: }); - +

jQuery Playground

@@ -95,7 +95,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.english.md index e3d1de674b..9fda5f05e2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.english.md @@ -59,7 +59,7 @@ tests: }); - +

jQuery Playground

@@ -107,7 +107,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.english.md index 31f19497d6..74b1f9ab92 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.english.md @@ -49,7 +49,7 @@ tests: }); - +

jQuery Playground

@@ -91,7 +91,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.english.md index b4252963ec..6b034e9110 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.english.md @@ -52,7 +52,7 @@ tests: }); - +

jQuery Playground

@@ -95,7 +95,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.english.md index a2a5cc2da6..936f8ccd37 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.english.md @@ -58,7 +58,7 @@ tests: }); - +

jQuery Playground

@@ -108,7 +108,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.english.md index 9c30a1fd02..da541db0a5 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.english.md @@ -49,7 +49,7 @@ tests: }); - +

jQuery Playground

@@ -90,7 +90,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.english.md index 2c9eed98ea..bf60e9cfb2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.english.md @@ -52,7 +52,7 @@ tests: }); - +

jQuery Playground

@@ -99,7 +99,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.english.md index 1d63b77255..09dbee2549 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.english.md @@ -55,7 +55,7 @@ tests: }); - +
@@ -103,7 +103,7 @@ tests: }); - +
diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.english.md index 082ce97302..547d609c5c 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.english.md @@ -57,7 +57,7 @@ tests: }); - +

jQuery Playground

@@ -100,7 +100,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md index d937ee8f3a..4d91f796ed 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md @@ -50,7 +50,7 @@ tests: }); - +

jQuery Playground

@@ -94,7 +94,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.english.md index 7f9f6e46b2..a98dea39f4 100644 --- a/curriculum/challenges/english/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.english.md @@ -54,7 +54,7 @@ tests: }); - +

jQuery Playground

@@ -105,7 +105,7 @@ tests: }); - +

jQuery Playground

diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.english.md index a8ad10146b..1bbd913f6c 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-react.english.md @@ -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); diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.english.md index d7548ff326..47ff92f06b 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.english.md @@ -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 ( diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.english.md index 974e174713..a85d2443df 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.english.md @@ -45,7 +45,7 @@ tests:
```jsx -// define ADD, addMessage(), messageReducer(), and store here: +// Define ADD, addMessage(), messageReducer(), and store here: ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.english.md index dfeaa07d2e..1347791d6e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.english.md @@ -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
} diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md index 04107a7540..4001699c16 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md @@ -56,15 +56,15 @@ class DisplayMessages extends React.Component { messages: [] } } - // add handleChange() and submitMessage() methods here + // Add handleChange() and submitMessage() methods here render() { return (

Type in a new Message:

- { /* 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 */ }
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md index 23ece6dc14..0f07d5a1ba 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md @@ -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 { diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-state-to-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-state-to-props.english.md index 4126a83aae..9980eb5707 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-state-to-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-state-to-props.english.md @@ -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 { diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/moving-forward-from-here.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/moving-forward-from-here.english.md index 81ab835b4a..92fd5e410c 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/moving-forward-from-here.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/moving-forward-from-here.english.md @@ -37,28 +37,28 @@ tests:
```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( -// -// -// , -// document.getElementById('root') -// ); - -// change code below this line +ReactDOM.render( + + + , + document.getElementById('root') +); +*/ ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md index 2235029a87..89b5b43ed2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md @@ -49,7 +49,7 @@ tests:
```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(, 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 ( @@ -232,7 +232,7 @@ class AppWrapper extends React.Component { ); } - // change code above this line + // Change code above this line }; ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md index a6adbaac88..e86ed9ab53 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md @@ -51,9 +51,9 @@ class ReturnTempPassword extends React.Component { render() { return (
- { /* change code below this line */ } + { /* Change code below this line */ }

Your temporary password is:

- { /* change code above this line */ } + { /* Change code above this line */ }
); } @@ -70,9 +70,9 @@ class ResetPassword extends React.Component {

Reset Password

We've generated a new temporary password for you.

Please reset this password from your account settings ASAP.

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } @@ -123,9 +123,9 @@ class ResetPassword extends React.Component {

Reset Password

We've generated a new temporary password for you.

Please reset this password from your account settings ASAP.

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md b/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md index db39f40e56..c576155d49 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md @@ -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) => ({ diff --git a/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md b/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md index 99de1833bc..0dcfb13de0 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md @@ -14,7 +14,7 @@ All property value length units (like height, width, a ## Instructions
-If you have a large set of styles, you can assign a style object to a constant to keep your code organized. Uncomment the styles constant and declare an object with three style properties and their values. Give the div a color of "purple", a font-size of 40, and a border of "2px solid purple". Then set the style attribute equal to the styles constant. +If you have a large set of styles, you can assign a style object to a constant to keep your code organized. Initialize a styles constant and assign an object with three style properties and their values to it. Give the div a color of "purple", a font-size of 40, and a border of "2px solid purple". Then set the style attribute equal to the styles constant.
## 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 (
Style Me!
); - // 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 (
Style Me!
- // change code above this line ); + // Change code above this line } }; diff --git a/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md b/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md index 8e29ff086c..76474eb4fa 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md @@ -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 (
- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }

{this.state.text}

); diff --git a/curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md b/curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md index c70087c378..f0d853eaa9 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md @@ -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 (

Don't Type Too Much:

diff --git a/curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md b/curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md index 39ed995f2c..8bb9ac0a74 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md @@ -49,9 +49,9 @@ class Fruits extends React.Component { return (

Fruits:

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } @@ -65,9 +65,9 @@ class TypesOfFood extends React.Component { return (

Types of Food:

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); @@ -153,10 +153,10 @@ class Fruits extends React.Component { return (

Fruits:

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
) } @@ -170,9 +170,9 @@ class TypesOfFood extends React.Component { return (

Types of Food:

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md index d128b1c52f..8f795b751d 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md @@ -66,7 +66,7 @@ tests:
```jsx -// write your code here + ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md index d15b8df6b9..e7503ec9c0 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md @@ -68,10 +68,10 @@ class ParentComponent extends React.Component { return (

I am the parent

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } @@ -113,9 +113,9 @@ class ParentComponent extends React.Component { return (

I am the parent

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md index 36fab329c6..28a24a44f7 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md @@ -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 (
- {/* 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 */}
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md index ba636795d7..0ab8e05a9f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md @@ -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 (
- { /* change code below this line */} + { /* Change code below this line */} - { /* change code above this line */} + { /* Change code above this line */}

Controlled Input:

{this.state.input}

diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md index 9ce563e693..0c2f3c2147 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md @@ -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 (

Hello React!

); - // change code above this line + // Change code above this line } }; ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md index 638d733e9e..a6d610dc95 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md @@ -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 ( diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md index 82cefd8198..268ae9d016 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md @@ -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(, document.getElementById('root')) ```js const MyComponent = function() { - // change code below this line + // Change code below this line return (
Demo Solution
); - // change code above this line + // Change code above this line } ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md b/curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md index b27a20394d..00b693c86b 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md @@ -56,7 +56,7 @@ const frontEndFrameworks = [ ]; function Frameworks() { - const renderFrameworks = null; // change code here + const renderFrameworks = null; // Change this line return (

Popular Front End JavaScript Frameworks

diff --git a/curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md b/curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md index 3b751ac1e0..4a8144932b 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md @@ -44,11 +44,9 @@ tests: ```jsx const JSX = (
- {/* remove comment and change code below this line

Welcome to React!


Be sure to close all tags!


- remove comment and change code above this line */}
); @@ -75,11 +73,9 @@ ReactDOM.render(JSX, document.getElementById('root')) ```js const JSX = (
- {/* change code below this line */}

Welcome to React!


Be sure to close all tags!


- {/* change code above this line */}
); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md b/curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md index c5e2fa4461..fbe95d1432 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md @@ -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.'); diff --git a/curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md index 4bfe3495e3..4e8d6b3b13 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md @@ -52,9 +52,9 @@ class ShoppingCart extends React.Component { super(props); } render() { - { /* change code below this line */ } + { /* Change code below this line */ } return - { /* 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 - { /* change code above this line */ } + { /* Change code above this line */ } } }; ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md index 7f6d11ac64..eb6a997ed6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md @@ -59,9 +59,9 @@ class MyApp extends React.Component { render() { return (
- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md index bf82814a5d..e75cdd8720 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md @@ -66,9 +66,9 @@ tests: ```jsx const List = (props) => { - { /* change code below this line */ } + { /* Change code below this line */ } return

{}

- { /* change code above this line */ } + { /* Change code above this line */ } }; class ToDo extends React.Component { @@ -80,11 +80,11 @@ class ToDo extends React.Component {

To Do Lists

Today

- { /* change code below this line */ } + { /* Change code below this line */ }

Tomorrow

- { /* change code above this line */ } + { /* Change code above this line */ }
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md index 309767753a..77865229c9 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md @@ -63,9 +63,9 @@ tests: const CurrentDate = (props) => { return (
- { /* change code below this line */ } + { /* Change code below this line */ }

The current date is:

- { /* change code above this line */ } + { /* Change code above this line */ }
); }; @@ -78,9 +78,9 @@ class Calendar extends React.Component { return (

What date is it?

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } @@ -109,9 +109,9 @@ ReactDOM.render(, document.getElementById('root')) const CurrentDate = (props) => { return (
- { /* change code below this line */ } + { /* Change code below this line */ }

The current date is: {props.date}

- { /* change code above this line */ } + { /* Change code above this line */ }
); }; @@ -124,9 +124,9 @@ class Calendar extends React.Component { return (

What date is it?

- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md index aeb220c4d9..3f95623d5f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md @@ -15,7 +15,7 @@ This pattern illustrates some important paradigms in React. The first is uni ## Instructions
-The MyApp component is stateful and renders a Navbar component as a child. Pass the name property in its state down to the child component, then show the name in the h1 tag that's part of the Navbar render method. +The MyApp component is stateful and renders a Navbar component as a child. Pass the name property in its state down to the child component, then show the name in the h1 tag that's part of the Navbar render method. name should appear after the text Hello, my name is: .
## Tests @@ -50,7 +50,9 @@ class MyApp extends React.Component { render() { return (
- + {/* Change code below this line */} + + {/* Change code above this line */}
); } @@ -63,7 +65,9 @@ class Navbar extends React.Component { render() { return (
-

Hello, my name is: {/* your code here */}

+ {/* Change code below this line */} +

Hello, my name is:

+ {/* Change code above this line */}
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md index 878027ccd9..e4be436c08 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md @@ -51,15 +51,15 @@ class TypesOfFood extends React.Component { return (

Types of Food:

- {/* 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 ``` @@ -124,16 +124,16 @@ class TypesOfFood extends React.Component { return (

Types of Food:

- {/* 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 ReactDOM.render(, document.getElementById('challenge-node')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md index e8a5f601ee..43e713c225 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md @@ -18,7 +18,7 @@ In this challenge, you'll set up a child component to make rendering decisions b
The code editor has two components that are partially defined for you: a parent called GameOfChance, and a child called Results. 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 Math.random(). This method returns a value between 0 (inclusive) and 1 (exclusive) each time it is called. So for 50/50 odds, use Math.random() >= .5 in your expression. Statistically speaking, this expression will return true 50% of the time, and false 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 Results component as a child of GameOfChance, and pass in expression as a prop called fiftyFifty. In the Results component, write a ternary expression to render the text "You Win!" or "You Lose!" based on the fiftyFifty prop that's being passed in from GameOfChance. Finally, make sure the handleClick() 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 Results component as a child of GameOfChance, and pass in expression as a prop called fiftyFifty. In the Results component, write a ternary expression to render the h1 element with the text "You Win!" or "You Lose!" based on the fiftyFifty prop that's being passed in from GameOfChance. Finally, make sure the handleClick() 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.
## Tests @@ -186,7 +186,9 @@ class Results extends React.Component { super(props); } render() { - return

{/* change code here */}

; + {/* Change code below this line */} + return

; + {/* 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 (
- {/* change code below this line */} + {/* Change code below this line */} - {/* change code above this line */} + {/* Change code above this line */}

{'Turn: ' + this.state.counter}

); diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md index c99700fa36..c702cbbe37 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md @@ -48,7 +48,7 @@ const JSX = (

Lets render this to the DOM

); -// change code below this line +// Change code below this line ``` @@ -69,7 +69,7 @@ const JSX = (

Lets render this to the DOM

); -// change code below this line +// Change code below this line ReactDOM.render(JSX, document.getElementById('challenge-node')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md index 2c210a68f0..f207e79e10 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md @@ -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(); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md index 82a2fc86c3..30b04ea014 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md @@ -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 (
- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } @@ -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 (
- { /* change code below this line */ } + { /* Change code below this line */ }

{name}

- { /* change code above this line */ } + { /* Change code above this line */ }
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md index 4160df69fa..e8339d070e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md @@ -53,9 +53,9 @@ class MyComponent extends React.Component { render() { return (
- { /* change code below this line */ } + { /* Change code below this line */ } - { /* change code above this line */ } + { /* Change code above this line */ }
); } @@ -91,9 +91,9 @@ class MyComponent extends React.Component { render() { return (
- { /* change code below this line */ } + { /* Change code below this line */ }

{this.state.name}

- { /* change code above this line */ } + { /* Change code above this line */ }
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md index 096c87d87b..b38b143b9f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md @@ -55,7 +55,7 @@ class MyComponent extends React.Component { })); } render() { - // change code below this line + // Change code below this line return (
@@ -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 (
diff --git a/curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md b/curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md index 434d099fcd..541b44201e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md @@ -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 ( diff --git a/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md b/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md index fae909c0d9..96d3e8c6bf 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md @@ -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 ( diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md index 4f82ee2bb5..9cd142b0f6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md @@ -56,7 +56,7 @@ class MyComponent extends React.Component { })); } render() { - // change code below this line + // Change code below this line return (
@@ -100,7 +100,7 @@ class MyComponent extends React.Component { })); } render() { - // change code below this line + // Change code below this line return (
diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md index 5f4cb77b2f..b63906ffd6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md @@ -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} />
- {/* change code here */} + {/* Change code below this line */} + + {/* Change code above this line */}
); } diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md index e8ac73694f..21c80f6829 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md @@ -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 (

Answer:

- {/* change code below this line */} + {/* Change code below this line */} - {/* change code above this line */} + {/* Change code above this line */}

); diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md index d49fa0f691..117bedba6e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md @@ -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 (

Current Online Users:

diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md index d7528591a4..aeb5883cd9 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md @@ -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 (