blue86321 / bc-one

Project - BC One

Chunwei's first React project, which clones main features of offical RedBull BC One website.

• Project Preview (test data by default)
• Official RedBull BC One website

Note: Projecct Preview implement test data by default, because real data need a proxy server dealing with CORS problem. To get real data:

1. Clone the repository
2. Start the proxy server
   1. cd {repo}/src/adapter
   2. node proxy-server.js
3. Visit Project Preview

Introduction

Using React class components, this project includes:

• image slider
• React Router
• axios with proxy server to deal with CORS (need to start the proxy server in src/adapter/proxy-server.js, otherwise all data is test data)
• css based on less

Project Preview

• main page

• Router

Features waiting to improve/develop

• Lazy Load and Loading Effect

  // lazy load
  import { lazy } from 'react'
  lazy(() => import('./ComponentName'))
  
  // loading effect
  import { Suspense } from 'react'
  import LoadingEffect from './LoadingEffect'
  <Suspense fallback={<LoadingEffect/>}>
      <Route path="/xxx" component={componentName}/>
      <Route path="/xxx" component={componentName}/>
  </Suspense>

• Error Boundary

  // in parent components
  static getDerivedStateFromError(error){
      // do something
      return {hasError:true}
  }
  render(){
      return (
          {this.state.hasError ? <h2>Error...</h2> : <ChildComponent/>}
      )
  }

• Implement PureComponent to reduce render (simply compare variable address in this.state to decide whether to render or not)

  import { PureComponent } from 'react'
  class componentName extends PureComponent(){...}
  // or manually overwrite shouldComponentUpdate()

• Image Crop Analysis
  RedBull api return imageURL as https://img.redbull.com/images/{op}/..., where {op} is different in every image to crop images. How does {op} generate is remained unknown for me. I hard coded {op} in this project.

• Redux
  init react-redux but never used in this project since there is no such scenario. May use react-redux when developing user login module.

• Functional Component
  I might practice fucntional component in the next project.

• Responsive Design
  set @media in css/less to make webpage adjust the layout in different screen sizes.