From d3c8eacef2a92f1ef87bd8f68b61de27ed96bb60 Mon Sep 17 00:00:00 2001 From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Date: Thu, 9 May 2019 06:27:06 -0700 Subject: [PATCH] Hints & Solution for React and Redux (#35946) --- .../connect-redux-to-react/index.md | 43 ++++- .../index.md | 109 ++++++++++- .../getting-started-with-react-redux/index.md | 28 ++- .../manage-state-locally-first/index.md | 68 ++++++- .../map-dispatch-to-props/index.md | 25 ++- .../map-state-to-props/index.md | 17 +- .../moving-forward-from-here/index.md | 10 +- .../index.md | 171 +++++++++--------- 8 files changed, 366 insertions(+), 105 deletions(-) diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-react/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-react/index.md index 4ff5169e09..70fc4f8209 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-react/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-react/index.md @@ -3,8 +3,45 @@ title: Connect Redux to React --- ## Connect Redux to React -This is a stub. Help our community expand it. +### Solution +
+ Spoiler! + +```jsx +const addMessage = (message) => { + return { + type: 'ADD', + message: message + } +}; -This quick style guide will help ensure your pull request gets accepted. +const mapStateToProps = (state) => { + return { + messages: state + } +}; - +const mapDispatchToProps = (dispatch) => { + return { + submitNewMessage: (message) => { + dispatch(addMessage(message)); + } + } +}; + +class Presentational extends React.Component { + constructor(props) { + super(props); + } + render() { + return

This is a Presentational Component

+ } +}; + +const connect = ReactRedux.connect; +// change code below this line + +const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps) (Presentational) +``` + +
diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-the-messages-app/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-the-messages-app/index.md index 9a13827eab..3a795ef5e9 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-the-messages-app/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-the-messages-app/index.md @@ -3,8 +3,111 @@ title: Connect Redux to the Messages App --- ## Connect Redux to the Messages App -This is a stub. Help our community expand it. +### Solution +
+ Spoiler! -This quick style guide will help ensure your pull request gets accepted. +```jsx +// Redux: +const ADD = 'ADD'; - +const addMessage = (message) => { + return { + type: ADD, + message: message + } +}; + +const messageReducer = (state = [], action) => { + switch (action.type) { + case ADD: + return [ + ...state, + action.message + ]; + default: + return state; + } +}; + +const store = Redux.createStore(messageReducer); + +// React: +class Presentational extends React.Component { + constructor(props) { + super(props); + this.state = { + input: '', + messages: [] + } + this.handleChange = this.handleChange.bind(this); + this.submitMessage = this.submitMessage.bind(this); + } + handleChange(event) { + this.setState({ + input: event.target.value + }); + } + submitMessage() { + const currentMessage = this.state.input; + this.setState({ + input: '', + messages: this.state.messages.concat(currentMessage) + }); + } + render() { + return ( +
+

Type in a new Message:

+
+ + +
+ ); + } +}; + +// React-Redux: +const mapStateToProps = (state) => { + return { messages: state } +}; + +const mapDispatchToProps = (dispatch) => { + return { + submitNewMessage: (newMessage) => { + dispatch(addMessage(newMessage)) + } + } +}; + +const Provider = ReactRedux.Provider; +const connect = ReactRedux.connect; + +// define the Container component here: +const Container = connect(mapStateToProps,mapDispatchToProps)(Presentational) + +class AppWrapper extends React.Component { + constructor(props) { + super(props); + } + render() { + // complete the return statement: + return ( + + + + ); + } +}; +``` + +
diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/getting-started-with-react-redux/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/getting-started-with-react-redux/index.md index da7f6b26d1..c8b90a8788 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/getting-started-with-react-redux/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/getting-started-with-react-redux/index.md @@ -3,8 +3,30 @@ title: Getting Started with React Redux --- ## Getting Started with React Redux -This is a stub. Help our community expand it. +### Hint 1 +Remember to pass parameter props to constructor -This quick style guide will help ensure your pull request gets accepted. +### Hint 2 +Remember the super(props) in constructor - +### Solution +
+ Spoiler! + +```jsx +class DisplayMessages extends React.Component { + // change code below this line + constructor(props){ + super(props); + this.state={ + input:'', + messages:[] + } + } + // change code above this line + render() { + return
+ } +}; +``` +
diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/manage-state-locally-first/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/manage-state-locally-first/index.md index 1d7de13336..cca0c0b301 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/manage-state-locally-first/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/manage-state-locally-first/index.md @@ -3,8 +3,70 @@ title: Manage State Locally First --- ## Manage State Locally First -This is a stub. Help our community expand it. +### Hint 1 +Bind the method calls in component attributes with ```this```, e.g. +```jsx + +``` +or the binding can be done beforehand -This quick style guide will help ensure your pull request gets accepted. +### Hint 2 +Pass ```event``` to ```handleChange()``` method declaration and note that ```event.target.value``` stores the input value. - +### Hint 3 +You may wanna add the following ```
``` into render content to check if the ```handleChange()``` method is working. +```jsx +
{this.state.input}
+``` + +### Hint 4 +spread operator ```...``` can be used for array concatenation in ```submitMessage()``` method declaration. + +### Solution +
+ Spoiler! + +```jsx +class DisplayMessages extends React.Component { + constructor(props) { + super(props); + this.state = { + input: '', + messages: [] + } + } + // add handleChange() and submitMessage() methods here + handleChange(event){ + this.setState({ + input: event.target.value, + messages: this.state.messages + }) + } + + submitMessage(){ + this.setState({ + input: '', + messages: [...this.state.messages, this.state.input] + }) + } + + render() { + return ( +
+

Type in a new Message:

+ { /* render an input, button, and ul here */ } + + +
    + {this.state.messages.map((x, i)=>{ + return
  • {x}
    • + })} +
+ { /* change code above this line */ } +
+ ); + } +}; +``` + +
diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/map-dispatch-to-props/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/map-dispatch-to-props/index.md index 18cf5cdd26..31de6ac90b 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/map-dispatch-to-props/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/map-dispatch-to-props/index.md @@ -3,8 +3,25 @@ title: Map Dispatch to Props --- ## Map Dispatch to Props -This is a stub. Help our community expand it. +### Solution +
+ Spoiler! + +```jsx +const addMessage = (message) => { + return { + type: 'ADD', + message: message + } +}; -This quick style guide will help ensure your pull request gets accepted. - - +// change code below this line +const mapDispatchToProps = (dispatch) => { + return { + submitNewMessage: (message)=>{ + dispatch(addMessage(message)) + } + } +} +``` +
diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/map-state-to-props/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/map-state-to-props/index.md index 876a34a5c3..79ce792f60 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/map-state-to-props/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/map-state-to-props/index.md @@ -3,8 +3,19 @@ title: Map State to Props --- ## Map State to Props -This is a stub. Help our community expand it. +### Solution +
+ Spoiler! -This quick style guide will help ensure your pull request gets accepted. +```jsx +const state = []; - +// change code below this line +const mapStateToProps = (state)=>{ + return { + messages: state + } +} +``` + +
diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/moving-forward-from-here/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/moving-forward-from-here/index.md index e5843268bf..82de6ec28f 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/moving-forward-from-here/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/moving-forward-from-here/index.md @@ -3,8 +3,12 @@ title: Moving Forward From Here --- ## Moving Forward From Here -This is a stub. Help our community expand it. +### Solution +
+Spoiler! -This quick style guide will help ensure your pull request gets accepted. +```jsx +console.log('Now I know React and Redux!') +``` - +
diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md index 8e2b2bbac4..0ec70aa8f0 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md @@ -4,94 +4,99 @@ title: Use Provider to Connect Redux to React ## Use Provider to Connect Redux to React ### Hint 1 +Render a React Component! +### Hint 2 You do not need to wrap the `Provider` in any `
` tags. ### Solution +
+ Spoiler! + + ```jsx + // Redux Code: + const ADD = 'ADD'; -```jsx -// Redux Code: -const ADD = 'ADD'; - -const addMessage = (message) => { - return { - type: ADD, - message - } -}; - -const messageReducer = (state = [], action) => { - switch (action.type) { - case ADD: - return [ - ...state, - action.message - ]; - default: - return state; - } -}; - - - -const store = Redux.createStore(messageReducer); - -// React Code: - -class DisplayMessages extends React.Component { - constructor(props) { - super(props); - this.state = { - input: '', - messages: [] + const addMessage = (message) => { + return { + type: ADD, + message } - this.handleChange = this.handleChange.bind(this); - this.submitMessage = this.submitMessage.bind(this); - } - handleChange(event) { - this.setState({ - input: event.target.value - }); - } - submitMessage() { - const currentMessage = this.state.input; - this.setState({ - input: '', - messages: this.state.messages.concat(currentMessage) - }); - } - render() { - return ( -
-

Type in a new Message:

-
- -
    - {this.state.messages.map( (message, idx) => { - return ( -
  • {message}
    • - ) - }) - } -
-
- ); - } -}; + }; -const Provider = ReactRedux.Provider; + const messageReducer = (state = [], action) => { + switch (action.type) { + case ADD: + return [ + ...state, + action.message + ]; + default: + return state; + } + }; -class AppWrapper extends React.Component { - // Below is the code required to pass the test - render() { - return ( - - - - ); - } - // Above is the code required to pass the test -}; -``` + + + const store = Redux.createStore(messageReducer); + + // React Code: + + class DisplayMessages extends React.Component { + constructor(props) { + super(props); + this.state = { + input: '', + messages: [] + } + this.handleChange = this.handleChange.bind(this); + this.submitMessage = this.submitMessage.bind(this); + } + handleChange(event) { + this.setState({ + input: event.target.value + }); + } + submitMessage() { + const currentMessage = this.state.input; + this.setState({ + input: '', + messages: this.state.messages.concat(currentMessage) + }); + } + render() { + return ( +
+

Type in a new Message:

+
+ +
    + {this.state.messages.map( (message, idx) => { + return ( +
  • {message}
    • + ) + }) + } +
+
+ ); + } + }; + + const Provider = ReactRedux.Provider; + + class AppWrapper extends React.Component { + // Below is the code required to pass the test + render() { + return ( + + + + ); + } + // Above is the code required to pass the test + }; + ``` +