Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update MVC lesson example, add MDN link to MVC #727

Merged
merged 2 commits into from
Jul 19, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 22 additions & 26 deletions lessons/module-3/mvc.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ categories; the model, the view, and the controller. In this pattern, each
component has its own specific responsibility. While implemented slightly
differently in various frameworks, the general pattern is one of the most
frequently used industry standards for creating scalable and extensible
software.
software.

The **Model** is focused solely on the data, and data related logic of the
application. This could be business data for the application, or data that is
Expand All @@ -63,35 +63,31 @@ for this pattern, you will find it all over the place.
![MVC interactions](https://www.tutorialspoint.com/sencha_touch/images/mvc.jpg
"Data flow in MVC")

Take a look at [the docs on MDN](https://developer.mozilla.org/en-US/docs/Glossary/MVC) if you'd like to see it explained in another way.

### Ok, by why would I ever use it?

You've already been using it! Let's consider a super simple example:

```js
import React, { Component } from 'react';

class App extends Component {
constructor() {
super()
this.state = {
count: 0,
}
}
import React from 'react';

handleCounter = (event) => {
const increment = event.target.name === '+' ? 1 : -1
this.setState({count: this.state.count + increment})
}
function App() {
const [count, setCount] = useState(0);

render() {
return (
<div className="App">
<h1>{this.state.count}</h1>
<button onClick={this.handleCounter} name="-">-</button>
<button onClick={this.handleCounter} name="+">+</button>
</div>
);

handleCounter = (event) => {
const increment = event.target.name === '+' ? 1 : -1;
setCount(count + increment)
}

return (
<div className="App">
<h1>{count}</h1>
<button onClick={(e) => handleCounter(e)} name="-">-</ button>
<button onClick={(e) => handleCounter(e)} name="+">+</button>
</div>
)
}

export default App;
Expand Down Expand Up @@ -145,12 +141,12 @@ few MVP (Model View Presenter) frameworks that you may come across are:

### Wrapping it up

In small groups draw out the MVC of your most recent application. How does Redux
play into this? Work on this for 10 minutes, then we'll reconvene.
In small groups draw out the MVC of your most recent application. Work on this for 10 minutes, then we'll reconvene.

## References

[MVC
- [MVC
Architecture](https://developer.mozilla.org/en-US/docs/Glossary/MVC)
[Understanding

- [Understanding
MVC](https://blog.codinghorror.com/understanding-model-view-controller/)