React family barrel project



In my spare time, I did a react project, which is a finished product. It is relatively simple and has many defects. The directory structure is quite simple. You can’t run without a database. If you want to run, delete the part of express calling database and write dead data.


This integrated react family bucket can be run directly or used in production environment directly.

Source code

Preview address

It’s best to experience with Google explorer, other browsers are not tested.

Technology stack

react + redux + saga + router + es6 + node.js + webpack + mysql


  • Simple login, registration and password modification
  • Users can praise and collect
  • The personal center can upload head pictures and pictures (up to three pictures can be uploaded), which is not compressed temporarily.
  • Personal center can change password and log out

directory structure

React family barrel project

common method


Encapsulate fetch request and report error uniformly.

function request({ method, options, callback }) {
  options.mode = "cors";
  if(!options.sign) {
    options.headers = {
      'Content-Type': 'application/json'
    if(!(options.method === 'GET' || options.method === 'DELETE')) {
      options.body = JSON.stringify(options.body);
  options.credentials = 'include';
  return fetch(getApi + method, options )
    .then((data) => {
      return data;
    }).catch((err) => {
        top: 24,
        duration: 1,
        maxCount: 3,
      message.error ('Send fetch failed '+ JSON.stringify (ERR) + ', method name:' + method);

The interface conforms to restful design

React family barrel project


Tool class JS


All routing configurations are in this JS


Site building steps, in my blog to share out. Welcome to discuss, only introduce the implementation, do not explain the meaning of the relevant code.

Recommended Today

Second week of summer vacation (improve code and summarize problems)

preface: This week, we mainly reviewed and improved the unfinished refactoring tasks. In this process, we also encountered problems. We summarized them. At the same time, through continuous practice, we have a further understanding of the code of the tutorial. 1 Taking the management of teachers as an example, this paper analyzes the relationship between […]