's HTML into the #app element before we send the response.
18 | // 3. That's a little better, but we're still just sending a lonely tag
19 | // down to the client and then fetching the data once we mount. We can do
20 | // better. Move the data-fetching out of 's componentDidMount and into
21 | // the request handler on the server (hint: inject the contacts into
22 | // via a prop instead).
23 | // 4. There's a warning in your browser console! The HTML we're sending from
24 | // the server doesn't match what React expected on the initial render client-side.
25 | // To fix this, send the data along with the response in the HTML and pick it
26 | // up when we render the on the client.
27 | //
28 | // Note: As you go through the steps, try using the "view source" feature of
29 | // your web browser to see the actual HTML you're rendering on the server.
30 | ////////////////////////////////////////////////////////////////////////////////
31 | import React from "react";
32 | import ReactDOM from "react-dom";
33 | import App from "./exercise/App";
34 |
35 | // TODO: Pass contacts data into the via a prop.
36 | ReactDOM.render(
23 |
¡Universal App!
24 | {contacts ? (
25 |
26 | {contacts.map(contact => (
27 |
28 | {contact.first} {contact.last}
29 |
30 | ))}
31 |
32 | ) : (
33 |
Loading...
34 | )}
35 |
My Universal App
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | `;
28 |
29 | const app = http.createServer((req, res) => {
30 | // TODO: We'd like to render the on the server
31 | // instead of just sending a practically empty page.
32 | const html = createPage();
33 |
34 | res.writeHead(200, {
35 | "Content-Type": "text/html",
36 | "Content-Length": html.length
37 | });
38 |
39 | res.end(html);
40 | });
41 |
42 | app.listen(port, () => {
43 | console.log("\nOpen http://localhost:%s", port);
44 | });
45 |
--------------------------------------------------------------------------------
/subjects/13-Server-Rendering/solution.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////////////////////////////////////
2 | // Solution
3 | //
4 | // First, fire up the server:
5 | //
6 | // 1. Run `npm run ssr-solution` from the root of this repository
7 | // 2. Open http://localhost:8090 (not 8080)
8 | //
9 | // Now let's write some code:
10 | //
11 | // 1. Right now we're rendering the entire application client-side. Check
12 | // out the source of . Our server is essentially sending an empty
13 | // tag down to the client. Use the "view source" feature in your
14 | // web browser to see the HTML the server is sending.
15 | // 2. We'd like to render *something* on the server. Use one of react-dom/server's
16 | // render methods inside the server's request handler (see `server.js`) to
17 | // inject 's HTML into the #app element before we send the response.
18 | // 3. That's a little better, but we're still just sending a lonely tag
19 | // down to the client and then fetching the data once we mount. We can do
20 | // better. Move the data-fetching out of 's componentDidMount and into
21 | // the request handler on the server (hint: inject the contacts into
22 | // via a prop instead).
23 | // 4. There's a warning in your browser console! The HTML we're sending from
24 | // the server doesn't match what React expected on the initial render client-side.
25 | // To fix this, send the data along with the response in the HTML and pick it
26 | // up when we render the on the client.
27 | //
28 | // Note: As you go through the steps, try using the "view source" feature of
29 | // your web browser to see the actual HTML you're rendering on the server.
30 | ////////////////////////////////////////////////////////////////////////////////
31 | import React from "react";
32 | import ReactDOM from "react-dom";
33 | import App from "./solution/App";
34 |
35 | const contacts = window.__DATA__.contacts;
36 |
37 | ReactDOM.render(
38 |
14 |
¡Universal App!
15 | {contacts ? (
16 |
17 | {contacts.map(contact => (
18 |
19 | {contact.first} {contact.last}
20 |
21 | ))}
22 |
23 | ) : (
24 |
Loading...
25 | )}
26 |
My Universal App
17 |
18 |
19 |
20 | ${markup}
21 |
22 |
23 |
24 |
25 |
26 |
27 | `;
28 |
29 | const app = http.createServer((req, res) => {
30 | fetchContacts((error, contacts) => {
31 | const markup = ReactDOMServer.renderToString(
32 |
39 |
{this.props.name}
40 |
41 |
42 | {this.state.items.map(item => (
43 |
44 | {item.label}{" "}
45 | this.removeItem(item)}>
46 | remove
47 |
48 |
49 | ))}
50 |
51 |
60 |
61 |
62 | );
63 | }
64 | });
65 |
66 | render( to animate the transition
11 | ////////////////////////////////////////////////////////////////////////////////
12 | import "./styles.css";
13 |
14 | import React from "react";
15 | import ReactDOM from "react-dom";
16 | import PropTypes from "prop-types";
17 | import { Mixin as TweenStateMixin } from "react-tween-state";
18 | import { Motion, spring } from "react-motion";
19 |
20 | const TweenToggleSwitch = React.createClass({
21 | propTypes: {
22 | animationDuration: PropTypes.number,
23 | isActive: PropTypes.bool.isRequired
24 | },
25 |
26 | mixins: [TweenStateMixin],
27 |
28 | getDefaultProps() {
29 | return {
30 | animationDuration: 350
31 | };
32 | },
33 |
34 | getInitialState() {
35 | return {
36 | knobLeft: 0
37 | };
38 | },
39 |
40 | componentWillReceiveProps(nextProps) {
41 | this.tweenState("knobLeft", {
42 | duration: this.props.animationDuration,
43 | endValue: nextProps.isActive ? 400 : 0
44 | });
45 | },
46 |
47 | render() {
48 | const knobLeft = this.getTweeningValue("knobLeft");
49 | const knobStyle = {
50 | WebkitTransform: `translate3d(${knobLeft}px,0,0)`,
51 | transform: `translate3d(${knobLeft}px,0,0)`
52 | };
53 |
54 | return (
55 |
58 | );
59 | }
60 | });
61 |
62 | const SpringToggleSwitch = React.createClass({
63 | propTypes: {
64 | isActive: PropTypes.bool.isRequired
65 | },
66 |
67 | render() {
68 | const x = this.props.isActive ? 400 : 0;
69 |
70 | return (
71 |
72 | {s => (
73 |
86 | )}
87 |
88 | );
89 | }
90 | });
91 |
92 | const App = React.createClass({
93 | getInitialState() {
94 | return {
95 | isActive: false
96 | };
97 | },
98 |
99 | toggle() {
100 | this.setState({
101 | isActive: !this.state.isActive
102 | });
103 | },
104 |
105 | handleClick() {
106 | this.toggle();
107 | },
108 |
109 | render() {
110 | return (
111 |
112 | Toggle
115 |
116 | );
117 | }
118 | });
119 |
120 | ReactDOM.render( to animate the transition of the red "marker" to its
5 | // destination when it is dropped
6 | //
7 | // Got extra time?
8 | //
9 | // - If you didn't already, use a custom spring to give the animation
10 | // an elastic, bouncy feel
11 | // - Add a "drop hint" element that indicates which element will receive
12 | // the marker when it is dropped to improve usability
13 | ////////////////////////////////////////////////////////////////////////////////
14 | import "./styles.css";
15 |
16 | import React from "react";
17 | import ReactDOM from "react-dom";
18 | import PropTypes from "prop-types";
19 | import { Motion, spring } from "react-motion";
20 | import Draggable from "./components/Draggable";
21 |
22 | class DropGrid extends React.Component {
23 | state = {
24 | isDraggingMarker: false,
25 | startX: 0,
26 | startY: 0,
27 | mouseX: 0,
28 | mouseY: 0
29 | };
30 |
31 | getRelativeXY({ clientX, clientY }) {
32 | const { offsetLeft, offsetTop } = this.node;
33 |
34 | return {
35 | x: clientX - offsetLeft,
36 | y: clientY - offsetTop
37 | };
38 | }
39 |
40 | handleDragStart = event => {
41 | const { x, y } = this.getRelativeXY(event);
42 | const { offsetLeft, offsetTop } = event.target;
43 |
44 | // Prevent Chrome from displaying a text cursor
45 | event.preventDefault();
46 |
47 | this.setState({
48 | isDraggingMarker: true,
49 | startX: x - offsetLeft,
50 | startY: y - offsetTop,
51 | mouseX: x,
52 | mouseY: y
53 | });
54 | };
55 |
56 | handleDrag = event => {
57 | const { x, y } = this.getRelativeXY(event);
58 |
59 | this.setState({
60 | mouseX: x,
61 | mouseY: y
62 | });
63 | };
64 |
65 | handleDrop = () => {
66 | this.setState({ isDraggingMarker: false });
67 | };
68 |
69 | render() {
70 | const {
71 | isDraggingMarker,
72 | startX,
73 | startY,
74 | mouseX,
75 | mouseY
76 | } = this.state;
77 |
78 | let markerLeft, markerTop;
79 | if (isDraggingMarker) {
80 | markerLeft = mouseX - startX;
81 | markerTop = mouseY - startY;
82 | } else {
83 | markerLeft =
84 | Math.floor(Math.max(0, Math.min(449, mouseX)) / 150) * 150;
85 | markerTop =
86 | Math.floor(Math.max(0, Math.min(449, mouseY)) / 150) * 150;
87 | }
88 |
89 | const markerStyle = {
90 | left: markerLeft,
91 | top: markerTop
92 | };
93 |
94 | return (
95 | (this.node = node)}>
96 |
103 |
1
104 |
2
105 |
3
106 |
4
107 |
5
108 |
6
109 |
7
110 |
8
111 |
9
112 |
10 |
11 |
Contacts!
12 |
14 |
15 | );
16 | }
17 | }
18 |
19 | export default App;
20 |
--------------------------------------------------------------------------------
/subjects/16-Redux/exercise/components/ContactList.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect } from "react-redux";
3 | import { addContact, loadContacts } from "../actions";
4 | import CreateContactForm from "./CreateContactForm";
5 |
6 | class ContactList extends React.Component {
7 | static defaultProps = {
8 | contacts: [],
9 | dispatch: () => {
10 | console.log(
11 | "Dispatch failed; you still need to connect() your ContactList"
12 | );
13 | }
14 | };
15 |
16 | componentDidMount() {
17 | loadContacts(this.props.dispatch);
18 | }
19 |
20 | createContact(contact) {
21 | this.props.dispatch(addContact(contact));
22 | }
23 |
24 | render() {
25 | const { contacts } = this.props;
26 |
27 | return (
28 |
29 | {contacts.map(contact => (
30 |
31 |
34 | ))}
35 |
36 | this.createContact(contact)}
38 | />
39 |
40 |
41 | );
42 | }
43 | }
44 |
45 | export default ContactList;
46 |
--------------------------------------------------------------------------------
/subjects/16-Redux/exercise/components/CreateContactForm.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import serializeForm from "form-serialize";
4 |
5 | const transparentGif =
6 | "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
7 |
8 | function generateId() {
9 | return Math.random()
10 | .toString(36)
11 | .substring(7);
12 | }
13 |
14 | class CreateContactForm extends React.Component {
15 | static propTypes = {
16 | onCreate: PropTypes.func.isRequired
17 | };
18 |
19 | handleSubmit = event => {
20 | event.preventDefault();
21 | const contact = serializeForm(event.target, { hash: true });
22 | contact.id = generateId();
23 | this.props.onCreate(contact);
24 | event.target.reset();
25 | };
26 |
27 | render() {
28 | return (
29 |
56 | );
57 | }
58 | }
59 |
60 | export default CreateContactForm;
61 |
--------------------------------------------------------------------------------
/subjects/16-Redux/exercise/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | The goal of this exercise is to gain some hands-on experience using Redux to
3 | manage the state of a React application. In the process, we'll also learn how to
4 | use Redux to communicate changes to a real API server.
5 |
6 | - Get the the props it needs by using connect() to connect it to
7 | the in its parent, the .
8 | - Once it's connected, if you open the console you'll see the contacts being
9 | loaded from the API.
10 | - Add a delete next to each contact that dispatches a DELETE_CONTACT
11 | action. Check the console to make sure the action is being dispatched.
12 | - Add some logic to the contacts reducer to remove that contact when it sees
13 | the DELETE_CONTACT action come through. Also, send a request to the API server
14 | to actually delete the contact on the server. When you refresh the page, that
15 | contact should not appear.
16 | - To start with a fresh list of contacts, use `localStorage.clear()` in the
17 | browser's console.
18 |
19 | We've added the logger middleware to show you all changes as they are happening
20 | in the browser console. If you get stuck, be sure to check the logs!
21 |
22 | Got extra time?
23 |
24 | - Use the throttling feature in Chrome's Network tab to simulate a really slow
25 | connection. How does the UI respond to your actions? What can you do to improve
26 | the UX?
27 | */
28 | import React from "react";
29 | import ReactDOM from "react-dom";
30 | import App from "./components/App";
31 |
32 | ReactDOM.render(
10 |
11 |
Contacts!
12 |
14 |
15 | );
16 | }
17 | }
18 |
19 | export default App;
20 |
--------------------------------------------------------------------------------
/subjects/16-Redux/solution/components/ContactList.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { connect } from "react-redux";
3 | import { addContact, loadContacts, deleteContact } from "../actions";
4 | import CreateContactForm from "./CreateContactForm";
5 |
6 | class ContactList extends React.Component {
7 | static defaultProps = {
8 | contacts: []
9 | };
10 |
11 | componentDidMount() {
12 | loadContacts(this.props.dispatch);
13 | }
14 |
15 | createContact(contact) {
16 | this.props.dispatch(addContact(contact));
17 | }
18 |
19 | deleteContact(contact) {
20 | deleteContact(contact.id, this.props.dispatch);
21 | }
22 |
23 | render() {
24 | const {
25 | contacts,
26 | contactsWithErrors,
27 | contactsBeingDeleted
28 | } = this.props;
29 |
30 | return (
31 |
60 | );
61 | }
62 | }
63 |
64 | export default connect(state => state)(ContactList);
65 |
--------------------------------------------------------------------------------
/subjects/16-Redux/solution/components/CreateContactForm.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import serializeForm from "form-serialize";
4 |
5 | const transparentGif =
6 | "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
7 |
8 | function generateId() {
9 | return Math.random()
10 | .toString(36)
11 | .substring(7);
12 | }
13 |
14 | class CreateContactForm extends React.Component {
15 | static propTypes = {
16 | onCreate: PropTypes.func.isRequired
17 | };
18 |
19 | handleSubmit = event => {
20 | event.preventDefault();
21 | const contact = serializeForm(event.target, { hash: true });
22 | contact.id = generateId();
23 | this.props.onCreate(contact);
24 | event.target.reset();
25 | };
26 |
27 | render() {
28 | return (
29 |
56 | );
57 | }
58 | }
59 |
60 | export default CreateContactForm;
61 |
--------------------------------------------------------------------------------
/subjects/16-Redux/solution/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | The goal of this exercise is to gain some hands-on experience using Redux to
3 | manage the state of a React application. In the process, we'll also learn how to
4 | use Redux to communicate changes to a real API server.
5 |
6 | - Get the the props it needs by using connect() to connect it to
7 | the in its parent, the .
8 | - Once it's connected, if you open the console you'll see the contacts being
9 | loaded from the API.
10 | - Add a delete next to each contact that dispatches a DELETE_CONTACT
11 | action. Check the console to make sure the action is being dispatched.
12 | - Add some logic to the contacts reducer to remove that contact when it sees
13 | the DELETE_CONTACT action come through. Also, send a request to the API server
14 | to actually delete the contact on the server. When you refresh the page, that
15 | contact should not appear.
16 | - To start with a fresh list of contacts, use `localStorage.clear()` in the
17 | browser's console.
18 |
19 | We've added the logger middleware to show you all changes as they are happening
20 | in the browser console. If you get stuck, be sure to check the logs!
21 |
22 | Got extra time?
23 |
24 | - Use the throttling feature in Chrome's Network tab to simulate a really slow
25 | connection. How does the UI respond to your actions? What can you do to improve
26 | the UX?
27 | */
28 | import React from "react";
29 | import ReactDOM from "react-dom";
30 | import App from "./components/App";
31 |
32 | ReactDOM.render(
51 |
52 | HipReact
53 | # messages: 8
54 |
55 |
56 |
57 |
58 |
59 |
60 |
62 | Hey, Bruce!
63 |
64 | So, a QA Engineer walks into a bar.
65 |
66 | Orders a beer.
67 | Orders 0 beers.
68 | Orders 999999999 beers.
69 | Orders -1 beers.
70 | Orders a sfdeljknesv.
71 |
72 |
73 |
74 |
75 |
76 |
78 | Ha 😅
79 |
80 |
81 |
82 |
83 |
88 |
7 | // 1. Add some state w/ `location` as a key
8 | // 2. Set `location`'s initial value to `this.history.location`
9 | // 3. Listen to `history` and put the location into state
10 | // 4. Use context to provide API to descendants
11 | //
12 | //
13 | // 1. Get the location from context
14 | // 2. Figure out if the path matches location.pathname
15 | // (hint: location.pathname.startsWith(...)
16 | // 3. If there is a match, figure out which prop to render
17 | // `component` or `render`
18 | // 4. If there is no match, render null
19 | //
20 | // or
27 | ////////////////////////////////////////////////////////////////////////////////
28 | import React from "react";
29 | import ReactDOM from "react-dom";
30 |
31 | // You will be working in mini-router.js. This file is just an example app that
32 | // uses the components from that library.
33 | import { Router, Route, Link } from "./exercise/mini-router";
34 |
35 | function App() {
36 | return (
37 |
38 |
39 |
40 |
41 |
43 |
44 |
46 |
47 |
49 |
50 |
51 |
52 |
53 |
(
56 |
57 |
Dashboard
58 |
59 | )}
60 | />
61 |
65 | );
66 | }
67 |
68 | function About() {
69 | return (
70 |
71 |
About
72 |
73 | );
74 | }
75 |
76 | function Topics() {
77 | return (
78 |
79 |
Topics
80 |
81 | Rendering with React
82 | Components
83 | Props v. State
84 |
85 |
43 | {this.props.children}
44 |
45 | );
46 | }
47 | }
48 |
49 | export { Router, Route, Link };
50 |
--------------------------------------------------------------------------------
/subjects/18-Mini-Router/solution.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////////////////////////////////////
2 | // Exercise:
3 | //
4 | // Implement the core components of React Router to make this app work:
5 | //
6 | //
7 | // 1. Add some state w/ `location` as a key
8 | // 2. Set `location`'s initial value to `this.history.location`
9 | // 3. Listen to `history` and put the location into state
10 | // 4. Use context to provide API to descendants
11 | //
12 | //
13 | // 1. Get the location from context
14 | // 2. Figure out if the path matches location.pathname
15 | // (hint: location.pathname.startsWith(...)
16 | // 3. If there is a match, figure out which prop to render
17 | // `component` or `render`
18 | // 4. If there is no match, render null
19 | //
20 | // or
27 | ////////////////////////////////////////////////////////////////////////////////
28 | import React from "react";
29 | import ReactDOM from "react-dom";
30 |
31 | // You will be working in mini-router.js. This file is just an example app that
32 | // uses the components from that library.
33 | import { Router, Route, Link } from "./solution/mini-router";
34 |
35 | function App() {
36 | return (
37 |
38 |
39 |
40 |
41 |
43 |
44 |
46 |
47 |
49 |
50 |
51 |
52 |
53 |
(
56 |
57 |
Dashboard
58 |
59 | )}
60 | />
61 |
65 | );
66 | }
67 |
68 | function About() {
69 | return (
70 |
71 |
About
72 |
73 | );
74 | }
75 |
76 | function Topics() {
77 | return (
78 |
79 |
Topics
80 |
81 | Rendering with React
82 | Components
83 | Props v. State
84 |
85 |
36 | {children}
37 |
38 | );
39 | }
40 |
41 | function Route({ path, render, component: Component }) {
42 | const { location } = useContext(RouterContext);
43 |
44 | if (location.pathname.startsWith(path)) {
45 | if (render) return render();
46 | if (Component) return
62 | {children}
63 |
64 | );
65 | }
66 |
67 | export { Router, Route, Link };
68 |
--------------------------------------------------------------------------------
/subjects/18-Mini-Router/solution/mini-router.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { createHashHistory } from "history";
4 |
5 | /*
6 | How to use the history library:
7 |
8 | // read the current URL
9 | history.location
10 |
11 | // listen for changes to the URL
12 | history.listen(() => {
13 | history.location // is now different
14 | })
15 |
16 | // change the URL
17 | history.push('/something')
18 | */
19 |
20 | const RouterContext = React.createContext();
21 |
22 | class Router extends React.Component {
23 | history = createHashHistory();
24 |
25 | state = {
26 | location: this.history.location
27 | };
28 |
29 | componentDidMount() {
30 | this.history.listen(location => {
31 | this.setState({ location });
32 | });
33 | }
34 |
35 | handlePush = to => {
36 | this.history.push(to);
37 | };
38 |
39 | render() {
40 | return (
41 |
53 | {router => {
54 | const { path, render, component: Component } = this.props;
55 |
56 | if (router.location.pathname.startsWith(path)) {
57 | if (render) return render();
58 | if (Component) return
64 | );
65 | }
66 | }
67 |
68 | class Link extends React.Component {
69 | handleClick = (event, router) => {
70 | event.preventDefault();
71 | router.push(this.props.to);
72 | };
73 |
74 | render() {
75 | return (
76 |
77 | {router => (
78 | this.handleClick(event, router)}
81 | >
82 | {this.props.children}
83 |
84 | )}
85 |
86 | );
87 | }
88 | }
89 |
90 | export { Router, Route, Link };
91 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/exercise.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////////////////////////////////////
2 | // Exercise:
3 | //
4 | // Implement the React bindings for the Redux state manager using context and
5 | // a higher-order component.
6 | //
7 | // 1. Implement to make the store accessible on context to the rest
8 | // of the components rendered below it
9 | // 2. Implement `connect`. It should:
10 | // a) Return a function that takes a component
11 | // b) The new function should return a new component that wraps the component
12 | // passed to it
13 | // c) The new component, when rendered, will pass state from
14 | // the store as props to your App component. You'll use the function
15 | // passed to `connect` to map store state to component props
16 | import React from "react";
17 | import ReactDOM from "react-dom";
18 |
19 | import createStore from "./exercise/mini-redux/createStore";
20 | import Provider from "./exercise/mini-redux/Provider";
21 |
22 | import App from "./exercise/App";
23 |
24 | const store = createStore((state = 0, action) => {
25 | if (action.type === "INCREMENT") {
26 | return state + 1;
27 | } else if (action.type === "DECREMENT") {
28 | return state - 1;
29 | } else {
30 | return state;
31 | }
32 | });
33 |
34 | ReactDOM.render(
35 |
36 | ,
38 | document.getElementById("app")
39 | );
40 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/exercise/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import connect from "./mini-redux/connect";
4 |
5 | class App extends React.Component {
6 | static defaultProps = {
7 | counter: "Missing the `counter` prop!"
8 | };
9 |
10 | increment = () => {
11 | this.props.dispatch({ type: "INCREMENT" });
12 | };
13 |
14 | decrement = () => {
15 | this.props.dispatch({ type: "DECREMENT" });
16 | };
17 |
18 | render() {
19 | return (
20 |
21 |
Mini Redux!
22 | Increment {" "}
23 | {this.props.counter}{" "}
24 | Decrement
25 |
26 | );
27 | }
28 | }
29 |
30 | export default connect(state => {
31 | return { counter: state };
32 | })(App);
33 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/exercise/mini-redux/Provider.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | class Provider extends React.Component {
4 | render() {
5 | return {this.props.children}
;
6 | }
7 | }
8 |
9 | export default Provider;
10 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/exercise/mini-redux/connect.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function connect(mapStateToProps) {
4 | return Component => {
5 | return Component;
6 | };
7 | }
8 |
9 | export default connect;
10 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/exercise/mini-redux/createStore.js:
--------------------------------------------------------------------------------
1 | function createStore(reducer) {
2 | let state = reducer(undefined, { type: "@INIT" });
3 | let listeners = [];
4 |
5 | const getState = () => state;
6 |
7 | const dispatch = action => {
8 | state = reducer(state, action);
9 | listeners.forEach(listener => listener());
10 | };
11 |
12 | const subscribe = listener => {
13 | listeners.push(listener);
14 |
15 | return () => {
16 | listeners = listeners.filter(item => item !== listener);
17 | };
18 | };
19 |
20 | return {
21 | getState,
22 | dispatch,
23 | subscribe
24 | };
25 | }
26 |
27 | export default createStore;
28 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/solution.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////////////////////////////////////
2 | // Exercise:
3 | //
4 | // Implement the React bindings for the Redux state manager using context and
5 | // a higher-order component.
6 | //
7 | // 1. Implement to make the store accessible on context to the rest
8 | // of the components rendered below it
9 | // 2. Implement `connect`. It should:
10 | // a) Return a function that takes a component
11 | // b) The new function should return a new component that wraps the component
12 | // passed to it
13 | // c) The new component, when rendered, will pass state from
14 | // the store as props to your App component. You'll use the function
15 | // passed to `connect` to map store state to component props
16 | import React from "react";
17 | import ReactDOM from "react-dom";
18 |
19 | import createStore from "./solution/mini-redux/createStore";
20 | import Provider from "./solution/mini-redux/Provider";
21 |
22 | import App from "./solution/App";
23 |
24 | const store = createStore((state = 0, action) => {
25 | if (action.type === "INCREMENT") {
26 | return state + 1;
27 | } else if (action.type === "DECREMENT") {
28 | return state - 1;
29 | } else {
30 | return state;
31 | }
32 | });
33 |
34 | ReactDOM.render(
35 |
36 | ,
38 | document.getElementById("app")
39 | );
40 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/solution/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import connect from "./mini-redux/connect";
4 |
5 | class App extends React.Component {
6 | increment = () => {
7 | this.props.dispatch({ type: "INCREMENT" });
8 | };
9 |
10 | decrement = () => {
11 | this.props.dispatch({ type: "DECREMENT" });
12 | };
13 |
14 | render() {
15 | return (
16 |
17 |
Mini Redux!
18 | Increment {" "}
19 | {this.props.counter}{" "}
20 | Decrement
21 |
22 | );
23 | }
24 | }
25 |
26 | export default connect(state => {
27 | return { counter: state };
28 | })(App);
29 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/solution/mini-redux/Provider.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import ReduxContext from "./ReduxContext";
4 |
5 | class Provider extends React.Component {
6 | state = {
7 | storeState: this.props.store.getState()
8 | };
9 |
10 | componentDidMount() {
11 | this.unsub = this.props.store.subscribe(() => {
12 | this.setState({
13 | storeState: this.props.store.getState()
14 | });
15 | });
16 | }
17 |
18 | componentWillUnmount() {
19 | this.unsub();
20 | }
21 |
22 | handleDispatch = action => {
23 | this.props.store.dispatch(action);
24 | };
25 |
26 | render() {
27 | return (
28 |
34 | {this.props.children}
35 |
36 | );
37 | }
38 | }
39 |
40 | export default Provider;
41 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/solution/mini-redux/ReduxContext.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const ReduxContext = React.createContext();
4 |
5 | export default ReduxContext;
6 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/solution/mini-redux/connect.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import ReduxContext from "./ReduxContext";
4 |
5 | function connect(mapStateToProps) {
6 | return Component => {
7 | return props => {
8 | return (
9 |
10 | {redux => (
11 |
18 | );
19 | };
20 | };
21 | }
22 |
23 | export default connect;
24 |
--------------------------------------------------------------------------------
/subjects/19-Mini-Redux/solution/mini-redux/createStore.js:
--------------------------------------------------------------------------------
1 | function createStore(reducer) {
2 | let state = reducer(undefined, { type: "@INIT" });
3 | let listeners = [];
4 |
5 | const getState = () => state;
6 |
7 | const dispatch = action => {
8 | state = reducer(state, action);
9 | listeners.forEach(listener => listener());
10 | };
11 |
12 | const subscribe = listener => {
13 | listeners.push(listener);
14 |
15 | return () => {
16 | listeners = listeners.filter(item => item !== listener);
17 | };
18 | };
19 |
20 | return {
21 | getState,
22 | dispatch,
23 | subscribe
24 | };
25 | }
26 |
27 | export default createStore;
28 |
--------------------------------------------------------------------------------
/subjects/20-Select/exercise.js:
--------------------------------------------------------------------------------
1 | ////////////////////////////////////////////////////////////////////////////////
2 | // Exercise:
3 | //
4 | // Make this work like a normal box!
5 | ////////////////////////////////////////////////////////////////////////////////
6 | import "./styles.css";
7 |
8 | import React, { useState, useEffect } from "react";
9 | import ReactDOM from "react-dom";
10 |
11 | function Select({ children }) {
12 | return (
13 |
14 |
15 | label ▾
16 |
17 |
{children}
18 |
{children}
;
24 | }
25 |
26 | function App() {
27 | const [selectValue, setSelectValue] = useState("dosa");
28 |
29 | function setToMintChutney() {
30 | setSelectValue("mint-chutney");
31 | }
32 |
33 | return (
34 |
35 |
Select
36 |
37 |
Uncontrolled
38 |
39 |
40 | Tikka Masala
41 | Tandoori Chicken
42 | Dosa
43 | Mint Chutney
44 |
45 |
46 |
Controlled
47 |
48 |
Current value: {selectValue}
49 |
50 | Set to Mint Chutney
51 |
52 |
53 |
54 | Tikka Masala
55 | Tandoori Chicken
56 | Dosa
57 | Mint Chutney
58 |
59 |
box!
5 | ////////////////////////////////////////////////////////////////////////////////
6 | import "./styles.css";
7 |
8 | import React, { useState, useEffect } from "react";
9 | import ReactDOM from "react-dom";
10 |
11 | function Select({ children, defaultValue, value, onChange }) {
12 | const [showOptions, setShowOptions] = useState(false);
13 | const [currentValue, setCurrentValue] = useState(defaultValue);
14 |
15 | function toggleOptions() {
16 | setShowOptions(!showOptions);
17 | }
18 |
19 | const isControlled = value != null;
20 | const displayValue = isControlled ? value : currentValue;
21 |
22 | function selectValue(value) {
23 | if (isControlled) {
24 | onChange(value);
25 | } else {
26 | setCurrentValue(value);
27 |
28 | if (onChange) {
29 | onChange(value);
30 | }
31 | }
32 | }
33 |
34 | let label;
35 | React.Children.forEach(children, child => {
36 | if (child.props.value === displayValue) {
37 | label = child.props.children;
38 | }
39 | });
40 |
41 | useEffect(() => {
42 | if (isControlled && !onChange) {
43 | console.warn(
44 | "You rendered a with a `value` prop but no `onChange`, so it will be read-only..."
45 | );
46 | }
47 | }, []);
48 |
49 | return (
50 |
51 |
52 | {label} ▾
53 |
54 | {showOptions && (
55 |
56 | {React.Children.map(children, child =>
57 | React.cloneElement(child, {
58 | onSelect: () => selectValue(child.props.value)
59 | })
60 | )}
61 |
62 | )}
63 |
70 | {children}
71 |
72 | );
73 | }
74 |
75 | function App() {
76 | const [selectValue, setSelectValue] = useState("dosa");
77 |
78 | function setToMintChutney() {
79 | setSelectValue("mint-chutney");
80 | }
81 |
82 | return (
83 |
84 |
Select
85 |
86 |
Uncontrolled
87 |
88 |
89 | Tikka Masala
90 | Tandoori Chicken
91 | Dosa
92 | Mint Chutney
93 |
94 |
95 |
Controlled
96 |
97 |
Current value: {selectValue}
98 |
99 | Set to Mint Chutney
100 |
101 |
102 |
103 | Tikka Masala
104 | Tandoori Chicken
105 | Dosa
106 | Mint Chutney
107 |
108 |
13 |
18 |
23 |
24 | {subjects.map((subject, index) => (
25 |
26 | {subject.number}
27 |
28 | {subject.lecture ? (
29 |
33 | {subject.name}
34 |
35 | ) : (
36 | subject.name
37 | )}
38 |
39 |
40 | {subject.exercise && (
41 |
45 | exercise
46 |
47 | )}
48 |
49 |
50 | {subject.solution && (
51 |
55 | solution
56 |
57 | )}
58 |
59 |
60 | ))}
61 |
62 |
63 |
70 |