/rixi-carousel

Environment for my React carousel component design.

Primary LanguageJavaScriptMIT LicenseMIT

Rixi - Project Carousel

App setup:

  1. $ npm run setup
  2. $ npm start

Client setup (HMR, build tools, etc.) with React Boilerplate at https://github.com/react-boilerplate/react-boilerplate

Code Example:

<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>

Libraries used:

  1. Reselect - features: makeSelectFeatures(),
  2. Redux Saga - export default function* sensorsData() { yield takeLatest(GET_RECOMMENDATIONS, loadRecommendations); }
  3. 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

Folder Structure/Questions:

  1. internals - webpack config and React-Boilerplate tools for development
  2. Why use PureComponent vs Stateless Function vs Component?

Project Intermediate Milestones:

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.

  1. Build a (default) error component, supply as prop to <RixiCarousel />
  2. Cards with no image supplied, should display a default image
  3. replace google search with youtube search
  4. CSS Animations/Transitions
  5. Wrap

Project Milestones:

  1. Deploy live sandbox environment
  2. 100% Test Coverage
  3. Build script to scrape // TODO: comments and build list into README.md (app/container/CarouselPage) => "Build case to render error component"

TODOS:

Update dependencies, config files, and maybe JavaScript files that require babel packages directly

  • Works on Node >= 4 (anything lower isn't supported in v7) (#16)
  • Run npm/yarn after updating dependencies (use --install) (#18)
  • Update package.json: dependencies and devDependencies to the "latest supported" version.
    • all package renames
      • babel-loader for webpack >=1 (#34)
      • rollup-plugin-babel (#36)
    • Upgrading the same package to the latest version
    • add @babel/core peerDep (7c34cd)