Writing in the front

This is a netease Kaola that tried to write with React. I have nothing to do these days after returning home for the Spring Festival, because I will start my graduation internship soon, so I took some time to write some small projects to practice my skills. I may not write well at the beginning, but I really like the front end. I the current technology stack is the react + react – the router + redux + less + antd/antpro | | icedesign + nodejs; React-native, WEEX, (VUE, Vuex, VuE-Router, VUE-CLI) are also being tried. I will be uploading these things to Github frequently. (Note: If any infringement is involved, contact Lierhuan)




Making the address

Github.com/a838189349/…


Project directory




Technology stack

  • Create React app (React (16.2.0) scaffolding)
  • The react – the router – dom 16.2.0
  • Redux3.7.2 (State Management)
  • less
  • es6
  • Eolinker (Interface management, simple Mock)
  • Request-promise4.2.2 (Request base)
  • React-lazyLoad

Lib (Shared JS folder)

  • Config. js: Store path, file_path, imgUrl, request address, etc., unified management;Copy the code
  • Func.jsx: encapsulates the possible methods, routing animations, Ajax requests, saving, fetching, and clearing (localStorage, etc., to prevent the use of components have to rewrite again;Copy the code
  • Rem2px. js: automatically calculate the HTML PX value;Copy the code


Has been completed

  • Overall page frame.
  • Search history.
  • Shopping cart increase or decrease quantity, delete.
  • Collect goods.
  • Place an order and delete it.
  • Home page icon drawing.
  • Most data mocks.
  • Pages loaded with data are returned without request.


Data request

  • EOLINKER(management interface, simple Mock);
  • Request-promise (the base library for Ajax methods);


Optimized (elementary)

  • Route cutting, corresponding to the page loading corresponding JS, after gizp2 compressed main.js is 497K;
  • Images load lazily.


pending

  • Search for goods.

  • Optimize the user experience of multicast components.

  • Route switching method overridden (with before_urlName defining left or right switching).

  • Grass community page, each column page.

  • Page and function perfect and compatibility.

  • User experience and performance (loading, toast, etc.);


Methods the detailed

1. Route animation



  • Check whether translateY is 100% or -100% by passing in a back array and the name of the previous page;

  • Set a setTimeout for slideFlag on componentDidMount to prevent it from entering the setState dirtyComponent queue with slideName and possibly leaving no transition at all.



.slide{ transform: translateX(0%) ! important; transition: all .3s ease 0s; }Copy the code

When slideFlag is true, force translateX to 0%, and transition can be used to animate routes.




2. Ask for judgment



  • This method passes in the name of the request and the loadData(requested) stored in the Reducer.
  • When name does not exist in loadData, return false and execute the request. After the request is successful, the corresponding value is saved to loadData.
  • When name exists, the getIndexByLoadData method is called to obtain the index value corresponding to name in loadData, and the setState method is used to assign the corresponding data value.
  • Achieve the function of not making repeated requests.





Clone and boot

# Clone project
git clone https://github.com/a838189349/WangYiKaoLaReact.git

# install dependenciesNPM install or YARN install# Local development environment
npm start

# Build production
npm run buildCopy the code