From a2f4c8d0e118d35fdcff33cc960236b963b451f8 Mon Sep 17 00:00:00 2001 From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Date: Tue, 15 Sep 2020 09:53:25 -0700 Subject: [PATCH] fix: consolidated comments for use with translation dictionary (#39578) --- .../use-comments-to-clarify-code.english.md | 6 +-- ...-inside-an-element-using-jquery.english.md | 2 +- ...-css-of-an-element-using-jquery.english.md | 4 +- .../clone-an-element-using-jquery.english.md | 4 +- .../delete-your-jquery-functions.english.md | 4 +- ...disable-an-element-using-jquery.english.md | 4 +- ...pt-tags-and-document-ready-work.english.md | 4 +- .../remove-an-element-using-jquery.english.md | 4 +- ...ses-from-an-element-with-jquery.english.md | 4 +- ...hild-of-an-element-using-jquery.english.md | 4 +- ...-elements-by-class-using-jquery.english.md | 4 +- ...get-elements-by-id-using-jquery.english.md | 4 +- ...rget-even-elements-using-jquery.english.md | 4 +- ...nts-with-selectors-using-jquery.english.md | 4 +- ...dren-of-an-element-using-jquery.english.md | 4 +- ...rent-of-an-element-using-jquery.english.md | 4 +- ...-with-multiple-jquery-selectors.english.md | 4 +- ...to-to-move-elements-with-jquery.english.md | 4 +- ...query-to-modify-the-entire-page.english.md | 4 +- .../connect-redux-to-react.english.md | 4 +- ...nnect-redux-to-the-messages-app.english.md | 6 +-- .../extract-state-logic-to-redux.english.md | 2 +- ...etting-started-with-react-redux.english.md | 4 +- .../manage-state-locally-first.english.md | 6 +-- .../map-dispatch-to-props.english.md | 4 +- .../map-state-to-props.english.md | 4 +- .../moving-forward-from-here.english.md | 38 +++++++++---------- ...vider-to-connect-redux-to-react.english.md | 16 ++++---- .../access-props-using-this.props.english.md | 12 +++--- .../react/add-event-listeners.english.md | 12 +++--- .../add-inline-styles-in-react.english.md | 16 ++++---- .../bind-this-to-a-class-method.english.md | 8 ++-- ...onally-based-on-component-state.english.md | 4 +- .../react/compose-react-components.english.md | 16 ++++---- .../create-a-complex-jsx-element.english.md | 2 +- ...te-a-component-with-composition.english.md | 8 ++-- .../react/create-a-controlled-form.english.md | 12 +++--- .../create-a-controlled-input.english.md | 12 +++--- .../react/create-a-react-component.english.md | 8 ++-- .../create-a-stateful-component.english.md | 3 +- ...-stateless-functional-component.english.md | 8 ++-- ...elements-a-unique-key-attribute.english.md | 2 +- ...arn-about-self-closing-jsx-tags.english.md | 4 -- ...ders-with-shouldcomponentupdate.english.md | 8 ++-- .../react/override-default-props.english.md | 8 ++-- .../react/pass-a-callback-as-props.english.md | 4 +- .../react/pass-an-array-as-props.english.md | 8 ++-- ...-stateless-functional-component.english.md | 16 ++++---- ...te-as-props-to-child-components.english.md | 10 +++-- ...er-a-class-component-to-the-dom.english.md | 12 +++--- ...render-conditionally-from-props.english.md | 14 ++++--- ...render-html-elements-to-the-dom.english.md | 4 +- ...-the-server-with-rendertostring.english.md | 4 +- ...-the-user-interface-another-way.english.md | 16 ++++---- ...der-state-in-the-user-interface.english.md | 8 ++-- ...ender-with-an-if-else-condition.english.md | 4 +- ...stateless-functional-components.english.md | 4 +- .../set-state-with-this.setstate.english.md | 8 ++-- ...-for-a-more-concise-conditional.english.md | 4 +- ...ssion-for-conditional-rendering.english.md | 8 ++-- ...vascript-in-react-render-method.english.md | 6 +-- ...-to-dynamically-filter-an-array.english.md | 4 +- ...-to-dynamically-render-elements.english.md | 6 +-- .../react/use-default-props.english.md | 4 +- ...-to-define-the-props-you-expect.english.md | 8 ++-- ...act-to-render-nested-components.english.md | 16 ++++---- .../use-state-to-toggle-an-element.english.md | 8 ++-- ...ecycle-method-componentdidmount.english.md | 6 ++- ...cycle-method-componentwillmount.english.md | 8 ++-- ...-a-react-component-from-scratch.english.md | 4 +- .../react/write-a-simple-counter.english.md | 8 ++-- .../combine-multiple-reducers.english.md | 2 +- ...py-an-object-with-object.assign.english.md | 2 +- .../redux/create-a-redux-store.english.md | 5 --- .../redux/define-an-action-creator.english.md | 1 - .../redux/dispatch-an-action-event.english.md | 1 - .../get-state-from-the-redux-store.english.md | 4 +- .../handle-an-action-in-the-store.english.md | 4 +- .../redux/never-mutate-state.english.md | 5 +-- .../register-a-store-listener.english.md | 10 ++--- .../remove-an-item-from-an-array.english.md | 2 +- .../send-action-data-to-the-store.english.md | 16 ++++---- ...ment-to-handle-multiple-actions.english.md | 4 +- .../use-const-for-action-types.english.md | 4 +- ...-to-handle-asynchronous-actions.english.md | 4 +- ...e-the-spread-operator-on-arrays.english.md | 2 +- .../write-a-counter-with-redux.english.md | 12 +++--- 87 files changed, 289 insertions(+), 294 deletions(-) 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 9d868483c00..95a37dbfd27 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 2d59fe0b454..7552617864c 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 9e4b8c40221..b15b43bcacc 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 d779df304ac..207d8bb346e 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 d0c55db6b08..ed77fab64f6 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 541bae5bee2..1bb0f9ad575 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 ca28a3f1283..13b93d64444 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 4a84648126f..fa33eba8be5 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 08ae77ab77b..1fcf3ac6599 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 e3d1de674b8..9fda5f05e2c 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 31f19497d63..74b1f9ab924 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 b4252963ec9..6b034e91102 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 a2a5cc2da60..936f8ccd373 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 9c30a1fd02a..da541db0a5b 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 2c9eed98ea0..bf60e9cfb20 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 1d63b77255b..09dbee2549f 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 082ce973026..547d609c5c4 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 d937ee8f3a8..4d91f796ed1 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 7f9f6e46b25..a98dea39f4a 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 a8ad10146b0..1bbd913f6cf 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 d7548ff3262..47ff92f06b5 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 974e174713d..a85d2443df3 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 dfeaa07d2e6..1347791d6ea 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 04107a75401..4001699c16f 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 23ece6dc14f..0f07d5a1ba9 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 4126a83aaef..9980eb5707e 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 81ab835b4a8..92fd5e410c7 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 2235029a871..89b5b43ed25 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 a6adbaac884..e86ed9ab53a 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 db39f40e56b..c576155d49e 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 99de1833bc4..0dcfb13de07 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 8e29ff086c1..76474eb4fa5 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 c70087c3780..f0d853eaa9a 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 39ed995f2c5..8bb9ac0a74c 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 d128b1c52fb..8f795b751d2 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 d15b8df6b9b..e7503ec9c0b 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 36fab329c65..28a24a44f71 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 ba636795d7b..0ab8e05a9f6 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 9ce563e6938..0c2f3c21477 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 638d733e9e3..a6d610dc959 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 82cefd8198c..268ae9d016e 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 b27a20394df..00b693c86bb 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 3b751ac1e0d..4a8144932b2 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 c5e2fa4461e..fbe95d1432b 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 4bfe3495e39..4e8d6b3b134 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 7f6d11ac64f..eb6a997ed61 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 bf82814a5dc..e75cdd87201 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 309767753a8..77865229c90 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 aeb220c4d92..3f95623d5f6 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 878027ccd9b..e4be436c084 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 e8a5f601eec..43e713c225c 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 c99700fa360..c702cbbe37a 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 2c210a68f05..f207e79e10f 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 82a2fc86c31..30b04ea014c 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 4160df69fa6..e8339d070e0 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 096c87d87bd..b38b143b9fb 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 434d099fcd5..541b44201eb 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 fae909c0d9b..96d3e8c6bf8 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 4f82ee2bb52..9cd142b0f6f 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 5f4cb77b2f0..b63906ffd66 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 e8ac73694fd..21c80f68296 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 d49fa0f6919..117bedba6e1 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 d7528591a45..aeb5883cd9e 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 (