$ npm run setup
$ npm start
Client setup (HMR, build tools, etc.) with React Boilerplate at https://github.com/react-boilerplate/react-boilerplate
<HomeSection>
<SectionH1><FormattedMessage {...messages.recommendHeader} /></SectionH1>
<RixiCarousel
data={this.props.recommendations} // data => an array of objects that will map to each card
totalPages={4} // totalPages => an integer setting the number of pages (breadcrumbs)
startPage={1} // startPage => an integer setting the default page to load.
amt={4} // amt => an integer setting the number of cards per page
onPageChange={this.props.fetchRecommendationsPage} // onPageChange => a func that loads the next data set
onItemChange={this.props.changeRateRecommendation} // onItemChange => a func that interacts with each card (ex. rating a card)
mainComponent={CardTop} // mainComponent => pass in react component for main content
subComponent={CardBottom} // subComponent => pass in react component for sub/secondary content
/>
</HomeSection>
- Reselect -
features: makeSelectFeatures(),
- Redux Saga -
export default function* sensorsData() { yield takeLatest(GET_RECOMMENDATIONS, loadRecommendations); }
- Styled Components -
const H1 = styled.h1` font-size: 34px; font-weight: 400; margin-bottom: 0.25em; `;
Keywords: React.js, Redux, redux-saga, styled-components
, Webpack, Hot Reloading, Babel, react-router
- internals - webpack config and React-Boilerplate tools for development
- Why use PureComponent vs Stateless Function vs Component?
1. RATE_RECOMMENDATION, remove and fetch a new item IN PLACE for data []
2. Abstract out Card Components (CardTop and CardBottom) to , feed as a prop to RixiCarousel.
- Build a (default) error component, supply as prop to
<RixiCarousel />
- Cards with no image supplied, should display a default image
- replace google search with youtube search
- CSS Animations/Transitions
- Wrap
- Deploy live sandbox environment
- 100% Test Coverage
- Build script to scrape
// TODO:
comments and build list into README.md(app/container/CarouselPage) => "Build case to render error component"
Update dependencies, config files, and maybe JavaScript files that require babel packages directly