Skip to content

Commit dcbd874

Browse files
mjacksonmjackson
committed
A few small updates
1 parent a0794e9 commit dcbd874

File tree

12 files changed

+94
-103
lines changed

12 files changed

+94
-103
lines changed

‎subjects/05-Imperative-to-Declarative/exercise.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
// This Modal, even though its a React component, has an imperative API to
55
// open and close it. Can you convert it to a declarative API?
66
////////////////////////////////////////////////////////////////////////////////
7-
import React from "react";
8-
import ReactDOM from "react-dom";
9-
import PropTypes from "prop-types";
107
import $ from "jquery";
118
import "bootstrap";
129
import "bootstrap/dist/css/bootstrap.min.css";
1310

11+
import React from "react";
12+
import ReactDOM from "react-dom";
13+
import PropTypes from "prop-types";
14+
1415
class Modal extends React.Component {
1516
static propTypes = {
1617
title: PropTypes.string.isRequired,

‎subjects/05-Imperative-to-Declarative/solution.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
// This Modal, even though its a React component, has an imperative API to
55
// open and close it. Can you convert it to a declarative API?
66
////////////////////////////////////////////////////////////////////////////////
7-
import React from "react";
8-
import ReactDOM from "react-dom";
9-
import PropTypes from "prop-types";
107
import $ from "jquery";
118
import "bootstrap";
129
import "bootstrap/dist/css/bootstrap.min.css";
1310

11+
import React from "react";
12+
import ReactDOM from "react-dom";
13+
import PropTypes from "prop-types";
14+
1415
class Modal extends React.Component {
1516
static propTypes = {
1617
title: PropTypes.string.isRequired,
@@ -49,9 +50,7 @@ class Modal extends React.Component {
4950
}
5051

5152
class App extends React.Component {
52-
state = {
53-
isModalOpen: false
54-
};
53+
state = { isModalOpen: false };
5554

5655
openModal = () => {
5756
this.setState({ isModalOpen: true });

‎subjects/06-Controlled-vs-Uncontrolled/solution.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,7 @@ class CheckoutForm extends React.Component {
3030

3131
handleSubmit = event => {
3232
event.preventDefault();
33-
3433
const values = serializeForm(event.target, { hash: true });
35-
3634
console.log(values);
3735
};
3836

‎subjects/07-Higher-Order-Components/exercise.js‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
////////////////////////////////////////////////////////////////////////////////
22
// Exercise:
33
//
4-
// - Make `withMouse` a "higher-order component" that sends the mouse position
5-
// to the component as props (hint: use `event.clientX` and `event.clientY`).
4+
// - Make the mouse-tracking logic reusable by filling in the `withMouse`
5+
// higher-order component and returning a new component that renders a
6+
// `ComposedComponent` element with the current mouse position as props
7+
// - Use the `withMouse` function you just wrote to create an `AppWithMouse`
8+
// component
9+
// - Render <AppWithMouse> instead of <App>
610
//
711
// Got extra time?
812
//
@@ -14,35 +18,28 @@ import React from "react";
1418
import ReactDOM from "react-dom";
1519
import PropTypes from "prop-types";
1620

17-
function withMouse(Component) {
18-
return Component;
21+
function withMouse(ComposedComponent) {
22+
// TODO
1923
}
2024

2125
class App extends React.Component {
22-
static propTypes = {
23-
mouse: PropTypes.shape({
24-
x: PropTypes.number.isRequired,
25-
y: PropTypes.number.isRequired
26-
})
26+
state = { x: 0, y: 0 };
27+
28+
handleMouseMove = event => {
29+
this.setState({ x: event.clientX, y: event.clientY });
2730
};
2831

2932
render() {
30-
const { mouse } = this.props;
33+
const { x, y } = this.state;
3134

3235
return (
33-
<div className="container">
34-
{mouse ? (
35-
<h1>
36-
The mouse position is ({mouse.x}, {mouse.y})
37-
</h1>
38-
) : (
39-
<h1>We don't know the mouse position yet :(</h1>
40-
)}
36+
<div className="container" onMouseMove={this.handleMouseMove}>
37+
<h1>
38+
The mouse position is ({x}, {y})
39+
</h1>
4140
</div>
4241
);
4342
}
4443
}
4544

46-
const AppWithMouse = withMouse(App);
47-
48-
ReactDOM.render(<AppWithMouse />, document.getElementById("app"));
45+
ReactDOM.render(<App />, document.getElementById("app"));

‎subjects/07-Higher-Order-Components/solution-extra.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -73,21 +73,17 @@ class App extends React.Component {
7373
mouse: PropTypes.shape({
7474
x: PropTypes.number.isRequired,
7575
y: PropTypes.number.isRequired
76-
})
76+
}).isRequired
7777
};
7878

7979
render() {
80-
const { mouse } = this.props;
80+
const { x, y } = this.props.mouse;
8181

8282
return (
8383
<div className="container">
84-
{mouse ? (
85-
<h1>
86-
The mouse position is ({mouse.x}, {mouse.y})
87-
</h1>
88-
) : (
89-
<h1>We don't know the mouse position yet :(</h1>
90-
)}
84+
<h1>
85+
The mouse position is ({x}, {y})
86+
</h1>
9187
</div>
9288
);
9389
}

‎subjects/07-Higher-Order-Components/solution.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
////////////////////////////////////////////////////////////////////////////////
22
// Exercise:
33
//
4-
// - Make `withMouse` a "higher-order component" that sends the mouse position
5-
// to the component as props (hint: use `event.clientX` and `event.clientY`).
4+
// - Make the mouse-tracking logic reusable by filling in the `withMouse`
5+
// higher-order component and returning a new component that renders a
6+
// `ComposedComponent` element with the current mouse position as props
7+
// - Use the `withMouse` function you just wrote to create an `AppWithMouse`
8+
// component
9+
// - Render <AppWithMouse> instead of <App>
610
//
711
// Got extra time?
812
//
@@ -40,21 +44,17 @@ class App extends React.Component {
4044
mouse: PropTypes.shape({
4145
x: PropTypes.number.isRequired,
4246
y: PropTypes.number.isRequired
43-
})
47+
}).isRequired
4448
};
4549

4650
render() {
47-
const { mouse } = this.props;
51+
const { x, y } = this.props.mouse;
4852

4953
return (
5054
<div className="container">
51-
{mouse ? (
52-
<h1>
53-
The mouse position is ({mouse.x}, {mouse.y})
54-
</h1>
55-
) : (
56-
<h1>We don't know the mouse position yet :(</h1>
57-
)}
55+
<h1>
56+
The mouse position is ({x}, {y})
57+
</h1>
5858
</div>
5959
);
6060
}

‎subjects/08-Render-Props/LoadingDots.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,13 @@ class LoadingDots extends React.Component {
77
dots: PropTypes.number
88
};
99

10-
static defaultProps = {
11-
interval: 300,
12-
dots: 3
13-
};
10+
static defaultProps = { interval: 300, dots: 3 };
1411

1512
state = { frame: 1 };
1613

1714
componentDidMount() {
1815
this.interval = setInterval(() => {
19-
this.setState({
20-
frame: this.state.frame + 1
21-
});
16+
this.setState({ frame: this.state.frame + 1 });
2217
}, this.props.interval);
2318
}
2419

@@ -33,7 +28,12 @@ class LoadingDots extends React.Component {
3328
text += ".";
3429
dots--;
3530
}
36-
return <span>{text}&nbsp;</span>;
31+
return (
32+
<span>
33+
{text}
34+
&nbsp;
35+
</span>
36+
);
3737
}
3838
}
3939

‎subjects/08-Render-Props/exercise.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
// the <App>
77
//
88
// Tip: If you're on a Mac, you may need to enable Location Services in order
9-
// for your browser to determine your current location. Open
10-
// System Preferences > Security & Privacy > Privacy > Location Services
11-
// and make sure the "Enable Location Services" box is checked.
9+
// for your browser to determine your current location. Open
10+
// System Preferences > Security & Privacy > Privacy > Location Services
11+
// and make sure the "Enable Location Services" box is checked.
1212
//
1313
// Got extra time?
1414
//
@@ -22,8 +22,8 @@ import React from "react";
2222
import ReactDOM from "react-dom";
2323
import PropTypes from "prop-types";
2424

25-
import getAddressFromCoords from "./utils/getAddressFromCoords";
2625
import LoadingDots from "./LoadingDots";
26+
import getAddressFromCoords from "./utils/getAddressFromCoords";
2727

2828
class App extends React.Component {
2929
state = {

‎subjects/08-Render-Props/solution.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
// the <App>
77
//
88
// Tip: If you're on a Mac, you may need to enable Location Services in order
9-
// for your browser to determine your current location. Open
10-
// System Preferences > Security & Privacy > Privacy > Location Services
11-
// and make sure the "Enable Location Services" box is checked.
9+
// for your browser to determine your current location. Open
10+
// System Preferences > Security & Privacy > Privacy > Location Services
11+
// and make sure the "Enable Location Services" box is checked.
1212
//
1313
// Got extra time?
1414
//
@@ -22,8 +22,8 @@ import React from "react";
2222
import ReactDOM from "react-dom";
2323
import PropTypes from "prop-types";
2424

25-
import getAddressFromCoords from "./utils/getAddressFromCoords";
2625
import LoadingDots from "./LoadingDots";
26+
import getAddressFromCoords from "./utils/getAddressFromCoords";
2727

2828
class GeoPosition extends React.Component {
2929
static propTypes = {

‎subjects/17-Chat-App/exercise.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
// - Create a chat application using the utility methods we give you
55
//
66
// Tip: The app uses a pop-up window for auth with GitHub. You may need to
7-
// make sure that you aren't blocking pop-up windows on localhost!
7+
// make sure that you aren't blocking pop-up windows on localhost!
88
//
99
// Need some ideas?
1010
//
@@ -18,7 +18,7 @@
1818
import "./styles.css";
1919

2020
import React from "react";
21-
import { render } from "react-dom";
21+
import ReactDOM from "react-dom";
2222
import { login, sendMessage, subscribeToMessages } from "./utils";
2323

2424
/*
@@ -75,7 +75,7 @@ class Chat extends React.Component {
7575
<img src="https://pbs.twimg.com/profile_images/534863086276988928/bX3juDCC_400x400.jpeg" />
7676
</div>
7777
<ol className="messages">
78-
<li className="message">Hahaha 😅</li>
78+
<li className="message">Ha 😅</li>
7979
</ol>
8080
</li>
8181
</ol>
@@ -94,4 +94,4 @@ class Chat extends React.Component {
9494
}
9595
}
9696

97-
render(<Chat />, document.getElementById("app"));
97+
ReactDOM.render(<Chat />, document.getElementById("app"));

0 commit comments

Comments
 (0)