47 |
52 | );
53 | };
54 |
55 | render(Adopt Me!
48 |
69 | 
70 |
71 |
72 |
75 |
76 | );
77 | };
78 |
79 | export default Pet;
80 | ```
81 |
82 | Looks much better! The links don't go anywhere yet but we'll get there. We don't have a good loading experience yet though. Right now we just seem unresponsive. Using a new tool to React called Suspense we can make the DOM rendering wait until we finish loading our data, show a loader, and then once it finishes we can resume rendering it. This is coming soon; for now you would just keep track of a loading Boolean and then conditionally show your component or a loading spinner based on whether it was finished loading or not.
83 |
84 | > 🏁 [Click here to see the state of the project up until now: 07-component-composition][step]
85 |
86 | [step]: https://github.com/btholt/citr-v6-project/tree/master/07-component-composition
87 |
--------------------------------------------------------------------------------
/lessons/04-core-react-concepts/G-react-dev-tools.md:
--------------------------------------------------------------------------------
1 | ---
2 | description: "An essential tool in any React developer's toolbox is the official React Dev Tools extension. Brian shows you how to install and use them."
3 | ---
4 |
5 | React has some really great tools to enhance your developer experience. We'll go over a few of them here.
6 |
7 | ## `NODE_ENV=development`
8 |
9 | React already has a lot of developer conveniences built into it out of the box. What's better is that they automatically strip it out when you compile your code for production.
10 |
11 | So how do you get the debugging conveniences then? Well, if you're using Parcel.js, it will compile your development server with an environment variable of `NODE_ENV=development` and then when you run `parcel build {name}
73 |{`${animal} — ${breed} — ${location}`}
74 |hi!
; 16 | }; 17 | 18 | export default Details; 19 | ``` 20 | 21 | Now the Results page is its own component. This makes it easy to bring in the router to be able to switch pages. Run `npm install react-router-dom@5.2.0`. 22 | 23 | Now we have two pages and the router available. Let's go make it ready to switch between the two. In `App.js`: 24 | 25 | ```javascript 26 | // at top 27 | import { BrowserRouter as Router, Route } from "react-router-dom"; 28 | import Details from "./Details"; 29 | 30 | // replace
34 |
60 |
61 |
63 |
64 |
66 |
67 |
69 |
70 |
71 |
;
72 | ```
73 |
74 | Now notice it only renders one page at a time.
75 |
76 | So now let's make the two pages link to each other. Go to Pet.js.
77 |
78 | ```javascript
79 | // at top
80 | import { Link } from "react-router-dom";
81 |
82 | // change wrapping
83 |
84 | […]
85 | ;
86 | ```
87 |
88 | Why did we change this? Didn't the `` work? It did but with a flaw: every link you clicked would end up in the browser navigating to a whole new page which means React would totally reload your entire app all over again. With `` it can intercept this and just handle that all client-side. Much faster and a better user experience.
89 |
90 | Now each result is a link to a details page! And that id is being passed as a prop to Details. Try replacing the return of Details with:
91 |
92 | ```javascript
93 | import { useParams } from "react-router-dom";
94 |
95 | const Details = () => {
96 | const { id } = useParams();
97 | return Adopt Me!
62 |
65 |
{id}
; 98 | }; 99 | 100 | export default Details; 101 | ``` 102 | 103 | The `useParams` hook is how you get params from React Router. It used to be through the props but now they prefer this API. 104 | 105 | Let's make the Adopt Me! header clickable too. 106 | 107 | ```javascript 108 | // import Link too 109 | import { Router, Link } from "react-router-dom"; 110 | 111 | // replace h1 112 |loading …
; 33 | } 34 | 35 | const { animal, breed, city, state, description, name } = this.state; 36 | 37 | return ( 38 |
39 |
46 | );
47 | }
48 | }
49 |
50 | export default withRouter(Details);
51 | ```
52 |
53 | - Every class component extends `React.Component`. Every class component must have a render method that returns some sort of JSX / markup / call to `React.createElement`.
54 | - Not every component needs to have a constructor. Many don't. I'll show you momentarily how you nearly never need to have one. In this case we need it to instantiate the state object (which we'll use instead of `useState`.) If you have a constructor, you _have_ to do the `super(props)` to make sure that the props are passed up to React so React can keep track of them.
55 | - `componentDidMount` is a function that's called after the first rendering is completed. This pretty similar to a `useEffect` call that only calls the first time. This is typically where you want to do data fetching. It doesn't have to be async; we just made it async here to make the data fetching easy.
56 | - Notice instead of getting props via parameters and state via `useState` we're getting it from the instance variables `this.state` and `this.props`. This is how it works with class components. Neither one will you mutate directly.
57 | - `this.state` is the mutable state of the component (like useState). You'll use `this.setState` to mutate it (don't modify it directly.)
58 | - `this.props` comes from the parent component, similar to parameter given to the render functions that we pull props out of.
59 | - `withRouter()` is called a higher order component and is a bit of an advance concept. Basically we're composing functionality into our component via react-router. Think of `useParams`: it mixes in functionality from react-router by calling a hook. This is how you get that custom hook behavior of mixing in library functionality with class components. Redux does this too, but otherwise it's not overly common.
60 |
61 | ## Other lifecycle methods
62 |
63 | This class doesn't cover all the lifecycle methods but you can imagine having different timings for different capabilities of a component can be useful. For example, if you have a set of props that come in and you need to filter those props before you display them, you can use `getDerivedStateFromProps`. Or if you need to react to your component being removed from the DOM (like if you're subscribing to an API and you need to dispose of the subscription) you can use `componentWillUnmount`.
64 |
65 | There are lots more you can check out in [the React docs here][docs].
66 |
67 | [docs]: https://reactjs.org/docs/react-component.html
68 |
--------------------------------------------------------------------------------
/lessons/05-react-capabilities/C-class-properties.md:
--------------------------------------------------------------------------------
1 | ---
2 | description: "Using constructors to set initial state for class components is verbose and can be done better. Brian teaches you to use the new feature in JavaScript, class properties, to make your code easy to read."
3 | ---
4 |
5 | The constructor is annoying. We can use something called class properties to make it a lot nicer and easier to read. Class properties are a new part of JavaScript so we need Parcel transform the code when Parcel transpiles our code. Luckily our config will do that by itself so no further changes are needed (previously we did need to.)
6 |
7 | Since we're going to take ahold of our own Babel configuration, we need to take over _all of it_. Parcel won't do it for us anymore. So install the following:
8 |
9 | ```bash
10 | npm i -D @babel/plugin-proposal-class-properties@7.13.0 @babel/preset-env@7.13.5 @babel/eslint-parser@7.13.4
11 | ```
12 |
13 | Now modify your `.babelrc` with the following:
14 |
15 | ```json
16 | {
17 | "presets": [
18 | [
19 | "@babel/preset-react",
20 | {
21 | "runtime": "automatic"
22 | }
23 | ],
24 | "@babel/preset-env"
25 | ],
26 | "plugins": ["@babel/plugin-proposal-class-properties"]
27 | }
28 | ```
29 |
30 | Babel's core concept is a plugin. Every one sort of a transformation it can perform is encapsulated into a plugin. Here we're including one explicitly: transform-class-properties. Then we're including a _preset_ as well. A preset is just a group of plugins, grouped together for convenience. `env` is a particularly good one you should expect to normally use.
31 | This will allow us too to make ESLint play nice too (Prettier handles this automatically.) Add one line to the top level of your `.eslintrc.json`:
32 |
33 | ```json
34 | {
35 | …
36 | "parser": "@babel/eslint-parser",
37 | …
38 | }
39 | ```
40 |
41 | Now with this, we can modify Details to be as so:
42 |
43 | ```javascript
44 | // replace constructor
45 | state = { loading: true };
46 | ```
47 |
48 | Loads easier to read, right?
49 |
--------------------------------------------------------------------------------
/lessons/05-react-capabilities/D-managing-state-in-class-components.md:
--------------------------------------------------------------------------------
1 | ---
2 | description: "Class components work a little different from hooks in terms of marshalling state. Brian teaches you how to manage your state using setState and life cycle methods."
3 | ---
4 |
5 | Okay, so on this page, notice first we have a loading indicator (this one isn't nice looking but you could put some effort into it if you wanted.) This is a good idea while you're waiting for data to load.
6 |
7 | Let's make a nice photo carousel of the pictures for the animal now. Make a new file called Carousel.js:
8 |
9 | ```javascript
10 | import { Component } from "react";
11 |
12 | class Carousel extends Component {
13 | state = {
14 | active: 0,
15 | };
16 |
17 | static defaultProps = {
18 | images: ["http://pets-images.dev-apis.com/pets/none.jpg"],
19 | };
20 |
21 | render() {
22 | const { active } = this.state;
23 | const { images } = this.props;
24 | return (
25 |
40 |
45 | {name}
41 |{`${animal} — ${breed} — ${city}, ${state}`}
42 | 43 |{description}
44 |
26 | 
27 |
39 | );
40 | }
41 | }
42 |
43 | export default Carousel;
44 | ```
45 |
46 | Add the Carousel component to the Detail page.
47 |
48 | ```javascript
49 | // import at top
50 | import Carousel from "./Carousel";
51 |
52 | // at top of Details function
53 | const { animal, breed, city, state, description, name, images } = this.state;
54 |
55 | // first component inside div.details
56 |
28 | {images.map((photo, index) => (
29 | // eslint-disable-next-line
30 | 
36 | ))}
37 |
38 | 28 | There was an error with this listing. Click here{" "} 29 | to back to the home page or wait five seconds. 30 |
31 | ); 32 | } 33 | 34 | return this.props.children; 35 | } 36 | } 37 | 38 | export default ErrorBoundary; 39 | ``` 40 | 41 | - Now anything that is a child of this component will have errors caught here. Think of this like a catch block from try/catch. 42 | - A static method is one that can be called on the constructor. You'd call this method like this: `ErrorBoundary.getDerivedStateFromError(error)`. This method must be static. 43 | - If you want to call an error logging service, `componentDidCatch` would be an amazing place to do that. I can recommend [Azure Monitor][azure], [Sentry][sentry], and [TrackJS][trackjs]. 44 | 45 | Let's go make Details use it. Go to Details.js 46 | 47 | ```javascript 48 | // add import 49 | import ErrorBoundary from "./ErrorBoundary"; 50 | 51 | // replace export 52 | const DetailsWithRouter = withRouter(Details); 53 | 54 | export default function DetailsErrorBoundary(props) { 55 | return ( 56 |` route with the Provider, that context would not be available inside of `
76 | {([theme]) => (
77 |
78 | )}
79 | ;
80 | ```
81 |
82 | - This is how you use context inside of a class component.
83 | - Remember you cannot use hooks inside class components at all. This is why we're using the `Consumer` from `ThemeContext`. Functionally this works the same way though.
84 |
85 | Lastly let's go make the theme changeable. Head back to SearchParams.js.
86 |
87 | ```javascript
88 | // also grab setTheme
89 | const [theme, setTheme] = useContext(ThemeContext);
90 |
91 | // below BreedDropdown
92 | ;
105 | ```
106 |
107 | - This looks relatively similar to hooks, right? It should because it works the same!
108 | - Now try changing the theme and navigating to a pet page. Notice the theme is consistent! The theme is kept between pages because it's kept at the App level and App is never unmounted so its state persists between route changes.
109 | - You can have multiple layers of context. If I wrapped SearchParams in its own `Provider` (in addition to the one that already exists), the SearchParams context would read from that because it's the closest one whereas Details would read from the top level one because it's the only one.
110 |
111 | That's it for context! Something like theming would be perfect for context. It's for app-level data. Everything else should be boring-ol' state.
112 |
113 | > 🏁 [Click here to see the state of the project up until now: 11-context][step]
114 |
115 | [step]: https://github.com/btholt/citr-v6-project/tree/master/11-context
116 | [v4]: https://btholt.github.io/complete-intro-to-react-v4/context
117 |
--------------------------------------------------------------------------------
/lessons/06-special-case-react-tools/C-portals-and-refs.md:
--------------------------------------------------------------------------------
1 | ---
2 | description: ""
3 | ---
4 |
5 | Another nice feature React is something called a Portal. You can think of the portal as a separate mount point (the actual DOM node which your app is put into) for your React app. A common use case for this is going to be doing modals. You'll have your normal app with its normal mount point and then you can also put different content into a separate mount point (like a modal or a contextual nav bar) directly from a component. Pretty cool!
6 |
7 | First thing, let's go into index.html and add a separate mount point:
8 |
9 | ```html
10 |
11 |
12 | ```
13 |
14 | This where the modal will actually be mounted whenever we render to this portal. Totally separate from our app root.
15 |
16 | Next create a file called Modal.js:
17 |
18 | ```javascript
19 | import React, { useEffect, useRef } from "react";
20 | import { createPortal } from "react-dom";
21 |
22 | const modalRoot = document.getElementById("modal");
23 |
24 | const Modal = ({ children }) => {
25 | const elRef = useRef(null);
26 | if (!elRef.current) {
27 | elRef.current = document.createElement("div");
28 | }
29 |
30 | useEffect(() => {
31 | modalRoot.appendChild(elRef.current);
32 | return () => modalRoot.removeChild(elRef.current);
33 | }, []);
34 |
35 | return createPortal(
{children}
, elRef.current);
36 | };
37 |
38 | export default Modal;
39 | ```
40 |
41 | - This will mount a div and mount inside of the portal whenever the Modal is rendered and then _remove_ itself whenever it's unrendered.
42 | - We're using the feature of `useEffect` that if you need to clean up after you're done (we need to remove the div once the Modal is no longer being rendered) you can return a function inside of `useEffect` that cleans up.
43 | - We're also using a ref here via the hook `useRef`. Refs are like instance variables for function components. Whereas on a class you'd say `this.myVar` to refer to an instance variable, with function components you can use refs. They're containers of state that live outside a function's closure state which means anytime I refer to `elRef.current`, it's **always referring to the same element**. This is different from a `useState` call because the variable returned from that `useState` call will **always refer to the state of the variable when that function was called.** It seems like a weird hair to split but it's important when you have async calls and effects because that variable can change and nearly always you want the `useState` variable, but with something like a portal it's important we always refer to the same DOM div; we don't want a lot of portals.
44 | - Down at the bottom we use React's `createPortal` to pass the children (whatever you put inside `