0.0_react.md

React

• Create React App
• Redux
• React Router
• Scss Modules
• Storybook

1.0_react-components.md

https://www.learnstorybook.com/react/en/simple-component/ https://github.com/chromaui/learnstorybook-code

1.1_custom-storybook.md

• custom config
• custom webpack.config
• Sass modules
• react router in stories
• compnent with react router: storybookjs/storybook#769 and https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

1.2_react-redux.md

https://thinkster.io/tutorials/create-react-app

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. -Redux Docs

The fundamental concepts in Redux are called "stores" and "actions"

reducer receives both the current state and the action as parameters, and returns the modified state.

reducer should not have any side-effects, that is, if you call a reducer with the same state and the same action, you should always get the same result.

good practice to encapsulate as much of your application logic as possible in reducers, because, since your reducers don't rely on side-effects or global state, they're really easy to test, debug, and refactor.

A store has three functions that you're going to be using in this course:

getState - fetches the current state of a store dispatch - fires off a new action subscribe - fires a callback everytime there's a new action after a reducer's action

We subscribe to the redux store and call React's setState() function every time the store changes so we always get the newly reduced state. React calls the render() function every time the component's state changes, which "renders" the component.

To mutate(change) the redux state, you need to dispatch an action. Recall that an action is the 2nd parameter that gets passed to your reducer. An action is an object that tells your reducer what happened (e.g. toggle, click, etc.).

1.3_react-router.md

React Router tutorial https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

Display acticve Class - Navlink https://stackoverflow.com/questions/42044214/how-can-i-style-active-link-in-react-router-v4