scwebd
2/2/2019 - 7:53 AM

day1

*==== @channel React and ES6 Resources: ==========================*
_(based on how far we got in last night's review session)_

*Our Goal Wireframe:* https://wireframe.cc/qXKuwB

*Babel Repl* (paste in ES6+ code and see how it's converted into ES5 syntax): https://babeljs.io/repl/#

*How to Comment in React JSX:* https://wesbos.com/react-jsx-comments/

*Reactstrap Installation:* https://reactstrap.github.io/

*Reactstrap Layout Components* (Containers, Rows, Cols, etc): https://reactstrap.github.io/components/layout/

*What Does ServiceWorker Do in React?* https://stackoverflow.com/questions/47953732/what-does-registerserviceworker-do-in-react-js/47953810

*YouTube Data API Overview/Documentation:* https://developers.google.com/youtube/v3/getting-started

*Documentation on the particular endpoint we used:* https://developers.google.com/youtube/v3/docs/search/list#usage

*Axios Cheat Sheet* (keep this bookmarked for a quick syntax reminder!): https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index

*A Dead Simple intro to Destructuring JavaScript Objects:* https://wesbos.com/destructuring-objects/

*When to Use Arrow Functions in React:* https://reactarmory.com/answers/when-to-use-arrow-functions

*Presentational vs Container (Dumb vs Smart) Components:* https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

*React Lifecycle Methods — How and When to Use Them* (GREAT, easy to understand insight into what to use and when): https://blog.bitsrc.io/react-16-lifecycle-methods-how-and-when-to-use-them-f4ad31fb2282
*==== @channel More React Resources: =====================:*

*Styled Components* (the styling method we used today, allowing us to nest child style styles, conditionally style based on props, etc): https://www.styled-components.com/

*Styled Components in Action:* https://hackernoon.com/styled-components-in-action-723852f2a93d

*Styled Components in React Applications:* https://programmingwithmosh.com/javascript/styled-components-react-applications/

*Presentational and Container Components (ie Smart vs Dumb Components)* (when to make a component a 'class' vs a 'const', and what the differences are behaviorally): https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

*The Importance of Component Keys in React:* https://coderwall.com/p/jdybeq/the-importance-of-component-keys-in-react-js

*Index as a key is an anti-pattern* (or why never to use array index as a React key): https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

*When Should I Use Arrow Functions in React?* https://reactarmory.com/answers/when-to-use-arrow-functions

*When _not_ to use arrow functions:* https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/

*A Dead Simple Guide to Object Destructuring:* https://wesbos.com/destructuring-objects/

*Lodash Utility Library* (Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc. Lodash’s modular methods are great for: Iterating arrays, objects, & strings; Manipulating & testing values; and Creating composite functions): https://lodash.com/

*Introduction to Lodash:* https://medium.com/front-end-weekly/introduction-to-lodash-71dbee093b49

*React Lifecycle Methods — how and when to use them* (study up on componentDidMount and componentDidUpdate in particular): https://blog.bitsrc.io/react-16-lifecycle-methods-how-and-when-to-use-them-f4ad31fb2282