Hints & Solution for React and Redux (#35946)

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. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/react-and-redux/connect-redux-to-react/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Solution
+<details>
+  <summary>Spoiler!</summary>
   
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+```jsx
+const addMessage = (message) => {
+  return {
+    type: 'ADD',
+    message: message
+  }
+};
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+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 <h3>This is a Presentational Component</h3>
+  }
+};
+
+const connect = ReactRedux.connect;
+// change code below this line
+
+const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps) (Presentational)
+```
+
+</details>

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. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/react-and-redux/connect-redux-to-the-messages-app/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Solution
+<details>
+  <summary>Spoiler!</summary>
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+```jsx
+// Redux:
+const ADD = 'ADD';
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+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 (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.state.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+
+// 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 (
+      <Provider store={store}>
+        <Container />
+      </Provider>
+      );
+  }
+};
+```
+
+</details>

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. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/react-and-redux/getting-started-with-react-redux/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Hint 1
+Remember to pass parameter props to constructor
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+### Hint 2
+Remember the super(props) in constructor
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+### Solution
+<details>
+  <summary>Spoiler!</summary>
+
+```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 <div />
+  }
+};
+```
+</details>

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. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/react-and-redux/manage-state-locally-first/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Hint 1
+Bind the method calls in component attributes with ```this```, e.g.
+```jsx
+<input onChange={this.handleChange.bind(this)} value={this.state.input}/>
+```
+or the binding can be done beforehand
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+### Hint 2
+Pass ```event``` to ```handleChange()``` method declaration and note that ```event.target.value``` stores the input value.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+### Hint 3
+You may wanna add the following ```<div>``` into render content to check if the ```handleChange()``` method is working.
+```jsx
+<div>{this.state.input}</div>
+```
+
+### Hint 4
+spread operator ```...``` can be used for array concatenation in ```submitMessage()``` method declaration.
+
+### Solution
+<details>
+  <summary>Spoiler!</summary>
+
+```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 (
+      <div>
+        <h2>Type in a new Message:</h2>
+        { /* render an input, button, and ul here */ }
+        <input onChange={this.handleChange.bind(this)} value={this.state.input}/>
+        <button onClick={this.submitMessage.bind(this)}>Submit</button>
+        <ul>
+          {this.state.messages.map((x, i)=>{
+            return <li key={i}>{x}</li>
+          })}
+        </ul>
+        { /* change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+</details>

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. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/react-and-redux/map-dispatch-to-props/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Solution
+<details>
+  <summary>Spoiler!</summary>
   
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+```jsx
+const addMessage = (message) => {
+  return {
+    type: 'ADD',
+    message: message
+  }
+};
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+// change code below this line
+const mapDispatchToProps = (dispatch) => {
+    return {
+        submitNewMessage: (message)=>{
+            dispatch(addMessage(message))
+        }
+    }
+}
+```
+</details>

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. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/react-and-redux/map-state-to-props/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Solution
+<details>
+  <summary>Spoiler!</summary>
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+```jsx
+const state = [];
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+// change code below this line
+const mapStateToProps = (state)=>{
+  return {
+    messages: state
+  }
+}
+```
+
+</details>

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. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/react-and-redux/moving-forward-from-here/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Solution
+<details>
+<summary>Spoiler!</summary>
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+```jsx
+console.log('Now I know React and Redux!')
+```
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+</details>

guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md

@@ -4,23 +4,27 @@ 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 `<div>` tags.
 
 ### Solution
+<details>
+  <summary>Spoiler!</summary>
   
-```jsx
+  ```jsx
-// Redux Code:
+  // Redux Code:
-const ADD = 'ADD';
+  const ADD = 'ADD';
 
-const addMessage = (message) => {
+  const addMessage = (message) => {
     return {
       type: ADD,
       message
     }
-};
+  };
 
-const messageReducer = (state = [], action) => {
+  const messageReducer = (state = [], action) => {
     switch (action.type) {
       case ADD:
         return [
@@ -30,15 +34,15 @@ const messageReducer = (state = [], action) => {
       default:
         return state;
     }
-};
+  };
 
 
 
-const store = Redux.createStore(messageReducer);
+  const store = Redux.createStore(messageReducer);
 
-// React Code:
+  // React Code:
 
-class DisplayMessages extends React.Component {
+  class DisplayMessages extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
@@ -79,11 +83,11 @@ class DisplayMessages extends React.Component {
         </div>
       );
     }
-};
+  };
 
-const Provider = ReactRedux.Provider;
+  const Provider = ReactRedux.Provider;
 
-class AppWrapper extends React.Component {
+  class AppWrapper extends React.Component {
     // Below is the code required to pass the test
     render() {
       return (
@@ -93,5 +97,6 @@ class AppWrapper extends React.Component {
       );
     }
     // Above is the code required to pass the test
-};
+  };
-```
+  ```
+</details>