Completely rewrite a Vue Bookstore project using react stack

Time:2021-8-28

This project is in the previous oneVue projectOn this basis, a Book City Project rewritten with react technology stack

Vue version address

Address of the project

Preview address

Project description

This project is a mobile Bookstore project built by react + nodejs + mysql. The data is crawled by nodejs crawler and stored in MySQL. The project API is built by express, and the front-end part is the react technology stack. For details about the crawler and API, please refer to the description of Vue version,address

Before writing this, I was quite proficient in Vue. I turned to react, studied the syntax of JSX for two days, and then studied redux. I found that it is similar to vuex, and I can get started quickly.

Then he began to rewrite the project with react family bucket. It took less than a week before and after using his spare time. Then he spent a day or two adding bookshelf functions not available in Vue version.

The project is built based on create react app. Sass support is added. Component hot overloading is not supported yet. React router and Redux are added.

To sum up, Vue and react share the same concept, focusing on componentization. State and props also have similar functions. Vuex and Redux are similar to some extent. The difference between them may be that the syntax is different. Vue is written more like the traditional development method of HTML, JS and CSS. The writing method of JSX may be difficult for some people to accept, but it is not difficult to master, In addition, react may require a higher level of mastery of JS.

So I think, Vue and react, if you are familiar with one of them, I believe you can start the other quickly, because you have mastered the core concept, and the rest is grammar, and vuex and Redux are the same.

I think the difficulty of this project is the bookshelf function, and notes are also written. Those with similar ideas can confirm each other.

function

  • [x] Home page recommendation

  • [x] Book details

  • [x] Similar recommendation

  • [x] Category view

  • [x] Reader

  • [x] Chapter jump

  • [x] Change font

  • [x] Change theme

  • [x] Night mode

  • [x] Page flipping

  • [x] Local storage (storing the reading progress of each book)

  • [x] Bookshelf

Project screenshot






Completely rewrite a Vue Bookstore project using react stack