react-juejin

A high copy of the Denver nuggets, mostly UI to implement according to the Denver nuggets, individual place according to their own idea change, repaired only mobile end part, also do part of the PC will spend too much time, support the service side rendering and pwa, write the project is mainly a practical technology of learned in recent months, and see where there is insufficient, And in the actual development of the time will step on what pit, how to solve

run

yarn or npm install

# development
npm run dev:client
npm run dev:server

# production
npm run build
npm start
Copy the code

Technology stack

  • react
  • react-dom
  • react-router-dom
  • React-helmet (set title and meta)
  • react-loadable
  • react-redux
  • Redux-connect (Asynchronous route Jump)
  • react-router-config
  • React-virtual-list (long list rendering)
  • prop-types
  • @rematch/core (rematch a better redux)
  • @rematch/loading (automatically setting loading when calling effects)
  • Immer (Modify data in a side effect way and return newly referenced data without affecting the original data)
  • axios
  • babel-polyfill
  • classnames
  • lodash-es
  • react-swipe
  • react-toastify
  • React-content-loader (content loading)
  • react-lazyload
  • react-swipe
  • swipe-js-is
  • Git hook (husky)
  • Lint-staged (successively performing written tasks on submitted documents)
  • webpack
  • eslint
  • express

Implemented functions

  • Public head
    • The login
  • Home page
    • The article thumb up
    • Switch classification
  • The article page
    • Comment on the list
    • Comments on the thumb up
    • List of recommended articles
  • Boiling point on page
  • Small volumes
  • Open source library
  • Active page
  • User home page
    • Focus on the user
    • Dynamic list of users
    • The user column
    • Users to the boiling point
    • User likes
    • Tags that users care about

Probably the above functions, login only support mobile login, or you can manually set a cookie like this, and then refresh the page login success

const userInfo = {
    token: data.token,
    clientId: data.clientId,
    uid: data.user.uid
}
Cookies.set('userInfo', userInfo, { path: '/' })
Copy the code

The project structure

├ ─. Gitattributes ├ ─ ecosystem. Json pm2 deployment configuration ├ ─ SRC | ├ ─ app. The JSX | ├ ─ entry - client. Js | ├ ─ entry - server. Js | ├ ─ registerServiceWorker. Js | ├ ─ utils tool function | ├ ─ store store configuration | ├ ─ routes routing configuration | ├ ─ models store model file, Create the state, reducers, effects | ├ ─ containers page components | ├ ─ components display component | ├ ─ assets need to deal with the webpack resources | ├ ─ API to request library encapsulation and the method to get the data ├ ─ server server rendering ├ ─ public static resource ├ ─ build webpack configuration | ├ ─ the DLL generated DLL configuration ├ ─. Vscode | └ launch. The jsonCopy the code

preview

Home page

The article page

The boiling point

Small volumes

Open source library

activity

The user page

The last

If you are interested, you can look at the code, most of the content is relatively simple, if you have questions, welcome to put forward together to discuss

Item address Online address