gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Hints & Solution for React and Redux (#35946)

Browse Source
This commit is contained in:
Randell Dawson
2019-05-09 06:27:06 -07:00
committed by The Coding Aviator
parent 7437145bb4
commit d3c8eacef2
8 changed files with 366 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-react/index.md
View File

@ -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>

109
guide/english/certifications/front-end-libraries/react-and-redux/connect-redux-to-the-messages-app/index.md
View File

@ -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>

28
guide/english/certifications/front-end-libraries/react-and-redux/getting-started-with-react-redux/index.md
View File

@ -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>

68
guide/english/certifications/front-end-libraries/react-and-redux/manage-state-locally-first/index.md
View File

@ -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>

23
guide/english/certifications/front-end-libraries/react-and-redux/map-dispatch-to-props/index.md
View File

@ -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>

17
guide/english/certifications/front-end-libraries/react-and-redux/map-state-to-props/index.md
View File

@ -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>

10
guide/english/certifications/front-end-libraries/react-and-redux/moving-forward-from-here/index.md
View File

@ -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>

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

@ -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
// Redux Code:
const ADD = 'ADD';
```jsx
// Redux Code:
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>