The introduction

Since the React Native project made in October did not use Redux and other libraries, I wrote for some time to learn React in depth. I had an idea to do a demo for practice. At that time, I had no idea about what kind of project I wanted to do, but I also read some open source projects of animation, novel reading and resource aggregation. Since I happened to be studying the open source Android novel reader, Ren Read, I started learning as I went along. The completed features are listed below. The project address is here. If you have good comments, please feel free to issue or PR.

rendering

The target function

  • [x] Leaderboards — done
  • [x] Book Details — done
  • [x] Reading a book — Done
  • [x] Book list recommendation — Done
  • [x] Search for books — done
  • [x] Selected books — done
  • [x] Classify books — done
  • [x] Subject book list — done
  • [x] Book list details — done
  • [x] Main page — done

The directory structure

. ├ ─ the actions#redux action, business logic├ ─ components# page container│ └ ─ common# public directory│ ├ ─ component - the moduleEncapsulated components│ ├ ─ images# Project picture│ ├ ─ ├ ─style# Component styles├ ─ modules# Public module│ ├ ─ APIManage THE API request class│ └ ─ constantsPublic field class├ ─ reducers# reducers in redux, which handles the data stream sent by the action├ ─ the routerRoute management module├ ─ store# Store in redux, join reducers└ ─ the template# Store HTML template
.
Copy the code

The initial structure and description of the project are listed above.

The directory structure is described below

  • The project is initially initialized with reference to React – PXQ.

  • Middleware introduces logging middleware — Redux-Logger, asynchronous API call — Redux-thunk, etc.

  • Component-modules and Components store react components. The difference is that container components are stored in components and module components (e.g. left menu components, book list components, etc.) are stored in component-Module.

  • Page state and other public parts are best independent, unified management;

  • Cross-domain configuration uses the pathRewrite field. Note the version of webpack-dev-server

The preparatory work

    1. Organize the API
    1. Learn Redux(scaffolding)

API data

  • There are two main sources of data: one is the open source Android project and RN version data, and the other is the h5 mobile terminal
  • Cross-domain data: we have searched many methods on the Internet. Considering convenience, we use reverse proxy for processing

Learning story

  • At the beginning, I spent almost one week to learn ReactJS from scratch (ReactJS 101) on Github. I basically read 1-2 chapters every day and enjoyed it very much. It was easy to understand and suitable for beginners.

The first eight chapters are mainly to get familiar with the basic concepts that will be used in the following chapters. Of course, after each chapter, there will be examples for hands-on practice to deepen the understanding of the previous concepts.

Chapters 9 and 10 start with a simple project using the information you learned above.

  • This was followed by 5-6 days of learning the scaffolding of online open source projects — a complete project and personal summary of React + Redux, basically watching

Refer to the libraries used, the compiled packaged scripts, and the Redux code.

  • Finally, I spent about 3 days reading the introduction to Redux written by Teacher Ruan Yifeng

I read this part later when building the overall structure of the project. I have a deeper understanding of the content of reducers, Action and store.

Technology stack

  • Although I have listed many core libraries, I can not use them proficiently, so I have listed some problems encountered and things to be improved in the later stage.

Webpack (3.10.0)

  • This project mainly used the scaffolding of the third party and learned the reverse proxy part. Of course, I also built the Webpack myself, and I will upgrade the Webpack later.

  • If you want to configure a reverse proxy using webpack-dev-server, you need to pay attention to the webpack-dev-server version if you use pathRewrite. This attribute is in 1.15.0, otherwise it will not work. It is hereby stated that there is no such explanation for the same problem found online, so as not to waste time.

  • Upgrade Webpack to 3.10 and update other old packages, such as file-loader, CSS-loader, etc., the problem is in the distribution table.

Webpackage 1.x Upgrade to WebPackage 3.10
The problem 1.x 3.10 note reference
webpack 2 cannot resolve empty extensions There should be no null characters or strings in the Extensions array resolve: {extensions: ['','.css']} resolve: {extensions: ['.css']} Reference 1
Error: Chunk.entry was removed. Use hasRuntime() "Extract - text - webpack - plugin" : "^ 1.10.0", "Extract - text - webpack - plugin" : "^ 2.1.2", Version of the problem Reference 1
Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s). loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer']), ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) The new version supports only one parameter The NPM run dev command is running incorrectly
Unable to find API Schema modulesDirectories modules Property name change NPM run dist Command execution error message is displayed
Can’t find OccurenceOrderPlugin new webpack.optimize.OccurenceOrderPlugin(),newwebpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),new webpack.optimize.UglifyJsPlugin() new webpack.HotModuleReplacementPlugin(),new webpack.optimize.UglifyJsPlugin() OccurenceOrderPlugin and NoErrorsPlugin removed Reference 1

Redux

  • In a nutshell, it is a framework for managing one-way data flows, with granularity controlled according to business complexity. At the beginning of learning, I felt that the project was complicated, and I did not understand the principle. After that, I continued to practice and understand the content I saw in front of me. In the end, the theory should be combined with practice. The simple data flow can be viewed as View -> Action -> (Middleware) -> Reducer

React-router(2.x)

The react-router(2.x) is not the same as the react-router(4.x)

In addition, when publishing packaging and using nginx and other application servers to host, you need to configure the route to the index.html file, otherwise the route will be intercepted.

Antd (2.13)

  • Antd (Experience Technology Department of Ant Financial) is a Chinese Design language Ant Design developed by a large number of project practices and summaries. Its users include Ant Financial, Alibaba, Koubei, Meituan, Didi and a series of well-known companies, including mobile terminal, Web terminal and Pro(recently released).

  • When encountering errors, you can look at Antd issues and solve them basically.

  • Mention Issues to meet certain norms, at the beginning of the trouble, then looked at the wisdom of the question, suddenly realized the necessity of this part.

Extended content

Function extension

  • Discussion area data statistical analysis, mainly want to know a period of hot content.

Testing and optimization

  • Now the project code is not unit tested, subsequent learning integrated JEST testing
  • Optimize some of the components of the page as well as some bugs