From ed66d75d34d168f75aea6a8cb7bf1368619d13a8 Mon Sep 17 00:00:00 2001 From: Elizabeth Craig Date: Fri, 1 Mar 2019 07:48:27 -0800 Subject: [PATCH] Step 7 and styling updates --- assets/step.css | 12 ++++++++++++ step2-01/demo/README.md | 2 +- step2-07/demo/README.md | 30 +++++++++++++----------------- step2-07/exercise/README.md | 14 +++++++------- 4 files changed, 33 insertions(+), 25 deletions(-) diff --git a/assets/step.css b/assets/step.css index 6813a5d..af570dc 100644 --- a/assets/step.css +++ b/assets/step.css @@ -40,6 +40,18 @@ body { overflow: auto; } +#markdownReadme code { + font-family: Consolas,Menlo,Monaco,monospace; + font-size: 0.9em; + background-color: white; + padding: 0.2em 0.4em; + border-radius: 5px; +} + +#markdownReadme code.hljs { + background-color: inherit; +} + /** * highlight.js style */ diff --git a/step2-01/demo/README.md b/step2-01/demo/README.md index 563f92d..f5e79de 100644 --- a/step2-01/demo/README.md +++ b/step2-01/demo/README.md @@ -72,7 +72,7 @@ myFunc(...arr); Spreading an object into props for a React component: -```tsx +```jsx const obj = { a: 1, b: 2, c: 3 }; // equivalent to: // diff --git a/step2-07/demo/README.md b/step2-07/demo/README.md index fa55820..ce7a0d7 100644 --- a/step2-07/demo/README.md +++ b/step2-07/demo/README.md @@ -1,24 +1,20 @@ -# Step 2.7: Connect Redux Store to View (Demo) +# Step 2.7: Connect Redux store to view (Demo) [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) -# Redux Ecosystem +Redux is the most popular Flux implementation, and the ecosystem of related libraries has grown as a result. This is one of the reasons why it is a very popular library and in use by many Microsoft products as well. -Redux is the most popular Flux implementation, and the ecosystem of related libraries has grown as a result. This is one of the reason why it is a very popular library in use by many products made by Microsoft as well. +Various GitHub users have collected "awesome lists" of tech and articles related to Redux. Here is [one such list](https://github.com/xgrommx/awesome-redux#react---a-javascript-library-for-building-user-interfaces), but it is literally impossible to list out all the related tech. -There had been "awesome lists" that various github users have collected related to tech and articles about redux. Here's just one such list: +In this step, we introduce but one useful library that works with Redux: [`react-redux`](https://react-redux.js.org/). -https://github.com/xgrommx/awesome-redux#react---a-javascript-library-for-building-user-interfaces +## The official React Redux binding: `react-redux` -It is literally impossible to list out all the related tech. In this step, we introduce but one useful library that works with `redux`. +That's right, Redux doesn't only work with React. It can also be used with Vue.js, Angular, and React Native, to name a few. -# `react-redux`: the Official React Redux Binding +### `` component -That's right, Redux doesn't only work with React. It can be used inside Vue.js, Angular, and React Native, to name a few. - -## Component - -The store doesn't magically get passed to the views randomly. It has to be supplied by a `react-redux` component called ``. It can be placed anywhere, but it's best to just make it available at the root the app: +The store doesn't magically get passed to the views. It has to be supplied by a `react-redux` component called [``](https://react-redux.js.org/api/provider). A `` can be placed anywhere, but it's best to just make it available at the root the app: ```tsx const store = createStore(reducers); @@ -32,9 +28,9 @@ const App = () => { }; ``` -## connect() higher order function +### `connect()` higher-order function -Connect store to view with `react-redux`. `connect()` is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a `` component. +`react-redux` provides a [`connect()`](https://react-redux.js.org/api/connect) function that turns the Redux store and dispatch functions into props for React components. The state and action dispatchers are passed along with a `` component. ```ts const OldComponent = props => { @@ -49,9 +45,9 @@ const NewComponent = connect( )(OldComponent); ``` -The `connect()` function takes in a few functions that maps some portion of the state tree and dispatcher functions as props. It is a **higher order function** meaning that the return value of `connect()` is a function that decorates OldComponents into a NewComponent with all the mapped props. +`connect()` takes in a few functions that map portions of the state tree and dispatcher functions into props. It is a **higher-order function**, meaning that the return value of `connect()` is a function that decorates `OldComponent` into a `NewComponent` with all the mapped props. -This `mapStateToProps` function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state. +A [`mapStateToProps`](https://react-redux.js.org/api/connect#mapstatetoprops-state-ownprops-object) function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state. ```ts function mapStateToProps(state) { @@ -61,7 +57,7 @@ function mapStateToProps(state) { } ``` -The `mapDispatchToProps` are functions that will trigger the action message dispatch mechanism of Redux. It looks like this: +An optional [`mapDispatchToProps`](https://react-redux.js.org/api/connect#mapdispatchtoprops-object-dispatch-ownprops-object) function will trigger the action message dispatch mechanism of Redux. It looks like this: ```ts function mapDispatchToProps(dispatch) { diff --git a/step2-07/exercise/README.md b/step2-07/exercise/README.md index 359de1a..1f04e34 100644 --- a/step2-07/exercise/README.md +++ b/step2-07/exercise/README.md @@ -1,21 +1,21 @@ -# Step 2.7: Connect Redux Store to View (Exercise) +# Step 2.7: Connect Redux store to view (Exercise) [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/) If you still have `npm test` running from the last step, stop it using `ctrl+C`. Start the app by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 7 to see results. -1. open up `exercise/src/index.tsx` and wrap `` with `` as instructed in the comment +1. Open `exercise/src/index.tsx` and wrap `` with `` as instructed in the comment -2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps` +2. Open `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps` 3. Remove the `export` from `export const TodoFooter = (props: TodoFooterProps) => {` -4. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide +4. Uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide -5. do steps 2, 3, and 4 for the `TodoHeader.tsx` file +5. Repeat steps 2, 3, and 4 for the `TodoHeader.tsx` file -## Bonus Exercise +## Bonus exercise -For further reading, go here to look up more information about the `mergeProps` and `options` parameters to `connect()`: +For further reading, go here to learn more about the `mergeProps` and `options` parameters to `connect()`: https://react-redux.js.org/api/connect