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:
- Clone the repository
- Start the proxy server
cd {repo}/src/adapter
node proxy-server.js
- Visit Project Preview
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 insrc/adapter/proxy-server.js
, otherwise all data is test data)- css based on
less
-
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 reducerender
(simply compare variable address inthis.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 returnimageURL
ashttps://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
initreact-redux
but never used in this project since there is no such scenario. May usereact-redux
when developing user login module. -
Functional Component
I might practicefucntional component
in the next project. -
Responsive Design
set@media
in css/less to make webpage adjust the layout in different screen sizes.