mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
Day 2: title formatting coherence, minor edits
This commit is contained in:
@@ -8,8 +8,8 @@ We will solve these problems with the [React Context API](https://reactjs.org/do
|
||||
|
||||
1. The problem of complex applications
|
||||
2. React Context API
|
||||
3. Consuming context from a Class Component
|
||||
4. Consuming context from a Functional Component
|
||||
3. Consuming context from a class component
|
||||
4. Consuming context from a functional component
|
||||
|
||||
## The problem of complex applications
|
||||
|
||||
@@ -81,7 +81,7 @@ class TodoApp extends React.Component {
|
||||
}
|
||||
```
|
||||
|
||||
### Consume context from a Class Component
|
||||
### Consume context from a class component
|
||||
|
||||
Inside a class-based child component, such as `<TodoHeader>`, the context created in the parent can be accessed via `this.context`. Note that for this to work, you must also set the component class's `contextType` property to the context type created above.
|
||||
|
||||
@@ -97,7 +97,7 @@ class TodoHeader extends React.Component {
|
||||
TodoHeader.contextType = TodoContext;
|
||||
```
|
||||
|
||||
### Consume context from a Functional Component
|
||||
### Consume context from a functional component
|
||||
|
||||
If you're using the functional component syntax, you can access the context with the `useContext()` hook:
|
||||
|
||||
|
||||
@@ -4,19 +4,19 @@
|
||||
|
||||
If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 4 to see results.
|
||||
|
||||
## TodoContext.Provider Component
|
||||
## TodoContext.Provider component
|
||||
|
||||
1. Open `exercise/src/components/TodoApp.tsx`
|
||||
|
||||
2. Uncomment the missing functions inside the value prop
|
||||
|
||||
## TodoFooter, Context inside Functional Component
|
||||
## TodoFooter: context inside functional component
|
||||
|
||||
1. Open `exercise/src/components/TodoFooter.tsx`
|
||||
|
||||
2. Use `useContext` to access the `TodoContext` and replace the two constants with values from the context
|
||||
|
||||
## TodoHeader, Context inside Class Component
|
||||
## TodoHeader: context inside class component
|
||||
|
||||
1. Open `exercise/src/components/TodoHeader.tsx`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user