- A top-level container renders the rest of the component tree.
- That container holds child presentational components, as well as other containers which in turn hold presentational components.
- Containers are responsible for getting data from state and updating internal state in response to user interaction.
- Presentational components are responsible for receiving data from their parents to display and alerting their parents when a user-triggered change needs to be made via the DDAU pattern
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sum: function(arr) { | |
return arr.reduce( (total, num) => total + num, 0); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
indexOf: function(arr, item) { | |
return arr.indexOf(item); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function processData(input) { | |
//Enter your code here | |
var data = input.toString().split(/\r?\n/); | |
console.log(data[0]); | |
console.log(data[1]); | |
console.log(data[2]); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const List = styled.div` | |
border-bottom: 1px solid rgba(120, 130, 140, 0.13); | |
padding: 10px 15px; | |
&:last-child { | |
border: none; | |
} | |
&:hover { | |
background: #f7fafc; | |
} | |
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Row = styled.div` | |
display: flex; | |
align-items: center; | |
flex-flow: row wrap; | |
padding: 16px 0 8px; | |
> * { | |
flex: 1 100%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import cache from 'memory-cache'; | |
const getAndCache = (endpoint) => { | |
const cachedData = cache.get(endpoint); | |
if (cachedData) { | |
return Promise.resolve(cachedData); | |
} | |
return fetch(`${BASE_URL}/${endpoint}`, { |
- Reducers are just pure functions that take the previous state and an action, and return the next state. ( https://redux.js.org/docs/introduction/ThreePrinciples.html ) ** Redux Three Principles **
- The dispatch method is a method of the store object. An action is dispatched to trigger an update to the store.
- react-redux and make a dumb and a smart component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const isMobile = window.innerWidth <= 376; | |
const isTablet = window.innerWidth <= 768; | |
const isDesktop = window.innerWidth <= 992; |
Conditionally adding keys to JavaScript objects using spread operators and short-circuit evaluation
`const buildAnObjectFromAQuery = (query) => { const object = {}; if (query.foo) { object.foo = query.foo; } if (query.bar) { object.bar = query.bar; }
OlderNewer